AutoItHelp v3.3.16.1 with external CSS loading

argumentum · April 6

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 :think:

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 · 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.

argumentum · 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.

argumentum · April 7

Ok, found the code:

Spoiler

<!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>

&#9680;

<div class="comboThemeRightTop">
  <select class="comboThemeRightTop" id="ComboTheme" onchange="setComboTheme(this)">
    <option style="background-color:darkgray; color:white" disabled="disabled" selected="selected">Theme &#9680; </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 · 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.

argumentum · April 8

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 · 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 · 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 · April 8

Very nice.

donnyh13 · April 8

One thought, does it need the word "Theme" after each theme name? Almost seems a little repetitive?

Edited April 8 by donnyh13

argumentum · April 8

Nope, it'll be gone

donnyh13 · April 8

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

donnyh13 · April 8

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 · April 8

I don't clearly remember but as soon as I get home I'll take a look at it 👍

donnyh13 · April 8

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 · 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.

Jos · 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 · 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 )

Jos · 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?

Jos · April 17

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

AutoItHelp v3.3.16.1 with external CSS loading

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

argumentum

taurus905

donnyh13

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members