Help customising sidebar widgets

[rarkmoberts]

So I just changed the content layout of my site from Fullwidth to Content Left, Sidebar Right. And I moved my widgets that were in the footer (about page, useful posts, newsletter sign-up) to the sidebar.

But the background of my site is white and the font of these sidebar widgets is white so you can’t read the text. Is there some way I can customize my sidebars so they are readable?

Attached is an image of what I mean.

Here is the link to my site: https://kr4m.com/

Also, is there a way to customize the way the posts show in the blog of the homepage? I would like the pictures to be a little bigger and/or the text to be smaller. Because the way it is right now doesn’t look quite right to me.

[ruenel]

Hello Mark,

Thanks for writing in!

You can change the site background color in X > Theme Options > Layout and Design > Background Options. You may also change the site links colors to make it more visible. You can do that in X > Theme Options > Typography > Site Links.

Regretfully there isn’t a setting in the theme options to be able to change the styling of the widget areas on the sidebar. You need to add CSS code into X > Theme Options > CSS. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

The widget areas use widget CSS class. The sidebar section of the theme has x-sidebar class, therefore a proper CSS selector for the widgets in the sidebar will be:

.x-sidebar .widget {
    background-color: #f6f6f6;
}

Feel free to add whatever CSS code you like inside the selector. I added a white background color as an example.

We are unable to provide CSS code for the customization as it is outside of our support scope. The points above will be a good starting point and if you are interested you can learn more about CSS selectors and details here

The same way goes with the post items. You will have to add custom css as well.

Hope this helps.

[rarkmoberts]

Thanks for your reply.

I’m not very good at CSS, but I’ve been able to customize the sidebar and get it to look better.

Do you know if there’s a way to separate the sidebar from the main content? Just so users don’t get confused? I guess it’s not a big deal, but thought it would be worth asking.

[friech]

Hi Mark,

That’s cool, to make your sidebar not to blend too much on the content, please navigate to X > Theme Options > Layout and Design and change the Background color option to a not pure white color, maybe gray this background color will be inherited by the sidebar, while the content will remain white.

Cheers!