Individual Widget Title Alignment

Greetings. I am designing a new site with Sydney. It’s a great, super-flexible theme.

I’m having a bit of difficulty getting the widget titles to align the way I want. On my front page, I want them center aligned. But on the other pages I want them left aligned. Please take a look at the “What I Do” page to see.

I have attempted to get them where I want them by creating a Widget Class, TitleLeftAlign, and then putting the CSS code into the Custom CSS plugin. That didn’t work. Then I tried putting the following code into the CSS Styles area on individual Widgets. That didn’t work either.

.panel-grid-cell .widget-title {
    text-align: left;
}

Could you help me? Thank you.

Site: douglasacrawford.com

Doug

Hello Doug,

Please try to use the following CSS code to change widget titles alignment on What I Do page. You can use different page IDs to change widget titles alignment on other pages.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

.page-id-939 .widget-title {
    text-align: left;
}

.page-id-939 .widget-title::after {
    display: none;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thanks for the code. That’s exactly what I was looking for. And thanks to your guidance, I now know how to find the page ID.

As for the line after the widget title, I would like it to show, only be aligned left as the title is. Any guidance there?

Thanks,
Doug

I found the answer to the line-after-the-widget-title problem. No need to reply.

Thanks for your help, Roman.

Doug

Okay Doug,

Please try to use this CSS code:

.page-id-939 .widget-title::after {
    left: 35px;
}

…instead of this:

.page-id-939 .widget-title::after {
    display: none;
}

Kind Regards, Roman.

Hi, I want left align my Widget Title to and installed the simple css pluging but the effect is that only the line below the title is left aligned, how can I change to left a;lignment of the title text?

Ps, I am new to this (-;

Regards, Paselir

Ps Also want the underline not on this page (and want left alignment) (http://www.paselir.nl/diensten-prestatieverbeterplan/home/)

Regards, Paselir

Hello Paselir,

Please create a new topic for your issue to keep forum in good order and make it easier to help you.

Kind Regards, Roman.