Blog post background color + side menu color customization not working

[alalit]

I am using Pro theme and integrity stack. My target is to format the blog as the Restaurant demo with a left sidebar.

URL: anshul(dot)me/blog/

1. I am unable to change my blog post showcase background. It is shown in first screenshot.
2. I am unable to format tags i.e. tags background, font, shadow color. It is shown in first screenshot.
3. When I open any blog post, the post background color is not changing. It is shown in second screenshot.
4. In second screenshot, I am unable to customize recent posts and recent comments font color, shadow etc.

Screenshot

Screenshot

have tried all existing links in the support, but unable to resolve this issue. All I want is to have a background color as #20242d and format the text color etc. as shown in the Restaurant theme demo blog.

Thanks!

[ruenel]

Hello @alalit,

Thanks for writing in!

1.) By default, the Integrity stack has its unique and built-in styling. This is why you have a white background color for the post content area. Regretfully there isn’t a setting in the Theme Options that you can change it. You need to add CSS code into X > Theme Options > CSS to be able to modify and override the Integrity stack styling. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

By default, it is having a white background color with this built-in CSS styling:

.entry-wrap {
    background-color: #fff;
}

2.) The same goes with the footer tags. It is using this custom CSS styling:

.entry-footer a {
    border: 1px solid #ddd;
    border: 1px solid rgba(0,0,0,0.125);
    padding: 0.692em 1.154em 0.769em;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    color: #c5c5c5;
    color: rgba(0,0,0,0.375);
    background-color: transparent;
    border-radius: 0.35em;
    box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 1px 1px rgba(255,255,255,0.95);
    -webkit-transition: color 0.3s ease,border-color 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease;
    transition: color 0.3s ease,border-color 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease;
}

.entry-footer a:hover {
    color: #777;
    color: rgba(0,0,0,0.75);
    border-color: #cfcfcf;
    border-color: rgba(0,0,0,0.25);
    background-color: #fff;
    background-color: #fff;
}

3.) Any changes made in #1 should affect the single post background color.

4.) Still, you cannot change the settings because of the built-in styling for the Integrity stack. This is the custom CSS:

.widget {
    /* text-shadow: 0 1px 0 rgba(255,255,255,0.95); */
}

.widget ul li, .widget ol li {
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 0.65em 0.85em;
    line-height: 1.5;
    box-shadow: 0 1px 1px rgba(255,255,255,0.95);
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

.h-widget {
    margin: 0 0 0.5em;
    font-size: 150%;
    line-height: 1;
}

.widget ul li, .widget ol li {
    border-bottom: 1px solid #ddd;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 0.65em 0.85em;
    line-height: 1.5;
    box-shadow: 0 1px 1px rgba(255,255,255,0.95);
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

.widget ul li a, .widget ol li a {
    border-bottom: 1px dotted;
    color: #7a7a7a;
}

Feel free the change the border-color, background-color, text color and etc. to look like what you have in mind.

Keep in mind that any modifications of the codes above are deemed as customization and it is beyond the scope of our support. You are the one who will maintain this code whenever there are theme updates.

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.

Thank you for your understanding.

[alalit]

OK sure, thanks but to clarify, I am not asking for customization, I am asking on how to replicate a demo blog that you already provide.
Using Integrity stack doesn’t really give me any advantage as all of pages are custom built with pro header, footer and content builder, and other pages I will make with custom builder too. So, the only reason it is integrity as it was pre selected
So, as you see, I can change this to any other stack, or no stack at all. I just want this blog to look like restaurant demo here: https://demo.theme.co/restaurant/blog/

What should I do?

[tristup]

Hi @alalit,

To use the Restaurant demo or any page from that demo, you need to import the demo using X/Pro > Design Clouds, then you can start using the templates imported.
To know how to use the templates imported from design clouds, please read the article here: https://theme.co/docs/template-manager#what-is-the-design-cloud
The following video will help you to understand how you can use the design clouds for your purposes:

How to Use Themeco's Design Cloud Feature

Hope it helps.
Thanks