SOLVED Add Background Image Picker & Overlay to the “Styles” tab of all Outlines?
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
SOLVED Add Background Image Picker & Overlay to the “Styles” tab of all Outlines?
Posted 7 years 10 months ago-
I just want to add the possibility to add Bckg image - Overlay choice to all my existing Outlines
Struggling with this... (in Isotope Template)
First, I was able to add the Image Background choice in all existing Outlines “LAYOUTS” tab by following EXACTLY this tutorial —> docs.gantry.org/gantry5/advanced/customizing-theme-files
Saddly, witout having the same possibility in the “STYLES” tab of the Outlines, I can add background images to all Sections by the “LAYOUTS” tab but cannot use Parrallax settings.
For some obscure reason??? to use Parallax & Overlay, I need to have the Background Image possibility set in the “STYLES” tab of the Outline and Set the Parallax settings in the “LAYOUTS” tab (not really user friendly, two tabs for one setting...)
Meaning that I need also, to add the possibility to the “STYLES” tabs.
I was able in the following example (for the Showcase Section) to add to the “STYLES” tab of all Outlines the input for Back Image & Overlay by adding the bkg/overlay code to the file “showcase.yaml” in the template blueprints folder.
But the Inputs have no effects ?
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.
I can upload the site live, if neccesary (only a local Mamp test site) - Last Edit: 7 years 10 months ago by Patrick Toulze. Reason: SOLVED
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED Add Background Image Picker & Overlay to the “Styles” tab of all Outlines?
Posted 7 years 10 months ago-
You don't need to go to all of that trouble customising the template.
Instead just use CSS. There is a class on the body tag that tells you want outline is being used of the form "outline-99" where 99 is the outline ID.
You can therefore just use...
.outline-99 #g-page-surround { background-image: url("yourimageurlgoeshere"); }
Don't forget though that many of the other sections in Isotope either have a color or background on them, therefore you will need to make their background transparent and remove the image so you can see the underlying background image you added with the above CSS.
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: Empowermom
- 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.
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
Re: SOLVED Add Background Image Picker & Overlay to the “Styles” tab of all Outlines?
Posted 7 years 10 months ago-
Ok, I understand what you said
Your solution give the ability to add a background image behind All sections, Thanks for it, I keep it in my notes.
Can be usefull.
Can you use parallax on this total background ?
I will rephrase what I really want to do.
I just want to add the background image picker and the overlay opacity in the “Style” tab of any section of a specific or all outlines to be able to use parallax in the “Layout” tab after.
In my case, it’s the “showcase” section of the Home outline of the Isotope template.
I already take out the css gradient on it, I add the image picker and overlay opacity by an override to the “Style” Tab in
rt_isotope/custom/blueprints/styles/showcase.yaml by adding to it
background-image: type: input.imagepicker label: Background Image default: "gantry-media://backgrounds/header/img-01.jpg" overlay-opacity: type: input.text label: Overlay Opacity default: "0.5"
But adding the backgound image and selecting it as an overide of the “default Outline” don’t work.
I see no image and obviously cannot use the parallax settings in my “Layout” tab. - Last Edit: 7 years 10 months ago by Patrick Toulze.
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
Re: SOLVED Add Background Image Picker & Overlay to the “Styles” tab of all Outlines?
Posted 7 years 10 months ago- Hours of work, I check all posts, look at Gantry 5 documentation and still unable to add a simple and easy way to change the background of the “Showcase” section in the RT Template Isotope and be able to use parallax on it.
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED Add Background Image Picker & Overlay to the “Styles” tab of all Outlines?
Posted 7 years 10 months ago-
But you've only done half the job? You've created the new field and got it to show in admin. Now you need to use that new field in scss to actually write the CSS statement that will utilise that new field.
Have a look how it's done for the header. You will see that header.yaml (in /templates/rt_isotope/blueprints/styles) is the item that creates the fields in Gantry 5 admin. You successfully created an override for showcase.yaml to do much the same thing. But then the other thing you need to look at is _header.scss in /templates/rt_isotope/scss/isotope/ - you will see how the SCSS code use the header background image field. So... you need to do much the same thing for the _showcase.scss (by creating an override for that) so it uses the new fields you created in showcase.yaml override.
I still reiterate here... what you are doing here is an advanced theme customisation that really only a template developer would need to do. My alternate suggestion of just using CSS to do this would be much simpler.
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.
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
Re: SOLVED Add Background Image Picker & Overlay to the “Styles” tab of all Outlines?
Posted 7 years 10 months ago-
MrT, I’m so happy that I can cry. It work perfectly. I knew it was something simple.
Thanks, Thanks & Thanks again...
I still reiterate here... what you are doing here is an advanced theme customisation that really only a template developer would need to do. My alternate suggestion of just using CSS to do this would be much simpler.
I somewhat disagree with you on that point.
As a web devellopper, I NEVER used a template as is. I think of the best design base on what the customer need. Next, I choose a RT-Template that are technically close to what my design impose and transform the template to reflect EXACTLY my design.
I’m putting together a brand new site for an important scientific community in Montreal and the design I want to acheive NEED the ability of background-image/Overlay opacity & Parallax in the frontal “Showcase” section.
With Gantry 5 this flexibility should be built-in to all sections, or at least get a clear “How to” documentation.
To have this possibility directly in the administration bring the ultimate flexibility to your templates for the web designer to produced highly personalized web sites.
A question;
How can you, if it’s possible, to acheive the same effect/possibility —> background-image/Overlay opacity & Parallax only in CSS?
This is an important question, as it will permit to add it to some parts/images of the site that are not control by the Gantry Administration.
Good Day to The RocketTheme community ! - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED Add Background Image Picker & Overlay to the “Styles” tab of all Outlines?
Posted 7 years 10 months ago-
Ok great... I'm glad I could help
I prefer to use CSS for the majority of my customisations unless I am writing something from scratch. By picking a template as a starting point the presumption is it's already a good fit to begin with and just needs tweaking to get what you need. So for me once i've elected to use a template, I would stick to CSS unless I really couldn't do what I wanted.
To add a background image to a section is easy in CSS.
#g-showcase { background-image: url("upirbackgroundimageurlgoeshere");}
So one line of CSS does that.
Parallax is something that is controlled by enllax.js javascript and that is activated by applying the relevant classes to the section (so it's not done in CSS). Once you have an image on the section you can get enllax.js parallax to work on it. (see enllax.js documentation on the web to learn more).
Regards, Mark. -
The following users have thanked you: Patrick Toulze
- 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.
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
Re: SOLVED Add Background Image Picker & Overlay to the “Styles” tab of all Outlines?
Posted 7 years 10 months ago- Thanks
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
Time to create page: 0.054 seconds