Jump to content

AutoItHelp v3.3.16.1 with external CSS loading


Go to solution Solved by argumentum,

Recommended Posts

11 minutes ago, argumentum said:

Looks great !

par excellence ! :D (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 :D.

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

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

 

Link to comment
Share on other sites

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.

Follow the link to my code contribution ( and other things too ).
FAQ - Please Read Before Posting.
autoit_scripter_blue_userbar.png

Link to comment
Share on other sites

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 by donnyh13

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

 

Link to comment
Share on other sites

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.

Follow the link to my code contribution ( and other things too ).
FAQ - Please Read Before Posting.
autoit_scripter_blue_userbar.png

Link to comment
Share on other sites

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();">&nbsp;Open this Script&nbsp;</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

<!-- if (document.URL.match(/^mk:@MSITStore:/i)) { -->
<!-- document.write('<div class="codeSnippetContainerTabSingle codeSnippetContainerTab codeSnippetContainerTabSingle" dir="ltr">'); -->
<!--document.write('<a class="open" href="javascript:hhctrlA.Click();">&nbsp;Open this Script&nbsp;</a>');-->
document.write('<a id="open" href="javascript:hhctrlB.Click();">&nbsp;Open this Script&nbsp;</a>');
<!--document.write('<\/div>'); -->
<!-- } -->

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.

image.png.4f0556d0b378aef079087e74b9d9722a.png   image.png.3301bbde43618a3914a11e2444fa2ddf.png

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 by donnyh13

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

 

Link to comment
Share on other sites

  • 2 weeks later...

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.png2024-04-0312_33_44-Testing123HelpFile.png.bdb3f6016733c8fb4238264c13b1534f.png2024-04-0312_33_51-Testing123HelpFile.png.36eaf9429a8c939351fae2173fe58d4d.png

AutoIt CHM W Selector.zip

Edited by donnyh13

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

 

Link to comment
Share on other sites

Posted (edited)
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 by argumentum

Follow the link to my code contribution ( and other things too ).
FAQ - Please Read Before Posting.
autoit_scripter_blue_userbar.png

Link to comment
Share on other sites

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

Follow the link to my code contribution ( and other things too ).
FAQ - Please Read Before Posting.
autoit_scripter_blue_userbar.png

Link to comment
Share on other sites

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 by donnyh13

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

 

Link to comment
Share on other sites

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.

Follow the link to my code contribution ( and other things too ).
FAQ - Please Read Before Posting.
autoit_scripter_blue_userbar.png

Link to comment
Share on other sites

Posted (edited)

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

image.thumb.png.22e4d0ee3c348643c09b96e483553b2f.png

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 by argumentum

Follow the link to my code contribution ( and other things too ).
FAQ - Please Read Before Posting.
autoit_scripter_blue_userbar.png

Link to comment
Share on other sites

  • Developers
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.

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.
  :)

Link to comment
Share on other sites

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 by donnyh13

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

 

Link to comment
Share on other sites

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 ? ;) 

Follow the link to my code contribution ( and other things too ).
FAQ - Please Read Before Posting.
autoit_scripter_blue_userbar.png

Link to comment
Share on other sites

  • Developers
Posted (edited)

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 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.
  :)

Link to comment
Share on other sites

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

Follow the link to my code contribution ( and other things too ).
FAQ - Please Read Before Posting.
autoit_scripter_blue_userbar.png

Link to comment
Share on other sites

  

15 hours ago, argumentum said:

What he agreed

Ah, I see, I hadn't even seen that option before :o 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

2024-04-0508_24_01-FunctionMsgBoxMozillaFirefox.thumb.png.c760d1cbd527f491386e16f84068f103.png

Scite based Theme

Spoiler

2024-04-0508_58_00-FunctionMsgBoxMozillaFirefox.thumb.png.cc1f34bf2a3d575ca96468dcc8916b1f.png

Not sure if it will help any...

Scite Dark default.css My dark default.css

Edited by donnyh13

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

 

Link to comment
Share on other sites

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

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.

Follow the link to my code contribution ( and other things too ).
FAQ - Please Read Before Posting.
autoit_scripter_blue_userbar.png

Link to comment
Share on other sites

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. :D

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. 

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

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...