Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

What is the best way to change CSS from within a passage?

I want to be able to click a link in a passage, and change the CSS for the rest of my game/story.

Is this possible? Specifically, I want to change html background colour, h1, h2, etc. colour, and .enchantment-link/link-hover colours.

I'm guessing some javascript might do it?

Comments

  • You could use the same technique given as an answer in the Sidebar Harlowe Twne 2 Images thread. The only difference would be the set of CSS selectors you would need to use for each set of styles.

    eg. If your new set of styles had a CSS class name of forest then the related CSS selectors would look something like:
    html.forest {
    	background-color: transparent;
    	color: #000;
    }
    
    html.forest tw-link, html.forest .enchantment-link {
        color: #4169E1;
    }
    
    html.forest tw-link:hover, html.forest .enchantment-link:hover {
        color: DeepSkyBlue;
    }
    
    html.forest h1, html.forest h2 {
    	color: #000;
    }
    
    ... basically you add html.classname followed by a space character to the start of each normal CSS selector you want to include in the set, where classname is replaced with the actual CSS class name you are using like forest has been used in the above example.
  • That works great, thanks!

    Only issue is any headings I have at the start of the passages (e.g. ##Heading) now don't show as headings - they literally show "##Heading".
  • deKay wrote: »
    Only issue is any headings I have at the start of the passages
    I tested the CSS I supplied with three consecutive linked passages, each with a heading on the first line and with the second passage in the sequence tagged as forest. The header in each passage appeared correctly.

    You will need to supply more information like examples of the actual effected passages and CSS you are using if you want help with this issue.
  • I've attached a test one using your code and CSS. Note how it shows "##header" rather than a H2 styled "header".

    Not a big issue as I can work round it, but seems like a bug.
  • deKay wrote: »
    but seems like a bug.
    It is a bug but it is not (directly) caused by my examples, it happens in any story that includes a header tagged passage. You can reproduce the parsing error with the following simple two passage story:

    1. First (main) passage contains the following header markup:
    ## A header
    
    some normal text
    
    2. A header tagged passage, either with or without content.

    The header markup does not get converted into a HTML header element (H1 -> Hx) if it is on the first line of a passage, and this parsing error occurs in both Harlowe 1.2.2 and the new Harlowe 2.0.0. I suggest you create a new issue on the Harlowe project website.

    I also noticed in your example that you switched from using a link to change which CSS class was in effect to using passage tags, one thing to note with the passage tag method is that the styling changes only effect passage that have passage tags assigned to them.
  • Thanks for the help. If you're interested, and it isn't perfect, but my game is finished (for varying values of "finished").

    https://dekay01.itch.io/sandman

  • edited December 2016
    deKay wrote: »
    Thanks for the help
    no problems. did you create an issue on the Harlowe project website about the bug you found?
    If you don't then the developer may not know the bug exists which could mean that it won't get fixed.
  • Not yet but I will.
Sign In or Register to comment.