I am using the page template with a side bar. How would I make the side bar narrower so that I can increase the pages viewing area for content? Also want to get rid of the default background in the side bar, using Ethos.
Hi There @waynepatt58
Thanks for writing in! Please head over to X -> Theme Options -> Layout & Design section and then you can increase the content width, so that your sidebar will be narrower.
Also to set a background color, check the background options below.
Hope that helps.
Can I do that on just a single page instead of the whole site?
Hi There,
Thanks for asking again!
This setting is for global. To do it for a single page you need custom CSS for that page only.
You can take the body class of the page which is unique for that page only as parent class and write the CSS for content area and sidebar.
Example if the body class is .aboutus for about us page then the CSS would look like this.
.aboutus .x-main {
width: 75%;
}
.aboutus .x-sidebar {
width: 20%;
}
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.