If you have a URL please share.
It is always a good practice to share URL if it is available!
The Theme author may not be rightly available to answer a question. Other people may not feel this reasonable if they see it would require installing a whole theme to inspect the issue and find a solution.
Subrata Sarkar, yes, sure.
This is a test website – muhamadi.siterubix.com/test
I applied the code:
.page-wrap .content-wrapper{
background-color: #fff;
}
As you can see, it changed background color of content and sidebar areas.
I want to change background color of only content area.
Hello @muhamadi, thank you for the link.
Please try to use this CSS code instead of the CSS code that you mentioned above:
#content.page-wrap .content-wrapper {
background-color: transparent;
}
#primary {
background-color: white;
}
Kind Regards, Roman.
Hi, @romanbon,
Thanks for your reply.
Your code is not exactly what I want.
I applied this color to better explain:
#content.page-wrap .content-wrapper {
background-color: red;
}
#primary {
background-color: black;
}
You can see a red frame involving content and sidebar areas.
I want content frame and sidebar frame to have different colors.
muhamadi.siterubix.com/test
-
This reply was modified 8 years, 11 months ago by
Muhamadi.
Hello @muhamadi, you wrote “How to change background color of only content area (not sidebar or anything else)?” and “I want to change background color of only content area.“. So I’m confused now.
Can you please provide some explanatory screenshots? You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online services (Google Drive, Dropbox, etc.).
May be this is what you want?
#content.page-wrap .content-wrapper {
background-color: transparent;
}
#content #primary {
background-color: white;
}
#content #secondary {
background-color: black;
}
Kind Regards, Roman.
Hi, @romanbon,
Thank you for your reply.
Screenshot link:
http://muhamadi.siterubix.com/wp-content/uploads/2017/05/WP-Content-Frame-Color.jpg
Page link:
muhamadi.siterubix.com/test
I hope you can see the red frame around the content area and sidebar area.
I want content frame color to be different from the color of sidebar frame.
I applied the next code:
#content.page-wrap .content-wrapper {
background-color: red;
}
#content #primary {
background-color: green;
}
#content #secondary {
background-color: blue;
}
Please let me know if there is anything confusing to you.
Hello @muhamadi,
Can you please provide a screenshot of what exactly you want to achieve?
Kind Regards, Roman.
Hi, @romanbon,
First off, please let me ask you, do you see the red area/frame/border/rim around content and sidebar areas?
Please answer, because maybe you cannot open links provided by me.
I need to know, that you definitely see red area.
I want to have frame around content and content color different from everything else.
That is exactly what I want.
Similar to this:
http://www.copyblogger.com/find-loyal-readers/
With your code content area itself appears to be too small.
And I figured out that there is a separate frame around content area and sidebar area.
Please let me know if there is anything confusing to you.
-
This reply was modified 8 years, 10 months ago by Muhamadi.
-
This reply was modified 8 years, 10 months ago by Muhamadi.
Hello @muhamadi,
Yes, I see red area. But it’s a container, you can’t divide it easily.
If you want to achieve that kind of appearance then you can hire someone because it looks like it requires some coding and testing on different screen resolutions.
Kind Regards, Roman.
Hi @romanbon,
Once again, thanx for your reply.
I thought that all themes have content area as it should be, you know, a little bit wider than the content itself.
But content area of Sydney is too close to the text.
So in Sydney different color of only content area looks ugly.
Nevertheless, Thank you for your trying.
Please let me know if you somehow figure out the answer.
Cheers
Hello @muhamadi, now I think that I understand your problem 🙂
You can try to simply increase the padding of your content area by using this CSS code:
#content #primary {
background-color: green;
padding: 5%;
}
…instead of this:
#content #primary {
background-color: green;
}
Kind Regards, Roman.
Haha)) @romanbon,
Nice trick to make a way around it)
But there are several drawbacks out of this method:
1. It increases the padding at the expense of text area.
Actual text area is smaller, which is especially negative for the Mobile view ( in Mobile view text area should be as wide as possible).
2. In Mobile view there is still a border/frame around content area, which visually shrinkens/lessens/shortens text area even more.
I’ve increased the padding in website for you to see the drawbacks.
So there is no way around it.
I need to make frame around content and content color different from everything else.
Still it was a very good move)) Thank you for that.
Please Keep trying
Hello @muhamadi,
I have just checked that page once again and it looks well in my opinion with white background and grey sidebar.
Kind Regards, Roman.
Hi @romanbon,
1. It increases the padding at the expense of text area.
When you compare images “Desktop” and “Desktop 5%” you will see that text shrank both from top and sides.
“Mobile” and “Mobile 5%” – a little shrink from top.
“Mobile” and “Mobile 10%” – shrink both from top and sides.
2. In Mobile view there is still a frame around content area, which visually shrinks text area and distracts user’s attention from text area.
The bottom line is, in Mobile view I want to have the same background color for the content area, with no border/frame.
Links to screenshots:
http://muhamadi.siterubix.com/wp-content/uploads/2017/05/Desktop-5.jpg
http://muhamadi.siterubix.com/wp-content/uploads/2017/05/Desktop.jpg
http://muhamadi.siterubix.com/wp-content/uploads/2017/05/Mobile-5.jpg
http://muhamadi.siterubix.com/wp-content/uploads/2017/05/Mobile-10.jpg
http://muhamadi.siterubix.com/wp-content/uploads/2017/05/Mobile.jpg
Right now I stick with this code:
#content.page-wrap .content-wrapper {
background-color: white;
}
#content #primary {
background-color: white;
}
I don’t like the fact that frame around my sidebar is also white, but it’s better than having different colors of content and frame.
Please tell me that you totally understood what I explained you in this message.
Please let me know if there is anything confusing to you.
Hello @muhamadi,
As I mentioned earlier, it seems to require some work, so you might want to hire someone for this.
Kind Regards, Roman.
