Problem with hr

#1

Hello everyone.

I have gotten the code for several types of horizontal lines to improve the appearance of the original, but for some reason I can’t get it to work well.
This is the code I use put in a tiddler with the tag $:/tags/Stylesheet

/* Gradient transparent - color - transparent */

.hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

Then I invoke it with the following command:

@@.hr.style-one
@@

but nothing happens unless a line below says ---

What am I doing wrong?

Thank you so much

#2

You define the style style-two, and then you try to use style-one. That’s not going to work. Change one of them so they match.

That’s the markup for the actually horizontal rule (HR) that you are looking to style. The @@.hr.style-one ... @@ is a wrapper holding the CSS that you will apply to it.

I’d suggest two changes. First, the leading . on the CSS rule doesn’t belong. hr.style-one makes much more sense:

  • .hr.style-one means "any element that has the two classes “hr” and “style-one”
  • hr.style-one means "any HR element that has the class “style-one”

So remove that. Second, remember that wikitext is meant to be an easy-to-read, easy-to-write alternative for plain HTML. When it gets in the way, revert to HTML. So you can style the HR’s you want like this:

<hr class="style-one" />

I find that much more obvious than

@@.style-one
---
@@

You can download this and drag it atop a wiki to see it in practice:

HR_Demo.json (592 Bytes)

A further consideration is whether you would prefer to style all HR’s in your wiki the same way. If so, it’s much simpler

.hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

And then you can separate rows with

<hr />

or, even simpler, with

---

(although I personally prefer to use ten hyphens rather than just three.)

There are intermediate methods too, targeting this css rule at other subsets of tiddlers, but that’s for another day.

1 Like
#3

Hi @Scott_Sauyet

:sweat_smile: :sweat_smile: :sweat_smile: Yeah, that way I’m sure it wouldn’t work out. It was a mistake when writing…

Ah okay. I thought I had to invoke that order the way I put it.

A question. Is the style-one class accessible only for hr or for any other element? I say this to give a name that is not repeated with classes of other elements.

Thank you

#4

In CSS, a simple selector starting with a period (.) represents elements that have a certain class. For instance the rule.highlighted {background-color: yellow;} will apply to all elements that have the class “highlighted”, such as

  • <p class="highlighted"> ... </p>
  • <hr class="highlighted"> ... </p>
  • <aside class="highlighted"> ... </p>

or in wikitext to such things as

  • @@.highlighted[[Some Tiddler]]@@
  • @@.highlighted
My block-level content
@@

All of these elements will get the background color yellow. (Assuming no other rules override it; look up “specificity” and “the cascade” in a CSS reference for details.)

You can alternatively apply selectors to specific elements types, with rules like this:

p {background-color: pink;}
hr {background-color: green;}

This says that all paragraph (P elements should get a pink background, and all horizontal rule (HR) elements should be green.

You can combine these by putting the period for the class right after the element name. This:

table.highlighted {background: blue}

says that all table elements that have the class “highlighted” must get our blue background.

There’s lots more to CSS. The MDN page is a good reference, and tutorials are everywhere.

For your case, it’s not clear to me what you do and don’t want.

If you want this fade in and out gradient to apply to multiple elements, then use a selector like

.style-one { ... }

and add the class to the HTML tag.

If you want it to apply to all <hr/> elements everywhere, then use

hr { ... }

And if you want it to apply to only some of the HRs, then combine the two:

hr.style-one { ... }

and again add the class to the HTML tag where you want it (or handle it in wikitext with the @@ notation.)

By the way, “style-one” is a terrible name. Try to choose a name that’s a succinct description of why you want the style, of what you want to convey with it, perhaps <hr class="subchapter-divider"> or <hr class="fancy">

2 Likes
#5

Thank you very much for the explication. I am very grateful to you.