Page background color

Support
#1

How to i control page background color. Not site background color, but on a “page” I have created. Also, where do I control the padding of the top first column and the header? See the attached image. The red arrow is pointing to the area where I would like to change the color AND also the area that has empty space I am trying to close up by moving below content up.
Thank you.

#2

Hi @tr6world,

Thanks for writing in.

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

mikeszone.com/xtr

This site is my test site which I will eventually move over to the root domain (mikeszone.com) which is an avada site.

#4

Hello There,

Can you please share correct URL as it’s giving 404 page not found error. In the mean time please add following CSS to change page background color and let us know how it goes:

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

Thanks.

#5

Sorry about that. mikeszone.com/xtar

I used your css code and that did exactly what I wanted. I did change the hex value.

I need to also change the background color of the sidebar on all pages. I would use the css area to do this but don’t know what code to place. Please advise.

Lastly, the original post also asked about the extra space found above the masthead below the header as shown in the image I included in my origin post. Please let me know how to reduce the spacing.

Thanks

#6

Hi There,

To remove the space on top of your page you can add the following code to Theme Options Custom CSS

.entry-wrap {
 
    padding-top: 0px;
}

You also can add the class man to your firdt custom head line element on your page, and that will reduce the space even more.

Regarding the side bar please add the following code to Theme Options CSS to get a better looking colored sidebar.

.x-sidebar {
    background-color: #ddd;
    width: 20%;
    padding: 20px;
    border-radius: 5px;
}

Hope it helps!

#7

Thank you for your help with this. It still isn’t quite what I am trying to accomplish. Let me show you a screenshot of what I am trying to do.

Entire sidebar is gray:
Notice how the sidebar covers the from Top to Bottom, the entire area is shaded gray. That is what i want to do.

Widget formatting:
Each widget is formatted the same. Notice the “most recent” and the “most popular” are using the same font, color and size. My test site has different formatting. How do I remove the underlines, the blue hypertext and format each of these so they appear to be the same?

Headline element:
I didn’t understand what you were saying about reducing the space even more (above post). Where and how do I do this? using css? Please advise.

Thank you for your help.

#8

Hi There,

Let me clarify this first, this area here is the div.entry-wrap

screenshot

The green highlight around it is the padding, as you can see the top padding of it is partially a culprit of your empty space issue (the remaining space is the top margin of your headline which you can get rid of by adding a class mtn to your headline).

You can use the div.entry-wrap as the selector to formulate a custom CSS to target this wrapper.

for example:

div.entry-wrap {
	background-color: #f1f1f1; /*change the background*/
	padding-top: 0; /*zero out the top padding*/
}

Keep in mind that the .entry-wrap is a site wide class. If you want this code to affect only a specific page, please add the code on the page’s CSS. Otherwise add the code on Theme Options > CSS

Now for the sidebar, see the highlighted part that is just exactly the width of your sidebar, so if you add a background-color to it, it will only cover that portion as well.

screenshot

To apply a custom CSS to your sidebar you need to use this selector.

.x-sidebar.right {
	/*some css property here*/
}

Currently your sidebar width is width: 17.536945%; you can bump that to 21% to make the sidebar closer to the entry-wrap and then a padding: 4%; around your sidebar to give your content some breathing room. Again this is a site wide class add the code on page’s CSS if you want this code to affect this specific page only.

That is because on your site the Most Popular and Most Popular Tags have the same html mark-up (ul > li > a) that is why they have the same formatting, while the Life’s Truths has a different mark-up (p > a) and they actually have there own styling in it.

Use this selector to style the Most Popular and Most Popular Tags

.x-sidebar.right .widget ul li a,
.x-sidebar.right .widget ol li a,
.x-sidebar.right .x-comment-time {
	/*some custom CSS here*/
}

And this is for the Life’s Truths, this seems to be from a 3rd party plugin keep in mind that we can not provide support for 3rd party plugins.

.x-sidebar.right .textwidget p a {
	/*some custom CSS here*/
}

To remove the underline apply a custom CSS with a property of border-bottom: 0; to it. Use the selectors I’ve provided above to format each of this widgets.

He is simple saying to add a class man to your headline to get rid of the margins.

example:
<h2 class="man">Lorem</h2>

The man means margin all no. See more about this utility class here, learn how to use this classes as this would come very handy for adjusting the spacing between your elements.

Hope this shed some lights,
Cheers!

#9

Thank you for taking the time to explain this to me. I have a better understanding of css. I have applied the code as directed (i think). There is still space above the masthead? Also, the formatting of the sidebar didn’t work for me. I want the sidebar background color to go all the way to the top and bottom of the browser as in the example in my previous post.

Here is the code i placed in the css:

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

div.entry-wrap {
background-color: #f1f1f1; /change the background/
padding-top: 0; padding-left: 0; padding-right: 0; /zero out the top padding/
}

.x-sidebar.right {
width: 21%; padding: 3%; background-color: #dddddd
}

aside.x-sidebar.right {
background-color: #dddddd;
}

.x-sidebar.right .widget ul li a,
.x-sidebar.right .widget ol li a,
.x-sidebar.right .x-comment-time {
/some custom CSS here/
}

.x-sidebar.right .textwidget p a {
/some custom CSS here/
}

.x-sidebar.right {
border-bottom: 0;
}

I’m a little disappointed that so much css is needed for this styling. I was under the impression that the x-theme and cornerstone would be doing most of this without custom css. I do appreciate your help figuring all of this out.

Thanks.

#10

Hi there,

The space above the heading in https://mikeszone.com/xtar/ page is from the default CSS that adds a top margin to header elements. To get rid of the margins, you may use some of our predefined CSS helper classes. Please take time to review the link that @friech provided in the previous response as there are a lot of useful information on it. which you can find here. In this case, please add the class mtn to the h2 element to get rid of the space above it.

Also, aside from the defaul padding assigned to .entry-wrap, there is another default margin set to the main container of the page which is the reason why there is a space between the main header and the sidebar.

If you want to move the sidebar higher so that it will be directly under the header, you could remove the default top margin set to the main container of the page. The CSS selector that targets this is .x-container.offset but please note that if you add a 0 top margin to this block, it will also move the content on the left right under the header. You might want to consider removing the mtn added to the h2 if you want the left content to have the default space.

Hope this helps.