# Article body background

**URL:** <https://colorlibsupport.com/t/article-body-background/6442>\
**Category:** Sparkling\
**Created:** [October 24, 2014, 5:51pm UTC](https://colorlibsupport.com/t/article-body-background/6442 "2014-10-24T17:51:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![leon-fletcher](https://colorlibsupport.com/user_avatar/colorlibsupport.com/leon-fletcher/32/3164_2.png) [@leon-fletcher](https://colorlibsupport.com/u/leon-fletcher)\
**Post date:** [October 24, 2014, 5:51pm UTC](https://colorlibsupport.com/t/article-body-background/6442/1 "2014-10-24T17:51:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![leon-fletcher](https://colorlibsupport.com/user_avatar/colorlibsupport.com/leon-fletcher/32/3164_2.png) [@leon-fletcher](https://colorlibsupport.com/u/leon-fletcher)\
**Post date:** [October 24, 2014, 6:54pm UTC](https://colorlibsupport.com/t/article-body-background/6442/2 "2014-10-24T18:54:43Z")

</div>

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

> **[NintyBuzz – NintyBuzz – Nintendo Previews, Features, Reviews, Tournaments and...](https://www.nintybuzz.com)**
>
> PREVIEW  
> REVIEWS  
> FEATURES     
> Recent Posts Tweets by @NintyBuzz
> !function(d,s,id){var...

---

<div class="post-metadata">

**Author:** ![leon-fletcher](https://colorlibsupport.com/user_avatar/colorlibsupport.com/leon-fletcher/32/3164_2.png) [@leon-fletcher](https://colorlibsupport.com/u/leon-fletcher)\
**Post date:** [October 24, 2014, 7:25pm UTC](https://colorlibsupport.com/t/article-body-background/6442/3 "2014-10-24T19:25:40Z")

</div>

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

```auto
/*
 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;
}

```

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [October 25, 2014, 8:53am UTC](https://colorlibsupport.com/t/article-body-background/6442/4 "2014-10-25T08:53:00Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![leon-fletcher](https://colorlibsupport.com/user_avatar/colorlibsupport.com/leon-fletcher/32/3164_2.png) [@leon-fletcher](https://colorlibsupport.com/u/leon-fletcher)\
**Post date:** [October 26, 2014, 5:53pm UTC](https://colorlibsupport.com/t/article-body-background/6442/5 "2014-10-26T17:53:49Z")

</div>

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 =/

---

<div class="post-metadata">

**Author:** ![leon-fletcher](https://colorlibsupport.com/user_avatar/colorlibsupport.com/leon-fletcher/32/3164_2.png) [@leon-fletcher](https://colorlibsupport.com/u/leon-fletcher)\
**Post date:** [October 26, 2014, 6:01pm UTC](https://colorlibsupport.com/t/article-body-background/6442/6 "2014-10-26T18:01:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [October 27, 2014, 12:52pm UTC](https://colorlibsupport.com/t/article-body-background/6442/7 "2014-10-27T12:52:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![leon-fletcher](https://colorlibsupport.com/user_avatar/colorlibsupport.com/leon-fletcher/32/3164_2.png) [@leon-fletcher](https://colorlibsupport.com/u/leon-fletcher)\
**Post date:** [October 27, 2014, 1:10pm UTC](https://colorlibsupport.com/t/article-body-background/6442/8 "2014-10-27T13:10:16Z")

</div>

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

What do you think of the changes?

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [October 27, 2014, 2:22pm UTC](https://colorlibsupport.com/t/article-body-background/6442/9 "2014-10-27T14:22:49Z")

</div>

Looks great and definitely on topic! 🙂

---

<div class="post-metadata">

**Author:** ![leon-fletcher](https://colorlibsupport.com/user_avatar/colorlibsupport.com/leon-fletcher/32/3164_2.png) [@leon-fletcher](https://colorlibsupport.com/u/leon-fletcher)\
**Post date:** [October 27, 2014, 3:06pm UTC](https://colorlibsupport.com/t/article-body-background/6442/10 "2014-10-27T15:06:25Z")

</div>

Thank you very much 😃