Need code to change colours of some elements

1

Hello all,
I need some help in changing the colours of some elements within the Backsnap stack from yabdab.
The star rating is shown only in grey - not very nice.
When inspecting it shows the code - radio buttons star 1 to star5

  • see screenshots -
    Could someone help out with some css/html to change the colours of the stars into yellow?

30
Bildschirmfoto 2019-05-19 um 14.48.30.png779×404 56.6 KB
45
Bildschirmfoto 2019-05-19 um 14.49.45.png933×500 26.6 KB

Thanks a lot in advance,
Tom

2

What is the URL?

3

www.animatoscana.de/Gaestebuch

Thanks Steve!

4 
.commenter {
color: #000000;

}

Seems to target the name and the stars. Maybe use the following if that doesn’t work…

.commenter {
color: #000000 !important;

}

This targets the stars only in Inspect…

[class^="icon-"], [class*=" icon-"] {
color: #ffffff;

}

But I’ve a feling that might not work in RW. Give it a try.

1 Like
5

That is just a wild card syntax that targets things with class names starting with and containing icon- any valid CSS will work in RW.

6

The BackSnap content is displayed in an iFrame and so you cannot add CSS to your host page in RW that will affect the iFrame content - it is isolated from the host page.

All the styles affecting the BackSnap content are inline inside a <style> tag in the head of the inserted content - the code in black below

CloudApp

7

Ah! Didn’t realise that.

8

Thank you @tav and @steveb
As I am publishing locally and ftp- ing the files manually to my host I can and would change the html controlling the yabdab iframe content.

So where would I have to change the colour for the stars?
My guess would be commenter but I am not sure…

9

In the files/backsnap folder of your published site you will see the content.php that is imported into the iframe. Edit this with a text editor and just before the closing <\style> tag (as per the screenshot above) just add

.icon-star{color:yellow}

or your chosen hex colour of course.

1 Like
10

Thank you so much @tav you’re a star.
Just followed your instructions - it works!!

BTW - also @steveb - it is sunday - do you guys work 24/7 ?
Cheers
Tom

11

What’s “work?”

12

Ah, I see - must be equivalent to my freelance definition of
leisure time / holidays - the time when I can do what I want and not what has to be done…

13

FYI

I even pushed it further and tried my luck with
.icon-star{color:#e6b800}
.icon-star-empty{color:#e6b800}
.rating{color:#e6b800}

now the selectable stars are also yellow.

Thanks guys!

1 Like