WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 23.06.2020 10:13:29

keepshango
Mitglied

[solved] Reviews module : get rid of inherited CSS setting

Hi,

*** MY CONFIGURATION ***
PHP 7.2.24
WBCE CMS 1.4.3
TEMPLATE : Acourdesz

When pointed with cursor of my web browser dev tool, all comments posted texts for which I want the color to be customized, appear to be colored with a color inherited from color setting in file :

web/templates/acourdesz/template.css

That said, If changed from the template.css file, the new color setting affects the whole page and reviews texts elements (body). But if added to frontend.css file (.reviews *, .review_block) the new color setting affects all the following reviews text elements (e.g.) :

1 comment found
“Sender name“ wrote on some date
Comment posted text

Based on my website design expectations, I would like only the comments posted texts to be affected with the new color.

Is this possible and how to set this ?

Regards

Beitrag geändert von keepshango (24.06.2020 22:11:20)

Offline

#2 23.06.2020 10:25:36

florian
Administrator

Re: [solved] Reviews module : get rid of inherited CSS setting

I don't quite understand what you mean. If you use the correct class selectors you can customize the colors in the template.css.
So (simple example) don't use p {color:red}, but .reviews p {color:red}
If you do not want to edit the stylesheet files, you can install the module Frontend Final CSS and place your individual definitions there.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 24.06.2020 08:51:34

keepshango
Mitglied

Re: [solved] Reviews module : get rid of inherited CSS setting

Hi,

Based the example from your previous post, the following describes how I tried to have a posted comment colored differently from sender, date and time indicators, when review block is on “posted“ mode.


*** CASE 1 / TEMPLATE ****
Posted comment initial color set in template.css file :  html, body {color: #EEE;}
Color setting added in template.css file : .reviews p {color:#66CC00}
Result on page reload : posted comment color remains UNCHANGED

*** CASE 2 / FRONTEND ****
Posted comment initial color set in template.css file :  html, body {color: #EEE;}
Color setting added in frontend.css file (reviews module) : .reviews p {color:#66CC00}
Result on page reload : posted comment color remains UNCHANGED

Same results with .review_block .reviews p {color:#66CC00}

Hope that what I am trying to achieve is now clearer to you, and expecting for some further assistance.

Regards

Offline

#4 24.06.2020 09:06:06

florian
Administrator

Re: [solved] Reviews module : get rid of inherited CSS setting

The code posted above was a general example without further looking into the generated code, just to show the principle.
Based on the way you use the module (Guestbook, Page Review, with/without star rating) the CSS classes you have to alter differ.
So if you wanted to show the text in red, you would have to use .review_content {color: red};

Pro tip: use the browser developer tools to identify and customize CSS styles. That means, right-click on the part of the page you'd like to style, and look at the browser console which styles are applied an how the part can be addressed.
See the attached screenshot.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#5 24.06.2020 12:14:19

keepshango
Mitglied

Re: [solved] Reviews module : get rid of inherited CSS setting

Hi,

When pointing the posted comment using my browser dev tool, I am shown the following <div class=“review_comment“>…</div>.
The inspector outputs following related contents for template.css ; frontend.css ; editor.css files (see attached screenshot).

I can see that default color for posted comment is set as #EEE in the editor.css file, but I can’t see any string labelled as  .review_comment

Do I have to add it, and how/where to add it ?
.review_comment {color: #66CC00;}
.review_block .review_comment {color: #66CC00;}

6BWHTUu.png

Regards

Offline

#6 24.06.2020 18:49:31

keepshango
Mitglied

Re: [solved] Reviews module : get rid of inherited CSS setting

Hi Florian

Before your last post, I found existing .review_content settings within the frontend.css file
As there was none color setting, I add the one that I wish for posted comments color : #66CC00

I then test to post a comment and noticed that color of typed text was matching color setting #66CC00
But I also noticed that when reading the comment on “posted“ mode the color setting was not applied any more !

Is the color setting for posted comment resides under a label different from .review_content ? ? ?
(I searched within both the frontend.css, and template.css files, but found nothing that appear relevant)

How then to apply a chosen color on “posted comments“ ?

Offline

#7 24.06.2020 19:21:50

florian
Administrator

Re: [solved] Reviews module : get rid of inherited CSS setting

Should work like this

.review_comment {
color:#66CC00;
}

Code allein macht nicht glücklich. Jetzt spenden!

Offline

#8 24.06.2020 22:01:10

keepshango
Mitglied

Re: [solved] Reviews module : get rid of inherited CSS setting

Thanks

It effectively works as I expected when added separately within frontend.css file :

.review_block .review_comment {
    width: 100%;
    height: 100px;
    font-size: inherit;
    font-family: inherit;
    padding: 5px;
}

.review_comment {
    color:#66CC00;
}

Beitrag geändert von keepshango (24.06.2020 22:01:51)

Offline

Fußzeile des Forums

up