Add a section to the layout

[JFS]

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]

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]

This reply has been marked as private, meaning that only the original poster and forum moderators can see the content of the reply.