Page Title / SiteOrigin Widget Title (CSS)

Thanks for an awesome WordPress theme.
I’ve tried searching the forum for an answer and wasn’t able to find it.
I’m also unsure whether this is a Sydney theme question or a SiteOrigin question!

I have used the following CSS to hide my page titles so that the SiteOrigin Widget title displays first.

.page header.entry-header {
display: none;
}

As I would like to add a link to display the full content of an employee, for CSS for the employee’s name (Employee Title) needs to “match” the SiteOrigin Widget Title’s CSS. The widget CSS is all in capital letters and has the small red line beneath the title.

As it is easier to leave the SiteOrigin Widget Title vacant, could you provide the CSS that I would need to add so that I can remove th above CSS and add the CSS that will replicate the SiteOrigin Widget Title CSS.

Could you also advise whether I should move the snippets of modified CSS from the Additional CSS section in th Customizer and add them to the stylesheet. I am also using a Child theme.

Thank you in anticipation.

Hello there,

To eliminate the page title you can enable either Front Page or Full width template in the Page Attributes options. Please note that, enabling one of which will also hide the sidebar and forces the content area fill the entire container width.

For employee’s name, if I could get it correctly, you’d add this extra custom CSS code:

    .roll-team .team-content .name {
      text-transform: uppercase;
    }

You can use child theme’s stylesheet instead, as it loads a bit faster. And also benefits you to store and manage large amount of code.

Regards,
Kharis

Hi Kharis,

That snippet of code didn’t do what I wanted to do.

This is how the Widget Title appears on my site (having hidden the Page Title)

This is the page title for my “Benefits” page from my dashboard.

This is the Text Widget within the SiteOrigin pagebuilder, where I’ve entered “Benefits” which then displays on my Benefits pas as above.

When I view my employee the employee title looks like this (even after adding the CSS snippet provided):

What I would like to do is display the Page Title so that it appears the same as the title from the Text Widget. Hopefully the images demonstrate what I was hoping to achieve.

Regards

If I got it correctly, you’d use this code:

    .entry-header .entry-title {
      position: relative;
      text-transform: uppercase;
    }

    .entry-header .entry-title:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 50px;
      height: 1px;
      background-color: #d65050;
    } 

If possible, please share some related links here, so I can assost you in better way.

Regards,
Kharis

Hi Kharis,

That almost works!!

I now need to remove the red line which is created by the SiteOrigin widget.

It displays on this page, but not on this page.

The first page link uses the Tab widget whilst the second page link uses the Text widget.
I don;t know why its displayed in one and not displayed in the other.

I also checked the employee post and that isn’t showing the title correctly.

Thanks for your assistance, its very much appreciated.

Hello there,

As the tab widget has an empty title, you should add this CSS code to remove the single red line.

    .so-widget-sow-tabs .widget-title {
      display: none;
    }

In your employee content, use page builder and insert a text widget. To enable page builder for empoyee post type, go to Settings > Page Builder; under the General tab, at “Post Types” section, check Employees box.

Regards,
Kharis

Hi Kharis,

Widget display all fixed - thank you.

However, I can’t get the employee post heading to display.

As you can see I’ve added the text widget.

I’ve checked my custom added CSS and there is no reference to “employee”, so I’m not sure why the employee name isn’t displayed.

REgards

Did you write a title to your Text widget?

Regards,
Kharis