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

[Goldy007]

Hello,

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

[Made4uo-Ribe]

Hi @Goldy007 

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

[Goldy007]

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?

[AK_Design_Dev]

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

[Made4uo-Ribe · Accepted solution]

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

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. 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; 
}
}

• And Save. 
• Result:
• 

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

[Goldy007]

This worked! Thank you so much!!!

[AK_Design_Dev]

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;

}

[Goldy007]

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. 

[AK_Design_Dev]

Yes, but this css are anyway working 

[Goldy007]

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

[AK_Design_Dev]

can you share url