Article body background

Sparkling
1

Hello,

I just wanted to know how to change the background colour and opacity of the article body (the blocks which display article text, widgets and comments)

Thanks in advance
Leon

2

Okay, I figured out how to do this for most pages, but now I am having trouble with the headers and other text colours

here’s a link to my blog BTW

3

Also, here is everything I have added to the style.css on the child theme, basically I want to try and make the backgrounds darker and text lighter for a theme to use during Halloween

/*
 Theme Name: Sparkling Halloween
 Description: Sparkling Child
 Template: sparkling
*/

@import url("../sparkling/style.css");

blockquote {
border-left:5px solid #a63642;
background:#d84656;
font color:#fffff;
margin:15px 30px 0 10px;
padding-left:20px;
}

.entry-meta a {
  font-size: 13px;
  color: #6B6B6B;
}

#secondary .widget > h3 {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 25px;
  margin-top: 0;
  color: #ffffff;
}

#secondary .widget {
  margin-bottom: 50px;
  color: #ffffff;
  overflow: hidden;
}

body {
  color: #6B6B6B;
  background-color: #F2F2F2;
  word-wrap: break-word;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.7;
  font-size: 14px;
}

.entry-meta a {
  font-size: 13px;
  color: #ffffff;
}

.comment .comment-body {
  background-color: #ffffff;
  opacity: 80%;
  margin: 0;
  overflow: hidden;
  padding: 25px;
  margin-top: 2em;
  padding-left: 100px;
  position: relative;
  border: 1px solid #E8E8E8;
  border-bottom: 1px solid #DADADA;
  border-radius: 4px;
}

.post-inner-content {
  padding: 45px 50px;
  background-color: #E8E8E8;
  border: 1px solid #dadada;
  border-top: none;
}

.well {
  background-color: #E8E8E8;
  padding: 30px;
  border: 1px solid #DADADA;
  overflow: hidden;
  clear: both;
}

.post-inner-content {
  padding: 45px 50px;
  background-color: #E8E8E8;
opacity: 0%;
  border: 1px solid #dadada;
  border-top: none;
}

.site-content [class*="navigation"] a {
  border: 1px solid #DADADA;
  background-color: #E8E8E8;
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 4px;
  display: block;
  margin: 0 0 1.5em;
  overflow: hidden;
}
4

Not sure to which elements you still want to change color but here is how you can change Post Title color, entry-content color and link color in sidebar widgets. Let me know what are other elements that are still missing.

.entry-title a {
  color: red;
}
.entry-content {
  color: red;
}
#secondary .widget a {
  color: blue !important;
}
5

Sorry for late reply

I basically also want all the backgrounds on the articles and widgets to be black and have a low opacity while making all text white

I have the titles and widget text white, but the actual article text won’t go white =/

6

Nevermind, found out how to change regular text colour, now I just need low opacity black blocks :3

7

I see that you have already solved problems with Opacity for your content. Am I right? Do you need any further help with this?

8

Yup, I did, thanks for all the help though, much appreciated :slight_smile:

What do you think of the changes?

9

Looks great and definitely on topic! :slight_smile:

10

Thank you very much :smiley: