How to change the background color of posts with a specific tag?

Question

Hi everyone.

I want to change the background of questions that have a specific tag. For example, if a question has been tagged "article", that question's background color be different from the others. Is it possible to be done in the theme?

Comments

I am also looking for a solution to a similar question

---

Did someone found a way to do it already? I am also struggling with it...

---

Yes, look at the selected answer just below.

---

which theme?

Answer 1

Follow these steps:

 1. Edit this line (yes, the empty one) in file qa-theme/SnowFlat/qa-theme.php

 2. Add this code in that location:

require_once QA_INCLUDE_DIR . 'util/string.php';

if ($this->template === 'question' && isset($this->content['q_view']['raw']['tags'])) {
    $tags = qa_tagstring_to_tags($this->content['q_view']['raw']['tags']);
    $specialTags = array('article', 'notes', 'other-tag', 'óña');
    foreach ($specialTags as $specialTagTemp) {
        if (in_array($specialTagTemp, $tags)) {
            $class .= ' q-tag-' . qa_slugify($specialTagTemp);
            break;
        }
    }
}

 3. Edit in the previous code the special tags. Some special characters will be translated to valid CSS class names. For example, óña will become ona. However, this will depend on the kind of special tags you use.

 4. Append the needed styles based on the specific tags in file qa-theme/SnowFlat/qa-styles.css in this way:

.q-tag-article .qa-part-q-view,
.q-tag-article .qa-q-view {
    background-color: red;
}

.q-tag-ona .qa-part-q-view,
.q-tag-ona .qa-q-view {
    background-color: blue;
}

Comments

Thanks a lot bro, it was a great help.
I did it as you said, then added a few  styles:

.q-tag-article .qa-main-heading {
    background-color:#da622f;
}
.q-tag-article .qa-main-heading a::before {
    content:"Article";
    background-color:#b79070;
    padding:2px;
    display:block;
    text-align:center;
    border-radius:5px;
}
 now if the users post a question with the tag "article", the background will be in a different colour and before the title a box will be shown with the word "Article”. I think it’s good enough to have posts beside questions in a q2a website.
Thanks again for your help.

Answer 2

you can use category, because category id adds to the body class

add this css in your theme qa-styles.css file

.qa-category-115 .qa-part-q-view{

    background: red;

}

change 115 with your category id.

Comments

Thanks Momin,  just I needed it to be with tags.

---

thanks i will try it

---

I am trying to set different colour background for different category.  I added a similar code to qa-styles.css but that did not work. (in my case it was .qa-category-6).  In fact, I couldn't see different colours for tags either.

---

maybe other css is rewriting your post background color make sure you added this at the end of qa-styles.css

if not working then try this

background: red !important;

---

Thanx Momin!  that worked!!
I had added the styles somewhere in the middle of the file.
I moved it to the bottom and it worked.  I wanted to change the colour specifically for categories and not tags.  Now I have colours for all categories!!