How to add solid background to transparent pages in Triton Lite Theme

ginab13 · Member · Jan 14, 2015 at 3:45 am
Copy link

Add topic to favorites
Hi, I am using the Triton Light theme in WordPress.com and have upgraded to Premium. I want to add an opaque background to pages and posts – and JUST pages and posts. I’ve found CSS to change background color here:

https://en.forums.wordpress.com/topic/triton-lite-theme-css-change-container-background-only?replies=6

But, it changes too much. I have been able to exclude the homepage, which I wanted to do, but when I change color on post and page containers, the color change goes too far and incudes the header and top menu, which I do not want.

My hope is to add CSS that just changes the container, and if possible does NOT include the container header or other elements of the page. (though excluding the container header may be asking too much.

One more thing I would LOVE (though it may be over-reaching) is to make the background color for these containers slightly opaque. The color I’m using now is: #ade3f4.

Thanks for any assistance you can provide!

The blog I need help with is csueii.wordpress.com.

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Jan 14, 2015 at 12:55 pm
Copy link
I want to add an opaque background to pages and posts – and JUST pages and posts.

You can use body classes to target certain types of pages. Let’s look at a few examples.

Here is a page from your site:
https://csueii.wordpress.com/students/

Here is the body tag from that page:

<body class="page page-id-3 page-parent page-template-default logged-in admin-bar no-customize-support custom-background mp6 typekit-enabled single-author chrome debug-bar-maximized theme-menu-maximized highlander-enabled highlander-light custom-colors">

See how “page” is the first thing in the list? That means we should be able to start a CSS selector with “.page” to target just pages.

I checked https://csueii.wordpress.com/ and I don’t see any posts there right now. Here is an example post from the Triton Lite demo site:
https://tritonlitedemo.wordpress.com/2011/07/07/fall-in-luxembourg/

Here is the body tag from that post:

<body class="single single-post postid-69 single-format-gallery logged-in admin-bar no-customize-support mp6 single-author one-column chrome debug-bar-maximized theme-menu-maximized highlander-enabled highlander-light demo-site">

See how the class list starts with “single”? That is a common body class name to use for single posts, and we can use that in a CSS selector to target just posts.

Here is an example you can add to your Appearance > Customize > CSS editor to illustrate how it works. You can click around within your site to see how CSS affects different types of pages in the live preview.
```
.single {
	background: yellow;
}

.page {
	background: turquoise;
}

body.page {
	background-image: inherit;
}
```
The last block in the example for “body.page” hides the background image temporarily for the purposes of the illustration. Just use this example in the live preview without saving so you can see how targeting different types of pages works. You may want to publish a post so you can see the differences on your site directly, or another thing you can do is test CSS using built-in browser tools. This help page explains how:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

In your case, you are using a static front page on the home page, so it’s a little more complex, but the example above should give you a good idea of how to use body classes to target some types of pages. Another similar example would be to use “.home” in front of a selector o target just the home page.

but when I change color on post and page containers, the color change goes too far and incudes the header and top menu, which I do not want.

My hope is to add CSS that just changes the container, and if possible does NOT include the container header or other elements of the page.

Here is an example that I think does what you described:
```
.page > .container,
.single > .container {
	padding-left: 10px;
	background-color: red;
}

#header,
.home > .container {
	background: inherit;
}
```
What id does is changes the background color to red for pages and single posts and then undoes that change for the header area and the home page “.container” element—which is a tricky way to get around the fact that your home page is also a static front page in this case.

One more thing I would LOVE (though it may be over-reaching) is to make the background color for these containers slightly opaque. The color I’m using now is: #ade3f4.

You can use the “rgba” function to add some level of transparency to colors. Here is an example from the Mozilla developer docs that explains how it works:
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
ginab13 · Member · Jan 14, 2015 at 7:05 pm
Copy link
Thank you so much for taking the time!

The first CSS block did not work, but this did:

.page > .container,
.single > .container {
padding-left: 10px;
background-color: red;
}

#header,
.home > .container {
background: inherit;
}

But, it still over-reaches. Instead of surrounding just the words above the light blue line, the container goes all the way down to the middle wiget (area with three images). It also spreads right and encompasses the sidebar wiget. If possible, I want it to just encompass the text. But, it looks as if this theme defines “page” as something much larger on the screen. This is true even if the text is longer than the sidebar wiget.

Here is a screeenshot: a href=”https://csueii.files.wordpress.com/2015/01/screenshot_pagebg.jpg”https://csueii.files.wordpress.com/2015/01/screenshot_pagebg.jpg

In addition — I still need to explore your suggestion for making the background opaque. But, I did try the below CSS within your .page css, and it actually expanded the page background to the header, menu, and title. AND, it made not only the background opaque, but the text, as well.

opacity: 0.6;
filter: alpha(opacity=60);

Here is a screenshot: https://csueii.files.wordpress.com/2015/01/screenshot_opaquebg.jpg

Thanks for any additional assistance you can provide.
thesacredpath · Member · Jan 15, 2015 at 5:59 pm
Copy link
But, it still over-reaches. Instead of surrounding just the words above the light blue line, the container goes all the way down to the middle wiget (area with three images).

See if this gets you what you want on pages, such as Students. In Triton Lite, .post-content is just the page title and content you enter in the page editor.
```
.page #posts .post-content {
    background: rgba(173, 227, 244, 0.8);
    padding: 10px;
}
```
I’ve included the RGB color equivalent of the #ade3f4 you mentioned. The last number, 0.8, is the transparency/opacity. The closer to 1, the more opaque. As you will see, as you make the color more transparent (closer to 0) it takes on a grayish tone. That is because the darker image behind is showing through and affecting it.

opacity declarations will affect all elements that are within a certain div, so if the div you apply it to has child divs with text and other things in it, it will change the opacity of those too. With RGBA background or background-color declarations, they apply only to that specific element.
ginab13 · Member · Jan 15, 2015 at 6:49 pm
Copy link
Thank you! This really does the trick. :)

It’s too bad that opacity of a background also affects the content, but so be it.

Two final things… is there a way to EXCLUDE the homepage (I don’t want the background color to appear on the homepage.

AND… is there a way to add background color to the PRIMARY SIDEBAR. I just don’t know the CSS element name.

Thank you again!
thesacredpath · Member · Jan 16, 2015 at 3:35 am
Copy link
Two final things… is there a way to EXCLUDE the homepage (I don’t want the background color to appear on the homepage.

You can use the following to exclude the background from the home page. We are using the “home” CSS body class to specifically target the home page.
```
.home #posts .post-content {
    background: none;
}
```
AND… is there a way to add background color to the PRIMARY SIDEBAR. I just don’t know the CSS element name.

The following will allow you to add a background. To give a little spacing on the left and right of the content in the widgets, I added some left and right padding and compensated for that addition by slightly reducing the width of the widget area.
```
#sidebar.widget-area {
    background: rgba(173, 227, 244, 0.8);
    padding-left: 10px;
    padding-right: 10px;
    width: 280px;
}
```
ginab13 · Member · Jan 16, 2015 at 7:28 am
Copy link
Thank you!! Much appreciated. :()
thesacredpath · Member · Jan 16, 2015 at 8:54 pm
Copy link
You are welcome.

No items found.