Adding a piece of text between two simple lines

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

line%20with%20text
line%20with%20text1078×154 28.9 KB

2

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

3

Think that only works for Font Awesome Icons.

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.

5

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

47%20PM
47%20PM1049×644 51.5 KB

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

7

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

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:

2018-06-29_10-41-08
2018-06-29_10-41-081346×278 42.2 KB

6 Likes
9

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

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

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

12

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