argumentum Posted April 6 Author Posted April 6 (edited) Ok, try it out. Made a sun button and a moon button. Should be enough. But as always, ideas are welcomed. Edit: added a comboBox to evaluate as an option Edit2: left the comboBox and removed the sun and moon buttons idea. Edit3: moved to the bottom right corner. It'll be better to implement site wide ( not all help pages have the same formatting ). The default theme is the OS/browser default theme. Note for Opera browser users: If the scrollbars look like ..poop, go to "opera://flags/#component-based-scrollbar" and search for "scrollbar". You'll find 4 entries. Disable them ( Opera One scrollbar, Overlay Scrollbars, Fluent Overlay scrollbars and Fluent scrollbars ). Edited April 9 by argumentum opera browser 🤬 donnyh13 1 Follow the link to my code contribution ( and other things too ). FAQ - Please Read Before Posting.
donnyh13 Posted April 7 Posted April 7 On 4/5/2024 at 11:48 PM, argumentum said: Ok, try it out. Looks nice! I like it! One thought comes to mind, but may be too complex. Is a floating button possible? Staying at the bottom-right of the browser always? Just thought users may find it easier that way. LibreOffice UDF ; Scite4AutoIt Spell-Checker Using LibreOffice Spoiler "Life is chiefly made up, not of great sacrifices and wonderful achievements, but of little things. It is oftenest through the little things which seem so unworthy of notice that great good or evil is brought into our lives. It is through our failure to endure the tests that come to us in little things, that the habits are molded, the character misshaped; and when the greater tests come, they find us unready. Only by acting upon principle in the tests of daily life can we acquire power to stand firm and faithful in the most dangerous and most difficult positions."
argumentum Posted April 7 Author Posted April 7 1 hour ago, donnyh13 said: Is a floating button possible? Staying at the bottom-right of the browser always? I find those annoying. Always in sight for something that I'll use once if ever. You can add a number (MsgBox2.htm) up to 5 so far and see the prior edits ( that by now will not be fully functional ) to see the ideas I tried out. Though the idea of a top right corner with a fixed top position ( that will not float always in view ) is enticing but me not having experience in html, I'd have to find it, copy the parts that make it work and make it an include ( like I did with SelectTheme css/js ). But again, is code that will have to "not look bad" throughout out the whole site and easily added. Another thing that am going to go back to is light mode as default. As for what I've seen is more common than OS selected. As always, ideas, code or references are welcomed. donnyh13 1 Follow the link to my code contribution ( and other things too ). FAQ - Please Read Before Posting.
argumentum Posted April 7 Author Posted April 7 (edited) Ok, found the code: Spoiler expandcollapse popup<!DOCTYPE html> <html> <head> <script type="text/javascript"> function setComboTheme(selectObject) { var themeName = selectObject.value; var select_box = document.getElementById("ComboTheme"); select_box.selectedIndex = 0; switch (themeName) { case "default": document.body.style.backgroundColor = "white"; document.body.style.color = "black"; document.getElementById("ComboTheme").style.border = "1px solid #FFFFFF"; break; case "buuf": document.body.style.backgroundColor = "#CCC4BD"; document.body.style.color = "black"; document.getElementById("ComboTheme").style.border = "1px solid #CCC4BD"; break; case "dark": document.body.style.backgroundColor = "#15202B"; document.body.style.color = "white"; document.getElementById("ComboTheme").style.border = "1px solid #15202B"; break; } } </script> <style> select.comboThemeRightTop { background-color: inherit; text-align: right; outline: none; scroll-behavior:smooth; border: 1px solid #FFFFFF; color: inherit; cursor: pointer; } div.comboThemeRightTop { border: 0px; position:absolute; top:5px; right: 5px; background-color: inherit; } </style> </head> <body> <div>Function Reference</div><hr> bla bla bla<br> bla bla bla<br> bla bla bla<br> bla bla bla<br> bla bla bla<br> ◐ <div class="comboThemeRightTop"> <select class="comboThemeRightTop" id="ComboTheme" onchange="setComboTheme(this)"> <option style="background-color:darkgray; color:white" disabled="disabled" selected="selected">Theme ◐ </option> <option style="background-color:darkgray; color:black" value="systemDefault" >Browser default ( not workingh in this test )</option> <option style="background-color:white; color:black" value="default" >Light (default)</option> <option style="background-color:#CCC4BD; color:black" value="buuf" >Buuf (incomplete)</option> <option style="background-color:#202020; color:white" value="dark" >Dark (tentative)</option> </select> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>" " </body> </html> go to https://www.w3schools.com/css/tryit.asp?filename=trycss_position_static and paste the above code. It does that I thought would be good. Edited April 8 by argumentum better code donnyh13 1 Follow the link to my code contribution ( and other things too ). FAQ - Please Read Before Posting.
donnyh13 Posted April 8 Posted April 8 54 minutes ago, argumentum said: I find those annoying. Good point, especially on a mobile. Yes, maybe not floating then. I like the sounds of static. 50 minutes ago, argumentum said: found the code: Looks good to me. LibreOffice UDF ; Scite4AutoIt Spell-Checker Using LibreOffice Spoiler "Life is chiefly made up, not of great sacrifices and wonderful achievements, but of little things. It is oftenest through the little things which seem so unworthy of notice that great good or evil is brought into our lives. It is through our failure to endure the tests that come to us in little things, that the habits are molded, the character misshaped; and when the greater tests come, they find us unready. Only by acting upon principle in the tests of daily life can we acquire power to stand firm and faithful in the most dangerous and most difficult positions."
argumentum Posted April 8 Author Posted April 8 (edited) 19 minutes ago, donnyh13 said: Looks good to me. I change it again Should I go with "◐" or "Theme ◐" or "Select theme ◐" or, ..what do you think ? In the example I left "◐" as in itself looks sufficient of an indicator for what it does. Edit: I do like the minimalistic view of just " ◐ ". People that care for color theme know that it symbols theme selection. Edited April 8 by argumentum donnyh13 1 Follow the link to my code contribution ( and other things too ). FAQ - Please Read Before Posting.
donnyh13 Posted April 8 Posted April 8 15 minutes ago, argumentum said: itself looks sufficient of an indicator for what it does I agree, but maybe a bit bigger font size if so? or would it have the selector box around it as in the example you posted, or without as your website? It may be hard for older eyes to spot it if it is only the dark/light symbol (might think it is a dead fly 🤣)? Otherwise I do also like, 21 minutes ago, argumentum said: "Theme ◐" as a second best. argumentum 1 LibreOffice UDF ; Scite4AutoIt Spell-Checker Using LibreOffice Spoiler "Life is chiefly made up, not of great sacrifices and wonderful achievements, but of little things. It is oftenest through the little things which seem so unworthy of notice that great good or evil is brought into our lives. It is through our failure to endure the tests that come to us in little things, that the habits are molded, the character misshaped; and when the greater tests come, they find us unready. Only by acting upon principle in the tests of daily life can we acquire power to stand firm and faithful in the most dangerous and most difficult positions."
argumentum Posted April 8 Author Posted April 8 22 minutes ago, donnyh13 said: might think it is a dead fly 🤣 lol, true. Ok then, there is the code ( from before ) updated ( and a bit more functional too ). donnyh13 1 Follow the link to my code contribution ( and other things too ). FAQ - Please Read Before Posting.
donnyh13 Posted April 8 Posted April 8 Very nice. LibreOffice UDF ; Scite4AutoIt Spell-Checker Using LibreOffice Spoiler "Life is chiefly made up, not of great sacrifices and wonderful achievements, but of little things. It is oftenest through the little things which seem so unworthy of notice that great good or evil is brought into our lives. It is through our failure to endure the tests that come to us in little things, that the habits are molded, the character misshaped; and when the greater tests come, they find us unready. Only by acting upon principle in the tests of daily life can we acquire power to stand firm and faithful in the most dangerous and most difficult positions."
donnyh13 Posted April 8 Posted April 8 (edited) One thought, does it need the word "Theme" after each theme name? Almost seems a little repetitive? Edited April 8 by donnyh13 argumentum 1 LibreOffice UDF ; Scite4AutoIt Spell-Checker Using LibreOffice Spoiler "Life is chiefly made up, not of great sacrifices and wonderful achievements, but of little things. It is oftenest through the little things which seem so unworthy of notice that great good or evil is brought into our lives. It is through our failure to endure the tests that come to us in little things, that the habits are molded, the character misshaped; and when the greater tests come, they find us unready. Only by acting upon principle in the tests of daily life can we acquire power to stand firm and faithful in the most dangerous and most difficult positions."
argumentum Posted April 8 Author Posted April 8 Nope, it'll be gone donnyh13 1 Follow the link to my code contribution ( and other things too ). FAQ - Please Read Before Posting.
donnyh13 Posted April 8 Posted April 8 (edited) Just wanted to mention there are two typos in your buuf CSS. Quote body { ... scrollbar-highlight-color: #0xCCC4BD; /* 0x here <---------------------*/ .... scrollbar-dark-shadow-color: #202020; /* typo -------------------scrollbar-dark-shadow-color --> scrollbar-darkshadow-color */ Theme select looks great by the way. Edited April 8 by donnyh13 argumentum 1 LibreOffice UDF ; Scite4AutoIt Spell-Checker Using LibreOffice Spoiler "Life is chiefly made up, not of great sacrifices and wonderful achievements, but of little things. It is oftenest through the little things which seem so unworthy of notice that great good or evil is brought into our lives. It is through our failure to endure the tests that come to us in little things, that the habits are molded, the character misshaped; and when the greater tests come, they find us unready. Only by acting upon principle in the tests of daily life can we acquire power to stand firm and faithful in the most dangerous and most difficult positions."
donnyh13 Posted April 8 Posted April 8 (edited) I transferred all the new size/measurement settings from Default/dark CSS to Buuf CSS. Not sure if that's what you wanted? buuf.css Edited April 8 by donnyh13 argumentum 1 LibreOffice UDF ; Scite4AutoIt Spell-Checker Using LibreOffice Spoiler "Life is chiefly made up, not of great sacrifices and wonderful achievements, but of little things. It is oftenest through the little things which seem so unworthy of notice that great good or evil is brought into our lives. It is through our failure to endure the tests that come to us in little things, that the habits are molded, the character misshaped; and when the greater tests come, they find us unready. Only by acting upon principle in the tests of daily life can we acquire power to stand firm and faithful in the most dangerous and most difficult positions."
argumentum Posted April 8 Author Posted April 8 I don't clearly remember but as soon as I get home I'll take a look at it 👍 donnyh13 1 Follow the link to my code contribution ( and other things too ). FAQ - Please Read Before Posting.
donnyh13 Posted April 8 Posted April 8 (edited) Okay, sounds good. The Dark CSS is the only one using ex units, and it has a bigger font in a couple places and few other changes, I switched that stuff to Buuf, leaving the colours all the same of course. Now just default is still using px units. Edit: I was looking at the wrong default CSS. Sorry. Edited April 8 by donnyh13 argumentum 1 LibreOffice UDF ; Scite4AutoIt Spell-Checker Using LibreOffice Spoiler "Life is chiefly made up, not of great sacrifices and wonderful achievements, but of little things. It is oftenest through the little things which seem so unworthy of notice that great good or evil is brought into our lives. It is through our failure to endure the tests that come to us in little things, that the habits are molded, the character misshaped; and when the greater tests come, they find us unready. Only by acting upon principle in the tests of daily life can we acquire power to stand firm and faithful in the most dangerous and most difficult positions."
argumentum Posted April 17 Author Posted April 17 @Jos, this is a test chm Testing123(2024.04.16).zip Place this test file in the AutoIt folder where the AutoIt.chm is at. Make a file called AutoIt.css with the CSS in it or with an import line, like: @import "file://C:/Users/<myUsername>/AppData/Local/AutoIt v3/<don't know yet>/Buuf.css"; The CSS loading order is: First try the SciTE's folder. If that fails try the AutoIt's folder. If that also fails then use the default.css from within the chm itself. On WinXP, no external CSS will be loaded. The Emulation has to be IE11 for this to work. Win7 onwards shows to work just fine. In case of questions go to https://www.autoitscript.com/forum/index.php?showtopic=211676 Tested on Win XP,7,10,11 The idea is that users of SciTE will have all the goodies we're putting together but standard release and other editors have to be able to use the help file too. ( obviously, I know ) In any case, my question is, where do you find fitting to stash the CSS file within the path(s) pattern for the full release of SciTE ? Also, the FAQ in the help file. Should it have an entry of how to use the external css optional feature ? No hurries. Just thinking ahead. Follow the link to my code contribution ( and other things too ). FAQ - Please Read Before Posting.
Developers Jos Posted April 17 Developers Posted April 17 2 hours ago, argumentum said: In any case, my question is, where do you find fitting to stash the CSS file within the path(s) pattern for the full release of SciTE ? Wouldn't it make more sense to put this into the AutoIt3 installer (when all agree this is the right thing for the helpfile)? In that case, I guess the best place for the different input css file schemas would be in the subdirectory of AutoIt3/Extras and the active css in the same directory as the Helpfile itself. So looking at the readme in the ZIP: Quote The CSS loading order is: First try the SciTE's folder. If that fails try the AutoIt's folder. If that also fails then use the default.css from within the chm itself. I am not sure why you would want to check the SciTE folder at all as you want to make this generically available and not SciTE specific? Will have a closer look later today/tomorrow when I have some time to test. argumentum 1 SciTE4AutoIt3 Full installer Download page - Beta files Read before posting How to post scriptsource Forum etiquette Forum Rules Live for the present, Dream of the future, Learn from the past.
argumentum Posted April 17 Author Posted April 17 11 minutes ago, Jos said: I am not sure why you would want to check the SciTE folder .... Will have a closer look later today/tomorrow when I have some time to test. I use c:\utilities as the install folder but the default folder is an almost read-only. Need admin rights to make changes. There are 2 product coming out of this site, AutoIt3 and SciTE4AutoIt3. They both install by default in a protected path. All the files that would be user level read/write goes to the users AppData folder. Therefore a css goes in the protected folder with an @import declaration pointing to the file in AppData, and in the AppData where all the common read/write is done, the 2nd css is the one that is modified. Basically conforming with everything else. Hence the inability of placing these css files at AutoIt3/Extras. Since I strongly oppose using ActiveX in any chm due to trust issues, the only technologies available would be JS and CSS, and those limitations force the lack of independence from standard distribution. So, the AutoIt3 installer uses the light version of SciTE. Need not change a thing in the installer as those users are either too clueless or using a different editor. Those with a different editor would welcome some information about all this css stuff, thus the reason why an entry in the help file describing it's workings would be welcomed. And for that I as thinking of the FAQ area. Also, since the installer that would add the AutoIt.css would be the one that installs SciTE4AutoIt3, it would be expected to have all it's files in that same folder and the reason to first look there. The second path to look at is the chm's folder for those with a different editor that would plan to customize the look and feel to match that of the editor. One that comes to mind right away is ISN but Notepad++ also comes with a plethora of color schemes. Then we have those with portable setups like myself, and those are fine too. Lest I forget anything, that's that. I hope I have saved you from guessing what I was thinking of. PS: I have not dedicated time to look at "Scite Config" yet. But as we discussed earlier, is not a big deal. ( shouldn't be, in my mind anyway ) Follow the link to my code contribution ( and other things too ). FAQ - Please Read Before Posting.
Developers Jos Posted April 17 Developers Posted April 17 1 hour ago, argumentum said: There are 2 product coming out of this site, AutoIt3 and SciTE4AutoIt3. They both install by default in a protected path. All the files that would be user level read/write goes to the users AppData folder. Agree, so that means that the default for the autoit.css should be the "%localappdata%\AutoIt v3" folder. But that is not what is used for a portable installation, so for portable, the directory for autoit.css should be the Autoit.chm directory itself. We shouldn't use the SciTE directory as there is no relation to SciTE for the AutoIt3 helpfile. So guess the appropriate search sequence for autoit.css should be: Quote The CSS loading order is: First try the "%localappdata%\AutoIt v3" folder. If that fails try the AutoIt's folder. If that also fails then use the default.css from within the chm itself. 1 hour ago, argumentum said: Therefore a css goes in the protected folder with an @import declaration pointing to the file in AppData, and in the AppData where all the common read/write is done, the 2nd css is the one that is modified. Basically conforming with everything else. Hence the inability of placing these css files at AutoIt3/Extras. I meant to say that the "model css files" in the extras directory and then one can point to them in the autoit.css with the line: @import "file://C:/Program Files (x86)/AutoIt3/Extras/helfile_css/default.css" This will also make it easy for us if we want to make this an option in SciTEConfig as we know the autoit.css location and we know the model css files location. Agree / Thoughts? SciTE4AutoIt3 Full installer Download page - Beta files Read before posting How to post scriptsource Forum etiquette Forum Rules Live for the present, Dream of the future, Learn from the past.
Developers Jos Posted April 17 Developers Posted April 17 (edited) Just had a look at the source of this example helpfile and see that all 3 css files are already included in the helpfile, and they are all 3 included in each of the example functions html files. Think only the default.css is required internally and the others could be removed as they are overridden by the JS logic....right? Edited April 17 by Jos SciTE4AutoIt3 Full installer Download page - Beta files Read before posting How to post scriptsource Forum etiquette Forum Rules Live for the present, Dream of the future, Learn from the past.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now