[Theme: Sweet Date theme] Changing CSS background of a div

You can do it entirely with CSS. If your theme has a built-in custom CSS option, use it; otherwise, get a custom CSS plugin and put:

.six.columns {
    background: gray;
}

Ah, I see now so dots are important for identifying I guess, I see now thanks for your help, I can leran a bit off of that, I do C++ but CSS is so simple that it hurts haha

There’s a lot of resources on the Internet about the different types of CSS selectors. There are a few quirks to it, but it’s mostly simple.

Hi khailz, I like that you’re doing a gaming site.
Firstly six and columns are two classes. six is the width and columns is the position. I’m guessing what you are looking for is article-content. You can add some css to your custom styles to change the background color like this:

.article-content {
    background-color: rgba(47,47,47,0.5);
    padding: 20px;
}

“rgb” will set the color and “a” 0.5 the transparency, that way you can still show off the nice graphics, but make the page more readable.

Play with the colors and transparency till you get something that you like.
I’ve added some padding – 20px to give the content some room so the color does not go flush against the content.

Let me know how this works for you.

Regards

Ernest Close

Hi stephencottontail,
setting color on either .six or .columns is not a good idea as it is for size and not style. Those classes are used throughout the theme and then you will get color where you do not want it. Rather set color on the content like .article-content which is meant for styling.

I did what was asked. I can’t read the poster’s mind, nor can I know what changes might be made to their site after the fact.

@stephencottontail, Yes you answered the question, but you did not solve the problem. You actually created an even bigger problem by applying a color style to that class. It has nothing to do with changes after the fact, because those size classes are built into the theme’s grid system and will be used for everything that has to display at that width. Also given the fact that the theme is responsive and that those classes can be nested, it could cause unwanted behavior at different screen sizes. A quick look at the theme’s code would have made you aware of this.

Can you please focus on posting solutions and/or suggestions for those that need help rather than arguing as to who gave the right answer. I am now closing this topic.