SOLVED Duplicate Styles
-
-
- jayjayr
- Hero Rocketeer
- Posts: 330
- Thanks: 1
-
Hi,
I'm using interstellar template and would like to have 3 modules in above position using 3 different images for each one. Is it possible to duplicate the Above Styles to have 3 of them each one with a different background.
Thank You
Jay - Last Edit: 6 years 8 months ago by jayjayr.
- Trying to learn something every day
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
If you mean you want extra sections? then that requires programming changes to YAML and it's a very advanced subject
http://docs.gantry.org/gantry5/advanced/creating-layout-presets
.
Alternately you can add extra rows to a section ("+" sign on section) and then add other module positions to the layout, your could also put the "backgrounds" on whatever elements you want using custom CSS.
I need to see exactly what you are trying to do (mockup screenshot would help) and to also see your site so Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
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.
-
-
-
- jayjayr
- Hero Rocketeer
- Posts: 330
- Thanks: 1
-
Hi Mark,
Thank you for your answer.
The site is its very beginning, I'm sending address and credentials in secure tab.
What I want do is having the 3 positions in Above where you can see the titles Empresa and Visão and there is a third one to enter. Each of thsese textes are using the Above Style but I would like to have each one with a different background image. I though about duplicating the Style but I don't know if it is possible. Or any other solution that allows to hace the same effect.
Kind regards,
Jay - Trying to learn something every day
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
You've basically assigned two modules into ONE position in ONE section of your layout.
If you want those modules to have different backgrounds (or any other styling) then they need to be in separate sections on your layout (which in turn means that will require TWO positions - one for each section). Checking your layout there are two empty sections that you are currently not using - so there should be no problem in doing this.
The "showcase" and "utility" sections do not have a "background image" field on the styles tab - but once you have added the modules to those sections it's easy to add that with custom CSS.
#g-showcase { background-image: url("youimageurlgoeshere"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
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. - 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.
-
-
-
- jayjayr
- Hero Rocketeer
- Posts: 330
- Thanks: 1
-
Thank you Mark, I understood.
Now I'm fighting with the dimensions of the images to go in these positions. Can you please point any address where I can find such information? The documentation link in the demo template is not working.
Kind regards,
Jay - Trying to learn something every day
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
You won't find documentation on that because it depends on the layout your have set for the section but as a general rule of thumb if you are expecting a background image to fit edge to edge of your browser then it needs to be at least 1950px wide. Height can be anything that you want.
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.
-
-
-
- jayjayr
- Hero Rocketeer
- Posts: 330
- Thanks: 1
-
Thank you Mark.
One more question please. Since I use a background image in showcase and in utility like you recommended in scss they will stick for all pages, right? Is it possible to use the background image in showcase (or other position) in the main page and use it blanck or any other in another page?
Kind regards,
Jay - Trying to learn something every day
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Yes, if you qualify the CSS selector that I gave you a little more to make it page specific.
There is a class on the body tag that tells you the menu item that is being used so you can use that...
.itemid-216 #g-showcase { background-image: url("youimageurlgoeshere"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
itemid-216 being the home page menu item.
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.129 seconds