SOLVED Arrows color in RokSprocket Showcase
-
-
- Francesco Nassetti
- Jr. Rocketeer
- Posts: 39
- Thanks: 2
-
Hello,
in this website I am using two RokSprocket modules in showcase mode. Unfortunately if i assign them the class box1 (colored background) the arrows disappear since they have the same color of the background.
How can i assign them a different color?
Thank you very much.
Francesco - Regards, Francesco
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Use this code...
div.sprocket-features-arrows .arrow { background-color: white; }
This is how to create a custom CSS compatible with Gantry 4...
Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Francesco Nassetti
- Jr. Rocketeer
- Posts: 39
- Thanks: 2
- Thank you. I tried but it does not work.
- Last Edit: 8 years 4 months ago by Francesco Nassetti.
- Regards, Francesco
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
It does work, but you have a pre-existing syntax error in your custom CSS file.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Francesco Nassetti
- Jr. Rocketeer
- Posts: 39
- Thanks: 2
-
It works, thank you very much.
However it is not so nice. Could I change only the arrow color and not the background? - Regards, Francesco
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
The arrows come from an image sprite. So you would need to copy that sprite and change the colors within it, save it to a new location on your site and then override the existing CSS statement to swap out the image with your own sprite.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Francesco Nassetti
- Jr. Rocketeer
- Posts: 39
- Thanks: 2
- OK. I don't need to change the icon sprite. I need to use light theme icon if module is dark, and viceversa. Do you know how i can do that? Isn'it a bug of the module?
- Regards, Francesco
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
No, it's not a bug.
Use this code...
.layout-showcase .sprocket-features-arrows .arrow { background-image: url("../images/overlays/dark/list-arrows.png"); }
ALSO, remove the code I gave you before setting the background to white.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Francesco Nassetti
- Jr. Rocketeer
- Posts: 39
- Thanks: 2
-
OK now it works fine in the module in top position. Unfortunately the arrows disappeared in the module in bottom position with no background. I think the module should "understand" which icon set to use, if
class box1: light theme
class box 2 : dark theme
However i set also the second module to box1
Thank you very much for your help!
- Regards, Francesco
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13483
- Web Designer/Developer
-
Ok so to just change the first one in the showcase position change the CSS to this...
#rt-showcase .layout-showcase .sprocket-features-arrows .arrow { background-image: url("../images/overlays/dark/list-arrows.png"); }
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.063 seconds