Dawn theme- Place horizontal lines on either side of rich text title

Store Design
,
1

Hello,

Can someone please help me with a code to Place horizontal lines on either side of rich text title? Like in this pic:

Screen Shot 2024-07-18 at 5.23.03 PM.png
Screen Shot 2024-07-18 at 5.23.03 PM.png1830×202 15.3 KB

1 Like
2

Hi @Goldy007

Can i try, would you mind to share your store URL? Thanks!

3

Hello @Goldy007

Add this css on your base.css or global.css file

.title-wrapper {

position: relative;

text-align: center;

}

.title-wrapper:before {

content: ‘’;

background: red;

left: 220px;

width: 20%;

height: 2px;

position: absolute;

top: 0;

bottom: 0;

margin: auto;

}

.title-wrapper:after {

content: ‘’;

background: red;

right: 220px;

width: 20%;

height: 2px;

position: absolute;

top: 0;

bottom: 0;

margin: auto;

}

4

Thank you for trying- this code didn’t work. I tried adding to the base.css, and also tried to insert it directly in the section in the custom CSS. In the custom css section this part >>>>> .title-wrapper , and .title-wrapper:before wasn’t recognized. This is the section I’m trying to add it to. I’m using the latest Dawn theme.

Screen Shot 2024-07-19 at 2.03.52 PM.png
Screen Shot 2024-07-19 at 2.03.52 PM.png712×456 16.5 KB

5

I was hoping for a code so I can change colors, thickenss etc.., and add to other sections where I want it. Would that be possible?

6

Yes, but this css are anyway working

7

Yes, u can if you have theme knowledge or little bit code knowledge

8

It is not working on .base or the custom css section. Any other ideas or codes I can try? Thx for helping!

9

can you share url

10

You mention richtext.

Check this one. If it not working you can pm me. For the URL.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media only screen and (min-width: 749px){
h2.rich-text__heading.rte.inline-richtext {
    position: relative;
}
h2.rich-text__heading.rte.inline-richtext:before,
h2.rich-text__heading.rte.inline-richtext:after {
    content: '';
    border-top: 3px solid red;
    position: absolute;
    top: 50%; 
    width: 25%;
    transform: translateY(-50%);
    opacity: 0.5;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); 
}
h2.rich-text__heading.rte.inline-richtext:before {
    left: 0;
}
h2.rich-text__heading.rte.inline-richtext:after {
    right: 0; 
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
11

This worked! Thank you so much!!!