Blog Appearance Issues

Hi X Team,

I am setting up this new blog here…
http://dallaseuropeanauto.bluetroop.com/blog/

But I DON’T want the transparent background (I want a solid white background) and I don’t want the side margin content. I want my blog index page and individual blog pages like this sample… https://clientci.com/a-r-advisory/

How do I get it there?

Hello @bluetroop2,

Thanks for writing in!

1.) You have added a dark background image. If you can go to X > Theme Options > Layout and Designs > Background Image and remove the background image, you will have a solid white background color.

2.) If you have purposely added the background color, you will have to resort to adding a custom CSS to modify the background color of certain areas like this:

If this is the the case, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Based from the screenshot above, you can now get the necessary CSS selector. Therefore, the custom CSS could be:

.site .x-container.max.width.offset {
    padding: 40px;
    background-color: white;
}

.x-header-landmark {
    background-color: white;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Best Regards.

No, that code did not help anything. I want to keep the background image on the other pages, but the blog page I want white AND I do not want the breadcrumbs at top or the right side margin or things. How do I do this?

Hi @bluetroop2,

It seems that the code provided by my colleague is working perfectly and setting the background color of the content area. If you want to remove the background image completely, please add the following code as Theme Options > CSS.

.blog .backstretch
{
    display:none !important;
}

If you want the code provided by my colleague to only work for the Blog page, then please add .blog selector as the prefix to that code and it looks like this.

.blog .site .x-container.max.width.offset 
{
    padding: 40px;
    background-color: white;
}
.blog .x-header-landmark 
{
    background-color: white;
}

To remove the breadcrumb, please add the following code to Theme Options > CSS.

.blog .x-breadcrumbs-wrap
{
    display:none !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

Sorry, I had placed in the code wrong. Works fine now, thank you for your help…
http://dallaseuropeanauto.bluetroop.com/blog/

How do I remove the right-hand margin content on the blog (Search, Recent Posts, Recent Comments, Archives, etc…) I don’t want any of that.

Also, when I click on individual blog article pages, the dark background is back again…

Hi @bluetroop2,

If you want that white background into the blog single page, you need to add the same code with the .single. The code will look like the following.

.single .site .x-container.max.width.offset 
{
    padding: 40px;
    background-color: white;
}
.single .x-header-landmark 
{
    background-color: white;
}

To reduce the margin between the content and sidebar please increase the Content Width from Theme Options > Layout and Design.

Theme-Options-X (44)

Hope it helps.
Thanks

The first directive worked, thank you for the guidance. The second directive regarding content width did not work.
It only pushed the side margin further to the right, but it is still visible. It also made other pages wider, which I do not want. Are there other ideas?

Hi @bluetroop2,

I am not quite sure what do you want on your blog page, do you want to completely remove the sidebar on your blog page? I also advise that you provide your admin credential so that we can check your settings. To do that, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

Yes, exactly, I want to remove the sidebar on the blog pages, I’m sorry I was not clear. More information to follow…

Hi @bluetroop2,

You can remove the sidebar by selecting the Full Width Content Layout from Theme Options > Layout and Design.

Screenshot-163- (1)

Hope it helps.
Thanks

Excellent, thank you for your help.

Hello @bluetroop2,

Glad that we were able to help you. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.