You are viewing a single comment's thread.

view the rest of the comments →

Vindicator ago

@Argosciv @srayzie, do you know if there is a way to highlight text in a different color to make it stand out from the rest of the text? In CSS? That would sure be handy!

argosciv ago

Example of text you might like highlighted?

Vindicator ago

Key pizzagate related elements in the Laybourne stuff you've added -- like Kindercare. So it jumps right out at folks.

argosciv ago

Sorry, correction, it appears that you cannot target an element by searching the text itself for a phrase.

@srayzie

Vindicator ago

It seems like it would be possible, since the text changes color when it's made into an embedded hyperlink.

argosciv ago

Nah I tried some css options myself and then had a dig around. I'll explain with the following example:

Keeping in mind that basic text in a post/comment, when parsed, is encapsulated by <p></p> element tags & that there is currently no way for us(users) to assign attributes to these tags.

html:

<p id="this_can_be_targeted_by_css">This cannot be targeted by css.</p>

css for above:

#[id*='can_be_']{color: red;}

Result: (text would be colored red, because we targeted elements with an id attribute that contains 'can_be_')

This cannot be targeted by css.


In short, you can target an element based on the value(s) of its attribute(s), but not by any text within the element itself. Make sense?

@srayzie

Vindicator ago

I think so? O_o

srayzie ago

Thank you!

argosciv ago

In that case, highlighting headers can be useful, but at this time it's difficult to highlight phrases in 'normal' text blocks because there's nothing specific to target.

You could add css to look for phrases in a block of text but at best the css would apply to the entire block, not the target phrase(s).

css for highlighting all headers is easy now that every header gains a css id for use with making a TOC.

css in use here:

.dark [id^='md-']:not(#md-section){
background-color: #006600;
border-style: solid;
border-width: 1px;
border-color: #000000;
padding-left: 4px;
}

[id^='md-']:not(#md-section){
background-color: #00CC66;
border-style: solid;
border-width: 1px;
border-color: #000000;
padding-left: 4px;
}

Basically what this is doing, is targeting any element with an id that starts with 'md-', but not the exact id md-section(because this is the id associated with blank h1 headers - which is how you make a light dotted line separator). This css adds a background and border, the background color is different for normal vs dark view.

As previously mentioned, you can apply some css to empty urls and then use that to 'highlight' select text within a block, however, this would be limited in that you cannot then highlight a working url; you would at best be able to highlight text on either side of a working url.

You'll be able to see that I've added css to the TOC links here, the css for which is as follows:

[href*='#md-']{
background-color: #222222;
padding: 2px;
}

What this is doing, is targeting elements with an href containing '#md'-. I opted with contains rather than starts with so that TOC links that contain the full url of the submission(eg when posted in a comment) also receive the css.

@srayzie

srayzie ago

Thank you for letting me know