Styling New Section Properly
-
-
- Dan Walker
- Elite Rocketeer
- Posts: 529
- Thanks: 21
- Designer/Developer
-
I have added a new section (bottom) to Callisto. I have tried to do overrides to make the Admin Section Styles work properly, but am having issues. There are a lot of places to add the section and not sure what I'm doing.
I've added it to _colors.scss, _bottom.scss, presets.yaml, theme.yaml and bottom.yaml and the scss is imported into my custom.css. Maybe some others, I'm getting really confused. It appears in the Section Styles, but doesn't seem to have any effect when I change the color there.
Could you tell me what files I need to change to make this work like the other sections in the template?
I'm giving access in the secure tab. Thanks.
PS: I'm trying to get it (bottom section) to work with the Home-H outline, which is a dropdown under the Home menu item. - Last Edit: 4 years 4 months ago by Dan Walker.
- Dan Walker - Web Designer & Developer @ Top Webs Network
Custom Joomla & Wordpress Websites
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- Did you imported bottom_scss file to the custom.scss file?
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Dan Walker
- Elite Rocketeer
- Posts: 529
- Thanks: 21
- Designer/Developer
- Yes, _bottom.scss is imported into custom.scss. I've given you access in secure to check out my files.
- Dan Walker - Web Designer & Developer @ Top Webs Network
Custom Joomla & Wordpress Websites
-
-
-
- Reggie Simmons
- Preeminent Rocketeer
- Posts: 5200
- Thanks: 530
-
Did you already get this addressed? It seems it is working on your site. Grabbing the right colors as shown in your admin:
background: #ecbc2e; color: #878787;
I added a configuration directory to your custom/scss folder and added the same _colors.scss file there. But it seems it was already working even before that. - Kind regards,
Reggie
Learn to code for free.
www.freecodecamp.org
-
-
-
- Dan Walker
- Elite Rocketeer
- Posts: 529
- Thanks: 21
- Designer/Developer
-
Yes, I got it to work. Made a mistake in the bottom.yaml file.
What is the purpose of the gantry/theme.yaml file? Does a new section have to added in the admin section at the bottom? - Dan Walker - Web Designer & Developer @ Top Webs Network
Custom Joomla & Wordpress Websites
-
-
-
- Reggie Simmons
- Preeminent Rocketeer
- Posts: 5200
- Thanks: 530
- No, the theme.yaml file serves no purpose in creating an new section (and furthermore cannot be added to /custom/).
- Kind regards,
Reggie
Learn to code for free.
www.freecodecamp.org
-
-
-
- Dan Walker
- Elite Rocketeer
- Posts: 529
- Thanks: 21
- Designer/Developer
-
I would suggest adding to the G5 documentation how to add new sections to the Admin Styles/Section Styles tab , which is not obvious. My steps (took me about half a day to figure out) are:
Adding New Sections
Create a layout preset ( docs.gantry.org/gantry5/advanced/creating-layout-presets ) with the new section and place in /custom/layouts/new-preset.yaml
Load preset without particles for outlines you wish to add section.
/custom/blueprints/styles/section.yaml to add to admin styles page
/custom/scss/_section.scss to apply new color to page
import _section.scss into custom.scss
layout presets are named in the load box by their file names, not name: in file
/custom/gantry/presets.yaml if you want to change colors per preset
Thanks. - Dan Walker - Web Designer & Developer @ Top Webs Network
Custom Joomla & Wordpress Websites
-
-
-
- Reggie Simmons
- Preeminent Rocketeer
- Posts: 5200
- Thanks: 530
- Typically adding a new section just requires adding it to the appropriate layout.yaml file. And then you just add the necessary CSS via custom.scss (instead of adding blueprint with admin style). But I can try to look into adding something like this to the docs after the holiday.
-
The following users have thanked you: Dan Walker
- Kind regards,
Reggie
Learn to code for free.
www.freecodecamp.org
-
-
-
- Dan Walker
- Elite Rocketeer
- Posts: 529
- Thanks: 21
- Designer/Developer
- I'm adding blueprint styles to the admin for the section color styles. The styles in admin section do not seem to be in any order. How can I order them in keeping with their position on the page?
- Dan Walker - Web Designer & Developer @ Top Webs Network
Custom Joomla & Wordpress Websites
-
-
-
- Reggie Simmons
- Preeminent Rocketeer
- Posts: 5200
- Thanks: 530
- I've never been aware of any way to order these styles in the admin (I've asked our theme developers though).
- Kind regards,
Reggie
Learn to code for free.
www.freecodecamp.org
-
Time to create page: 0.078 seconds