Adding a piece of text between two simple lines


(Ric) #1

I would be interested to know how fellow weavers might go about adding two lines to either side of a small piece of text. Responsively (though not necessarily responsibly :smile:).


(Lisa Sandler) #2

This is perfect for you…
https://stacks4stacks.com/rulestack/


(Doug Bennett) #3

Think that only works for Font Awesome Icons.


(Ric) #4

@LSPhoto
Thanks for the heads up Lisa.

I’ve had a play and unfortunately I think @teefers is correct in the Font Awesome limitations.

Doubtless there’s a way to substitute html text for the icon class but that’s above my pay grade.

Usefull nonetheless.


(r) #5

take a look at:
Header Pro stack from Big White Duck


(Ric) #6

@rolisize That’s got potential.

I’ve just had a play and it will take a little learning.
(About time I learnt to use BWD stacks having said that).
A project for when I have a spare hour.

Any alternatives meantime still appreciated.


(Stuart Marshall) #7

If you use Foundry then the divider stack offers this option.


(Doug Bennett) #8

This will work on about 90% of browsers. You can be the first on your block to use CSS Grid:

  • Get CSS-box (free from Joe Workman).
  • Place the CSS-box on the page, put the class name wrapit in as the class name.
  • Put a standard stacks header in the CSS-box( set to h3).

Add the following code to CSS for the page:

.wrapit h3 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-gap: 20px;
    align-items: center;
}

.wrapit h3::before {
    display: block;
    content: '';
    height: 5px;
    background: linear-gradient(to left, black, transparent);
}

.wrapit h3::after {
    display: block;
    content: '';
    height: 5px;
    background: linear-gradient(to right, black, transparent);
}

And you get this gradient line:


(Ric) #9

@teefers
That works well. Thanks Doug, I’m obliged.


(Doug Bennett) #10

Glad it works for you.
You can change the line color if you like, on this two statements:

background: linear-gradient(to right, black, transparent);
background: linear-gradient(to left, black, transparent);

Change the black To any CSS color.

To change the line width just change the two height Statements.


(Frederick Potter) #11

Another option would be to use a three column stack, put the text in the middle and ad two “rules” as a simple png image file. This would give you the flexibility to use graphic flourishes instead of rules if you so wished. But if the png file was a simple horizontal black line, it would responsively fill the space available.


(system) #12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.