Autonav with custom header tag
Permalink
Hi
I have an autonav block and i want to add a h2 tag that can be set within the block editor.
I want to be able to add the same background color behind both the autonav ul and the h2 tag within a div. I know I can create an area in a template and add a class to that and place the h2/ul tags content in there but I don't want to create multiple templates with differently styled areas as the site has 100s of pages.
So, currently I can only style each individual h2 and ul tag. Is there a way to add dynamic calls to the database from the autonav templates so that I can set a h2 tag within the autonav block editor or something like it?
I have an autonav block and i want to add a h2 tag that can be set within the block editor.
I want to be able to add the same background color behind both the autonav ul and the h2 tag within a div. I know I can create an area in a template and add a class to that and place the h2/ul tags content in there but I don't want to create multiple templates with differently styled areas as the site has 100s of pages.
So, currently I can only style each individual h2 and ul tag. Is there a way to add dynamic calls to the database from the autonav templates so that I can set a h2 tag within the autonav block editor or something like it?
mh, I'm not sure what you want do do: You can just add a custom template to the autonav block and style it as you want. Within the template you can use PHP to achieve a dynamic styling depending on whatever value/database entry you want. Doesn't this solve your problem?
Hi
Yeah, basically I currently have been adding several autonav blocks to a sidebar area in a template. I have been adding a separate h2 tag with a content block above these autonavs within the same area in the template.
What i want is a div to go around each h2/autonav ul separately to apply a background color to. The only way to do this is to create separate areas in the template to wrap around the h2/autonav tags and apply a class and style to this container such as background-color: grey;.
However, I don't want to do this because i would then have to write lots of css that is attached to individual area in templates. I would then have to create multiple templates to create different styles for sidebars.
If I can create a autonav block with a dynamic h2 tag that I can define in the block editor i can wrap these with a container in the autonav template and apply an background color independent of the page template.
Many thanks for you response
Yeah, basically I currently have been adding several autonav blocks to a sidebar area in a template. I have been adding a separate h2 tag with a content block above these autonavs within the same area in the template.
What i want is a div to go around each h2/autonav ul separately to apply a background color to. The only way to do this is to create separate areas in the template to wrap around the h2/autonav tags and apply a class and style to this container such as background-color: grey;.
However, I don't want to do this because i would then have to write lots of css that is attached to individual area in templates. I would then have to create multiple templates to create different styles for sidebars.
If I can create a autonav block with a dynamic h2 tag that I can define in the block editor i can wrap these with a container in the autonav template and apply an background color independent of the page template.
Many thanks for you response
Hi jbag,
To better understand what you are asking for, please include more specific details and reply with screenshots/mockups of what you are describing.
To better understand what you are asking for, please include more specific details and reply with screenshots/mockups of what you are describing.
Hi
So, I have this code in a page template:
Which creates two areas. In those areas I have a content block with a h2:
And a autonav block with:
In order to have a background-color around both the h2 and the list I have (as far as I know) to create a style for the class .sidebarBox in the page template. But I want to have these styles independent of the templates. I will be creating many pages on the fly that will have different styles for these sidebar boxes and I don't want to create loads of different templates with different class names for these areas.
Ideally, I would like to just use a stack within an area like so:
with the following code added as blocks within the page editor:
I can do this and add new blocks to the stack. This would allow me to define styles in an external css and apply them to these blocks in the in page editor - independent of the template (yay!). The only problem I have run into doing this is that I can't add a h2 tag to a autonav custom template that can be set in the autonav editor on the cms.
So, is there a way to do this?
Also, is creating a few areas like:
with stacks of content within them and styles for that content the best way to create styles that are independent of templates as I have described?
So, I have this code in a page template:
<div class="sidebar">
<div class="sidebarBox">
<?php $a = new Area('sidebar1');
$a->display($c); ?>
</div>
<div class="sidebarBox">
<?php $a = new Area('sidebar2'); $a->display($c); ?>
</div>Which creates two areas. In those areas I have a content block with a h2:
<h2>Title</h2
And a autonav block with:
<ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul>
In order to have a background-color around both the h2 and the list I have (as far as I know) to create a style for the class .sidebarBox in the page template. But I want to have these styles independent of the templates. I will be creating many pages on the fly that will have different styles for these sidebar boxes and I don't want to create loads of different templates with different class names for these areas.
Ideally, I would like to just use a stack within an area like so:
<?php $a = new Area('sidebar'); $a->display($c); ?>
with the following code added as blocks within the page editor:
<div class="sidebarBox"> <h2>Title</h2 <ul> <li>Artist</li> <li>Fashion Designer</li> <li>Illustrator</li> <li>Photographer</li> <li>Graphic Designer</li> <li>Web Designer</li> <li>Animator</li> <li>Retail Designer</li> </ul> </div> <div class="sidebarBox"> <h2>Title</h2
Viewing 15 lines of 26 lines. View entire code block.
I can do this and add new blocks to the stack. This would allow me to define styles in an external css and apply them to these blocks in the in page editor - independent of the template (yay!). The only problem I have run into doing this is that I can't add a h2 tag to a autonav custom template that can be set in the autonav editor on the cms.
So, is there a way to do this?
Also, is creating a few areas like:
<div class="main">
<?php $a = new Area('mainColumnFirst');
$a->display($c); ?>
</div>
<div class="sidebar">
<?php $a = new Area('sidebar');
$a->display($c); ?>
</div>with stacks of content within them and styles for that content the best way to create styles that are independent of templates as I have described?
@jbag
"The only problem I have run into doing this is that I can't add a h2 tag to a autonav custom template that can be set in the autonav editor on the cms."
If you want to change the Auto-Nav block form and view, you can override them or copy the block and give it a new name and block handle.
I believe another approach would be simpler:
- in your "sidebarX" area, add a Page Title block with "Override page name with custom title?" checked, "Formatting Style" set to "H1", and the custom text entered for the h1 tag
- below the Page Title block, add an Auto-Nav block and configure the desired options
- add a custom class to your area that changes the background color and/or targets the Page Title block and Auto-Nav block within it
(Click on an area tab and choose "Edit Area Design" from the popup menu. A new menu bar will open, choose the gear icon "Custom CSS Classes, Block Name, Custom Templates and Reset Styles" on the right side. In the "Custom Class" text input, type in the name of the class without the leading dot (.), and then hit enter or click on the highlighted blue text.)
- the contents of the area will be wrapped in a div wrapper that has the custom class that you assigned to the area
Custom classes add div wrappers with the custom class and can be applied to areas, custom layouts, custom layout columns, blocks, and stacks.
"The only problem I have run into doing this is that I can't add a h2 tag to a autonav custom template that can be set in the autonav editor on the cms."
If you want to change the Auto-Nav block form and view, you can override them or copy the block and give it a new name and block handle.
I believe another approach would be simpler:
- in your "sidebarX" area, add a Page Title block with "Override page name with custom title?" checked, "Formatting Style" set to "H1", and the custom text entered for the h1 tag
- below the Page Title block, add an Auto-Nav block and configure the desired options
- add a custom class to your area that changes the background color and/or targets the Page Title block and Auto-Nav block within it
(Click on an area tab and choose "Edit Area Design" from the popup menu. A new menu bar will open, choose the gear icon "Custom CSS Classes, Block Name, Custom Templates and Reset Styles" on the right side. In the "Custom Class" text input, type in the name of the class without the leading dot (.), and then hit enter or click on the highlighted blue text.)
- the contents of the area will be wrapped in a div wrapper that has the custom class that you assigned to the area
Custom classes add div wrappers with the custom class and can be applied to areas, custom layouts, custom layout columns, blocks, and stacks.
