0
Welcome Guest! Login
0 items Join Now

Styling New Section Properly

    • Dan Walker's Avatar
    • Dan Walker
    • Hero Rocketeer
    • Posts: 498
    • Thanks: 14
    • Designer/Developer

    Styling New Section Properly

    Posted 1 month 3 weeks ago
    • 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: 1 month 3 weeks ago by Dan Walker.
    • Dan Walker - Web Designer & Developer @ Top Webs Network
      Custom Joomla & Wordpress Websites
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22446
    • Thanks: 2669
    • Web Developer

    Re: Styling New Section Properly

    Posted 1 month 3 weeks ago
    • Dan Walker's Avatar
    • Dan Walker
    • Hero Rocketeer
    • Posts: 498
    • Thanks: 14
    • Designer/Developer

    Re: Styling New Section Properly

    Posted 1 month 3 weeks ago
    • 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
  • Re: Styling New Section Properly

    Posted 1 month 3 weeks ago
    • 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's Avatar
    • Dan Walker
    • Hero Rocketeer
    • Posts: 498
    • Thanks: 14
    • Designer/Developer

    Re: Styling New Section Properly

    Posted 1 month 3 weeks ago
    • 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
  • Re: Styling New Section Properly

    Posted 1 month 3 weeks ago
    • 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's Avatar
    • Dan Walker
    • Hero Rocketeer
    • Posts: 498
    • Thanks: 14
    • Designer/Developer

    Re: Styling New Section Properly

    Posted 1 month 3 weeks ago
    • 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
  • Re: Styling New Section Properly

    Posted 1 month 3 weeks ago
    • 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's Avatar
    • Dan Walker
    • Hero Rocketeer
    • Posts: 498
    • Thanks: 14
    • Designer/Developer

    Re: Styling New Section Properly

    Posted 1 month 2 weeks ago
    • 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
  • Re: Styling New Section Properly

    Posted 1 month 1 week ago
    • 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.106 seconds