Adding Lines to a Title

I would like to format a title in the middle of a page to reflect the Sydney theme formatting (i.e. centered, with a small red line under it). How can i easily due this from the visual editor? I figured out how to do it with a widget title, but unfortunately the widget is causing a conflict on other pages. It would be great if i could just change one of the header formats to allow this formatting. Below is what I am looking to create, but make that format available whenever i need it.

image

Hello there,

Were you referring to a page’s title? Do you have a link to the related page to share to help us better understand it?

Regards,
Kharis

Hi,

My site isn’t live yet so I can’t refer you to a link, but I can screen capture below. I’m looking to change the word Flights in the screenshot below (circled in red). As you can see it is not the title of the post, but appears mid-post. I would like the format to match the Sydney style with the underline reddish line as I sighted in my original message. I can obviously center and capitalize myself but the red line I can’t figure out and I am unsure of the font style.

Hello there,

Firstly, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .section-heading {
      position: relative;
      margin-bottom: 40px;
      display: table;
    }

    .section-heading:after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -10px;
      width: 70px;
      height: 1px;
      background-color: #d65050; 
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);  
    }

Update.

Then use this HTML code and place it within your content. Ensure the editor accepts HTML code.

    <h3 class="section-heading">This is the section heading</h3>

Regards,
Kharis

Thanks so much! This worked for the effect i was going for, but now that heading will not center when I use the center button on the post page. Any idea how to get it to still center? I tried adding “text-align: center;” to the css and that did not work. Thanks for any further help you can provide.

Hello there,

Try replacing this code:

    .section-heading {
      position: relative;
      margin-bottom: 40px;
      display: table;
    }

with:

    .section-heading {
      position: relative;
      margin-bottom: 40px;
      display: block;
      text-align: center;
    }

Regards,
Kharis

Worked perfectly. Thanks!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis