SOLVED Body boxed background customize
-
-
- Bigfly
- Rocketeer
- Posts: 89
- Thanks: 12
- New on Rockttheme
-
Thanks again for your answer,
As indicated in the yesterday post below. I am ok to apply the body background. Problem is that I doenst need the background on all the page (as indicated on previus post, screencapture private and public), only around the main corpus off the web site...
This image is hidden for guests.
Please log in or register to see it.
Your solution give me this (not what I want)
This image is hidden for guests.
Please log in or register to see it.
Bigfly wrote:1/ I follow your steps but with no succes (erase cache etc...)Thanks
This image is hidden for guests.
Please log in or register to see it.
When I apply for example on default red color in default > styles > base styles > base background it's give be a red background in the body not around like I wish :
This image is hidden for guests.
Please log in or register to see it.
What I would like
This image is hidden for guests.
Please log in or register to see it.
Thanks
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Ok, so all you need to do is add a background color to the section shown in the middle of your page. Also, I did state that you would have to use custom.scss to add the space at the top by adding paddding to the g-page-surround container.
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
-
Thanks for the reply.
Could you give me the custom css I have to put in the Page setting > Atoms> Custom CSS?
Using the inspector HTML/CSS on Firefox, it seems that I can't find the bloc where to apply : g-container ? g-page-surround ? g-grid ?
I tried this with no effect :
"
g-container { background: #a6aaad !important; }
body { background: #a6aaad !important; }
g-page-surround { background: #a6aaad !important; }
g-grid { background: #a6aaad !important; }
"
This image is hidden for guests.
Please log in or register to see it.
Thanks
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
1. custom CSS is done in a custom CSS file - 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.
2. You don't need CSS to change color of the section - just change it on the styles tab of the base outline.
3. Your CSS is all incorrect - g-page-surround is an id so you would write #g-page-surround in a CSS selector. g-container is a class so you would write .g-container in a CSS selector. g-container is user in a zillion places in Gantry 5 so your CSS would be way too generic anyway, as is g-grid. Sorry but I can't teach you how to write html and CSS in this forum either - there are plenty of online resources to help you learn both. To add the padding you would write:
#g-page-surround { padding-top: 2rem; padding-bottom: 2rem; }
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
-
Hello Mr T,
Thank you for your answers and help which are useful to me.
1 / Preliminary question. After reading this docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
and this (Atoms> customs CSS)
docs.gantry.org/gantry5/configure/page-settings
What is the difference between these two procedures? Differences? Advantages?
2 / I applied precisely your last instruction (version currently online) but this also fills the center of the page whereas I want (see my previous screenshots) only the background around the site.
Result
This image is hidden for guests.
Please log in or register to see it.
What I would like
This image is hidden for guests.
Please log in or register to see it.
3 / I did a test in Default> Page setting> Atoms> customs CSS with:
# g-page-surround {
background: # a6aaad! important;
padding-top: 2rem;
padding-bottom: 2rem;
}
The result is approaching what I want except that the sidebar right part, when empty, also includes the background.
This image is hidden for guests.
Please log in or register to see it.
Ps: when I apply a "border: solid;" this applies to the whole page and not the central part around which I want to apply this background.
I imagine that I have to find the name of the container surrounded in blue with photoshop below ...
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.
Thank you - Last Edit: 3 years 4 months ago by Bigfly.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
1. I would always use a custom.scss file for everything. If you add CSS on the page settings tab as an asset or in the custom css/js atom then technically you could make the content page specific (if you add it on other outlines that then base outline). But really you don't want that as it gets very confusing for everyone. Also, if you want to make a CSS statement page specific then you can use a class (in the body tag) to further qualify your CSS selector (e.g. itemid-123 would tell you the menu item and outline-123 would tell you the outline). So, my advice is ALWAYS to use the one custom.scss file for everything.
2. Sorry without access we're going to be here forever going back and forth - I've given you the best advice I have given the information I have and the guesses I've made about your internal site configuration. "border" is not the solution in this case to the best of my knowledge.
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
-
Thank you for your reactivity and responses. All this, little by little, allows me to better understand and take control of Gantry and Rockettheme.
1 / Well noted for that. I note on the previous test that the effects are not identical without understanding why ...
2 / OK thank you not to close this topic, if another user passes by there and to a solution to propose that could be useful.
If I find in a few days or months I will give the info here ...
The fairly simple idea being just to have the site in a block / box (x%) and apply effects around it (background, border, shadow etc ...). As here on the old version of the site under a different template
This image is hidden for guests.
Please log in or register to see it.
Thank you anyway and see you soon for more questions. - Last Edit: 3 years 4 months ago by Bigfly.
-
Time to create page: 0.068 seconds