Home Forums Template Support Add a section to the layout

Viewing 3 posts - 1 through 3 (of 3 total)

  • JFS
    Subscriber

    What’s the best practice to add a section to the layout. I’d like to add a ‘top’ section to the Green Nature template to have a second menu there.
    Any advice?

    CU J.


    Tony
    Moderator

    Hi there,
    1. You need to define the top section via template_folder/gantry/theme.yaml
    2. Create a new top style configuration at template_folder/blueprints/styles/top.yaml
    3. Adding new color variable for top section. Open template_folder/scss/configuration/_colors.scss then add

    // Top
    $top-background:				#484a4e !default;
    $top-text-color:				#ffffff !default;
    

    above the header color variables.
    4. Adding new scss file for top section. Create _top.scss file and add it to template_folder/scss/greennature/
    Open _top.scss file then add

    #g-top {
    	background: $top-background;
    	color: $top-text-color;
    	position: relative;
    	.g-content.g-particle {
    		margin: 0 $content-margin;
    		padding: 7px $content-padding;
    	}
    }
    
    @media print {
    	#g-top {
    		background: #fff !important;
    		color: #000 !important;
    	}
    }
    

    5. Open template_folder/scss/greennature.scss then add

    // Top
    @import "greennature/top";

    6. Now, if you check the style configuration, you can see the Top panel style appear above the header, like this https://imgur.com/VqejtlE
    7. In the next step, we will add the top section into an existing layout or global layout.
    A: Adding top section for global default layout (base outline).
    here the default layout https://imgur.com/DjXufNq
    Now open template_folder/layouts/default.yaml then add
    /top/: { }
    then reload the default layout. See https://imgur.com/0AlRHH9
    Do the same for the layout that you wish to implement the top section.
    B: Adding top section for existing layout.
    You can check the current layout ID then modify it. For example, the home page layout id look like http://domain/greennature/administrator/index.php?option=com_gantry5&view=configurations/23/layout&theme=jl_greennature_pro&5cd303cc1135b87ad7b25d3c57f18b9c=1
    As you can see, 23 is special layout id for home page.
    Now open template_folder/custom/config/23/layout.yaml and do the same step above.

    Please wait, I will add a custom template version for you to take a look how it works


    Tony
    Moderator
    This reply has been marked as private, meaning that only the original poster and forum moderators can see the content of the reply.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

80+ templates updated for Joomla 5.1.4 and JoomLead particles 2.3.0 Download
Flash Sale. Get Up to 25% Off - Coupon: FLASH25 Shop Now