AutoItHelp v3.3.16.1 with external CSS loading

donnyh13 · March 25

11 minutes ago, argumentum said:

Looks great !

par excellence ! (cool french word for "excellent" (in my mind))

14 minutes ago, argumentum said:

then emulation is not needed and it looks just great with the CSS tweaks.

That's great, much simpler fixes are always a better option!

In re: to your tests, I don't understand it all, but the newer CSS features didn't work until I used Emulation, so there still has to be a difference? Idk. Doesn't matter now, it works as is .

Thanks for testing it! Hope it ends up being a total fix now.

argumentum · March 25

The original is:

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">

and the one I tested is:

<!DOCTYPE html>
<HTML><HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text-html;charset=UTF-8">

if that made the difference, then I guess that is going to be the new <META ... >, as it uses the default IE for the CHM and shows to work well.

I'll take a look at it tomorrow. I'll be busy the rest of the day today.

Anything that can be done for the mouse-over color and underscore on the "Open this Script" link, to make it look like the "Copy to clipboard" one ?
Do change the html if it's needed.

donnyh13 · March 25

23 minutes ago, argumentum said:

I'll take a look at it tomorrow. I'll be busy the rest of the day today

Okay, sounds good. I look forward to your findings. The difference I noticed was between

Quote

<META HTTP-EQUIV="Content-Type" CONTENT="text-html;charset=UTF-8">

and replaced with:

Quote

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Which allowed me to use

@media (min-resolution: 72dpi) {
    body {
        text-decoration: underline;
    }
    }

23 minutes ago, argumentum said:

make it look like the "Copy to clipboard" one

Ya, I forgot that too. Yes, should be easy. I may not get a chance today, but will try soon to add it.

Edited March 25 by donnyh13

argumentum · March 25

29 minutes ago, argumentum said:

Do change the html if it's needed.

if the "Copy to clipboard" is:
<a href="#" id="copy" onclick="copyToClipboard(

we can make
<a href="#" id="anything" onclick="openTheExampleA(

That way emulation (edge) is not needed.

donnyh13 · March 25

Here is the CSS, I'd like your opinion on whether I matched font sizing and link positioning.

2024-03-2514_26_28-Testing123HelpFile.png.817e20e99310ff5a3ed089c471f9928e.png

Some things to note:

This will break the original chm display using the Object, i.e:

2024-03-2514_26_08-AutoItHelp(v3.3_16.1).png.93469a12cca3a351efb4fe2bc0b47ad9.png

I left all the px values in the CSS and just commented them out, and added "/*@*/" after all my ex values, it will need to be cleaned up when we're done debugging. I can do that if you like/when you want.
I didn't remove the empty spaces I mentioned in my earlier post on page (2?), but that would be a simple change in the CSS later if you want.

I am attaching the Msgbox htm I modified, I left in "<META HTTP-EQUIV="Content-Type" CONTENT="text-html;charset=UTF-8">" till you get done your testing.

3 hours ago, argumentum said:

we can make

I created the open link as follows, as I don't know how to make it the same as the current copy to clipboard link:

Quote

document.write('<a id="open" href="javascript:hhctrlB.Click();"> Open this Script </a>');

I only changed between "hhctrlA.Click()" and "hhctrlB.Click()" for Example 1 & 2.

I left all old lines in the htm file, but commented them out:

Quote




document.write('<a id="open" href="javascript:hhctrlB.Click();"> Open this Script </a>');

And for the class, as mentioned, I added above the open script link:

Quote

<div class="codeSnippetContainerTabSingle">

I didn't modify the other htm file in your test chm, but I am including the chm for easy viewing.

Probably forgetting something.

Edit: The only reason now to add/ change to using emulation like we tried, "<meta http-equiv="X-UA-Compatible" content="IE=edge" /> " or "<meta http-equiv="X-UA-Compatible" content="IE=IE11" /> " etc would be to allow users to use more/ newer CSS features, which, at least from my testing, won't generally work (for example, the @media example I posted above). But from the looks of it, using the emulation is seeming to cause oddities, such as the one you noticed with the missing border.

On 3/24/2024 at 2:00 PM, argumentum said:

Another thing that I noticed is that with IE7, in the browser area there is a border, and with emulations it ain't there.

So probably not worth it.

Edit2: I had a couple wrong values:

Quote

div.indent {
margin-left:5ex /*new@*/

margin-left:1.8ex
/* margin-left:32px */
}

Quote

body {
margin: 1.5ex;
/* margin: 10px; */
}

Open Link AutoIt.zip

Edited March 25 by donnyh13

donnyh13 · April 3

Hi @argumentum,
I had an idea I’ve been working on for a while for the CHM. I almost gave it up because I kept coming across problems, but I finally got a working example to share, thanks to many web searches . This is probably more than the Devs would ever want to add, plus it would be probably for the CHM only? Not sure. But thought it would be worth passing on to you, maybe spark some ideas.
   One of the main problems I ran into is that the CHM doesn’t accept local storage, session storage, or cookies, so I had no way of storing any settings between pages. But in looking at another program’s help file I had seen, that offered a light/dark them switcher, I found that to save settings between pages, they were using the window.name property, which solved my problem.
   For this example I converted your three CSS’s (light, dark and buuf (which I called custom)). My modifications add a selector in the top right corner of every page, allowing you to change CSS styles actively. I currently have it set to refresh the page, but without a refresh works too, except some edging wasn’t being updated correctly until scrolling the page.
   With that said, there are some hang ups, namely:

As I mentioned, this would probably be CHM only mod.
The selector isn’t completely stylable. To style it more, it sounds like you would need to make a custom one using JS and CSS, using some coding/ settings which isn’t (I think) compatible with the CHM.
More coding, and adds a new class.
Loses CSS theme setting upon closing the CHM file, could get annoying.

One other possibility, I think, would be the ability for the selector to be dynamically filled with CSS options found in the folder. But perhaps that would cause lag, and, of course much more code.

Anyway, here it is. Thought you might be interested in it. Just open the chm file by double clicking, (at least that works for me?). I’m also including the htm files so you can see what I did.

2024-04-0312_33_37-Testing123HelpFile.png.78dcc4b21467893e429e4b059673c5d0.png 2024-04-0312_33_44-Testing123HelpFile.png.bdb3f6016733c8fb4238264c13b1534f.png 2024-04-0312_33_51-Testing123HelpFile.png.36eaf9429a8c939351fae2173fe58d4d.png

AutoIt CHM W Selector.zip

Edited April 3 by donnyh13

argumentum · April 3

1 hour ago, donnyh13 said:

This is probably more than the Devs would ever want to add, plus it would be probably for the CHM only? Not sure. But thought it would be worth passing on to you, maybe spark some ideas.

Well, this is what I did** and preparing for final product.
~~I'm in a hurry right now, but I'll look at it tonight~~

Edit: ** ~~what I thought I did. Just broke it.~~ Fixed it.

Edited April 3 by argumentum

argumentum · April 3

47 minutes ago, donnyh13 said:

Loses CSS theme setting upon closing the CHM file, could get annoying.

Yeap. And, since most installs are in and "Admin folder", writing down to a file the last selection is impossible (unless you find a way to write to %LOCALAPPDATA%)

Hmmm, is going to be a hard no. The idea is enticing but it is not gonna fly. But hey, just having a chance to code ... is there a way to tell CSS to load another CSS from elsewhere ?, if so, we can make a script to change the CSS within ... somewhere .. thinking, ..anyway, if you can find that out

donnyh13 · April 3

59 minutes ago, argumentum said:

preparing for final product

Looks great!

41 minutes ago, argumentum said:

if you can find that out

There is a "@Import" setting, but not sure on the details. Will think on it. Maybe some form of possibilities.

Don't have time to look right now. Maybe later/ another day.

Edited April 3 by donnyh13

argumentum · April 3

2 hours ago, donnyh13 said:

There is a "@Import" setting, but not sure on the details. Will think on it. Maybe some form of possibilities.

Yes, it works !.
Make the AutoIt.css in the help file folder, with just this one line:
@import "file://C:/Users/<YourUsername>/AppData/Local/AutoIt v3/Au3HelpFile/MyColorful.css";
and place the real CSS you'd like to use where you just declared it in that one line.

Now is a matter of modifying "SciTE Config for AutoIt3" in such compelling way that @Jos would say "yes, you are ~~the man~~ the coder, ma' main ~~man~~ coder !".

Or a separate script. We'll have to brainstorm it.
One baby step at the time.

argumentum · April 4

...and, I'm gonna try to push the idea of having the web site help also light (default) and dark themed ( by way of this video or similar). ( link to my test )
Given my coloring inability, any web site dark coloring ideas are welcome. Just change the default.css and post it here.

To do so, I guess you can use "Inspect element"

Spoiler

and give it a try. But am sure there is better tooling than this but I don't know them.
Am not a web developer at heart :baby:

Edit: Well, is simpler than I thought. Just Ctrl + A ( to select all ) and Ctrl + C ( to copy to clipboard ), and there you have your edit, ready to paste

Edited April 5 by argumentum

Jos · April 4

7 hours ago, argumentum said:

Now is a matter of modifying "SciTE Config for AutoIt3" in such compelling way that @Jos would say "yes, you are ~~the man~~ the coder, ma' main ~~man~~ coder !".

Should be easy when all that needed to be done is copy a "THEME" template file into the file pointed to. Could even consider letting it run parallel with the current available themes and connect them by naming them the same.

donnyh13 · April 4

22 hours ago, argumentum said:

web site dark coloring ideas are welcome.

Sounds good, I'll try my hand at it as time permits, see if I can come up with anything. Did you look at the one by Taurus that was posted a while ago?

A few notes on your current CSS:

th {
....
    border-width:.1ex /* 1px; */ /* Forgot semicolon here ====================================================== */

....

h1 {
    .....
    padding-bottom:.84ex /* 15px; */ /* Forgot semicolon ======================================================= */

......

div.codeSnippetToolBarText {
   ......
    /* text-decoration:underline; /* Ly */ */ /* DOUBLE end of comment here =======================================================*/

......

.codeSnippetContainerCode pre {
    padding-left:.7ex /* Ly 5px; */ /* Missing semicolon here ============================================================= */

23 hours ago, argumentum said:

Yes, it works !.

That's a great idea! Sounds like an interesting project. Will try to help as possible. If Jos doesn't take pity on us first.

23 hours ago, argumentum said:

would say "yes, you are ~~the man~~ the coder

🤣

Edited April 4 by donnyh13

argumentum · April 5

48 minutes ago, donnyh13 said:

A few notes on your current CSS:

Done. Thanks

argumentum · April 5

1 hour ago, donnyh13 said:

Will try to help as possible. If Jos doesn't take pity on us first.

What he agreed as far as I understood is that if there is a matching theme:
image.png.0bc1e14bba07242877b589f5c456a221.png

then is not a big deal.

If someone takes on replicating colors individually to also apply to a custom.css, then that would be awesome.
But there are more colors in the css than there are in SciTE, so it would be tricky.
That's why I said "Or a separate script. We'll have to brainstorm it.".

If we are to edit the css with custom colors, we should start by creating a separate script just for that, with the form looking like the one we intend to merge with and similar coding style, for the same reason. Also, a user would find it familiar with what he/she knows how to work with.

Then we can open an "after market" forum post for the themes that don't come with the standard distribution. Then maybe a WiKi entry with a sample pic. and an accompanying zip with 4 files ( the pic., css, SciTE and a readme.txt ).
The wiki is because it'd be a showroom, ..because I know that the forum post is going to be full of chatter.

Again. Baby steps. I don't want to scare anyone with a bunch of talk until we have something to show.

Trivia time: did you know that many of the goodies that come standard with SciTE started as scripts in the Example forum ?

Jos · April 5

I haven't looked at the details yet but when all it takes to change the colorscheme of the helpfile is to copy a file to the used ccs file, then my suggestion would be to create a matching filename to the current scite schemes which gets copied over when another scheme is chosen in sciteconfig. When there is no mathing helpfile scheme we just revert back to the default helpfile scheme. So what exactly is required for me to have a look at this and have a play?

Edited April 5 by Jos

argumentum · April 5

8 hours ago, Jos said:

... create a matching filename to the current scite schemes which gets copied over when another scheme is chosen in sciteconfig.

Yes, that is understood.

But if we take color editor
image.png.7b16d1eff612a0606bcd8bf6565f5b60.png

and also apply that to the a css to have matching edits, then that's another story. ( that to be fair, I haven't look at anything yet. Just dreaming and guessing. )

donnyh13 · April 5

15 hours ago, argumentum said:

What he agreed

Ah, I see, I hadn't even seen that option before Thanks for pointing that out. Everything makes much better sense now.

15 hours ago, argumentum said:

Then we can open an "after market" forum

Sounds like a pretty good plan, that could end up pretty cool for sure. I suppose one thing Scite Config would need to add would be an "Import/ file chooser for the custom themes? Unless I'm missing it.

15 hours ago, argumentum said:

Trivia time:

I've found that out somewhat over time, but I keep finding it's more extensive than I thought. Thanks.

I may not be done, but here is what I have so far for a dark theme for the site, maybe help with some inspiration? One is my own attempt, the other is attempting to copy Scite's dark theme as much as possible. (Once I found out about it 🙄) I may try to re-use more Scite colors in it, now that I understand better the main plan. (Sorry for the denseness. Thanks for your patience.)

My Theme

Spoiler

Scite based Theme

Spoiler

Not sure if it will help any...

Scite Dark default.css My dark default.css

Edited April 5 by donnyh13

argumentum · April 5

..that #121212 was way too dark for my taste but the #202020 I like and is closer to Explorer_DarkMode background's color.

Spoiler

( an image from https://www.reddit.com/r/Windows11/comments/160lcmt/is_it_possible_to_set_file_explorers_dark_mode_to/ )

and the S1 to S15 correlates to the SciTE colors so making something that edits the CSS would be simple from that.... or,
Just use whatever is used as a base CSS ( by selecting a SciTE config ) and just add the Sxx to the CSS.

Back to the web-darkMode-css. I'll use the 2nd one ( #202020 ) for the mockup page once I settle on how to implement it
I'll hopefully get it done before Monday.

donnyh13 · April 6

7 hours ago, argumentum said:

121212 was way too dark

Ya, i thought it was a bit dark too, found a how to/tips page online that said it was the most commonly used for a dark theme :rolleyes: , so thought i'd go with it. But i liked the Scite colors better. Only thing (personally) I like better about mine is you don't have to get used to different colors for the S0-S15, vs just different hues of the same colors. But that's just me, and no need to reinvent the wheel or change whats worked for 30 years.

Look forward to seeing what you come up with for the website. Pretty cool upgrade once you can get the css project for the chm to an active stage.

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