ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down.
Read our Farewell Blog Post for more details.
SOLVED Box 1 background color seeting
-
-
- Bigfly
- Rocketeer
- Posts: 89
- Thanks: 12
- New on Rockttheme
-
Hello,
1/I set up my Base outline > style Accent Color 1 to #764122 al other set up are ok in Front from Base Outline with inherit to default
2/After that I gave to a module the advanced css class " box1 center rounded shadow"
3/ My problem is that in front I have an another background color with #563019
Visible for example here www.irresistible-riviera.fr/fr/infos/e-velo-bleu.box1.moduletable, .box1.widget, .box1.g-outer-box, .box1 > .g-content { background: #563019;
Any idea to solve this ?
Thanks
Screens of all that
This image is hidden for guests.
Please log in or register to see it.
This image is hidden for guests.
Please log in or register to see it.
This image is hidden for guests.
Please log in or register to see it.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
The box1 colors are only based on that accent color and then modifed. In this case the box1 background is accent-color-1 darkened by 8%.
So, if yoy want that color literally then you will need to add a statement in your custom.scss to override that.
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.
-
-
-
- Bigfly
- Rocketeer
- Posts: 89
- Thanks: 12
- New on Rockttheme
-
I just tried to put this in my custom.scss but it's crash the website...
Any suggestion?
Thanks
also this.box1 { &.moduletable, &.widget, &.g-outer-box, > .g-content { background: darken($box1-background, 0%); } }
.box1 > .g-content { background: darken($box1-background, 0%); }
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
You're writing scss - you don't need to do that but if you do want to then you need to import "dependencies" at the top of your custom.scss file first to give you access to the scss varaibles and mixins. Also your first statement is invalid as it has a superfluos comma in the selector.
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.
-
-
-
- Bigfly
- Rocketeer
- Posts: 89
- Thanks: 12
- New on Rockttheme
-
To hard and complicate for my css level...
I need to progress and should find an online CSS course maybe on open classroom
Your explaination are like chinese, this time for me...
But I had an idea, simply by put a 8% clearer color in my style online...It's look ok ?!
Thanks for the help and show me this variations.scss . Any docs or link about this?
Regards
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
1.
https://www.codecademy.com/learn/learn-sass
scss and sass are basically the same thing.
2. read the Gantry 5 docs.
3. start out learning css before moving on to scss. scss is way more powerful to write but it's syntax is a little harder to get to grips with when you're learning - if you learn CSS first you will then find it easier to make the move to scss after.
4. I only showed you the source scss so you understood it's not a literal use of the accent color 1 - it get's modified. You should never change any original template files.
5. so for just plain CSS you Use this code...
.box1.moduletable, .box1.widget, .box1.g-outer-box, .box1 > .g-content { background-color: #764122; }
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. -
The following users have thanked you: Bigfly
- 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.
-
-
-
- Bigfly
- Rocketeer
- Posts: 89
- Thanks: 12
- New on Rockttheme
-
How to say : just big thanks!
Yes I had read totaly and twice the Gantry 5 doc and saw all the video many time.
For the css, I had learn it by myself long years ago but I lost a lot. At the moment were the css was inline or in the header, html2 macromedia dreamweaver...
I took books at the library...to review the basics...
Days are to shorts...!
Thanks for the codeacademy link I will look at this.
Best Regards
This image is hidden for guests.
Please log in or register to see it.
-
Time to create page: 0.066 seconds