Styling Auto-Nav Guide for Beginners
Permalink 1 user found helpful
Hello C5 nation,
I'm sharing this for every new C5 newbie who (like me) had a hard time styling the auto-nav block to make it look like your static html design.
First Step:
Under site_root > concrete > blocks > autonav, copy the file named view.php. We're going to modify it later on.
Second Step:
Now go to site_root > blocks. In that folder, create a new folder called "autonav". Open the autonav folder you just created and create another folder in it called "templates". In your new templates folder, create another folder called "my_templates" (or you can call it any way you want). Now open your my_template folder and copy your view.php file there.
Third Step:
Open your view.php file and go down to where it says:
echo '<ul class="nav">';
It should be near the end of the document.
The only thing you need to do now is change that class name for the name you used in your custom design. In my case, I used a class named .nav-header to style my main menu. So I replaced the class from:
echo '<ul class="nav">';
to
echo '<ul class="nav-header">';
That's it! Save the document, refresh the page and your navigation will be styled according to your css.
Hope this help a little. Peace!
I'm sharing this for every new C5 newbie who (like me) had a hard time styling the auto-nav block to make it look like your static html design.
First Step:
Under site_root > concrete > blocks > autonav, copy the file named view.php. We're going to modify it later on.
Second Step:
Now go to site_root > blocks. In that folder, create a new folder called "autonav". Open the autonav folder you just created and create another folder in it called "templates". In your new templates folder, create another folder called "my_templates" (or you can call it any way you want). Now open your my_template folder and copy your view.php file there.
Third Step:
Open your view.php file and go down to where it says:
echo '<ul class="nav">';
It should be near the end of the document.
The only thing you need to do now is change that class name for the name you used in your custom design. In my case, I used a class named .nav-header to style my main menu. So I replaced the class from:
echo '<ul class="nav">';
to
echo '<ul class="nav-header">';
That's it! Save the document, refresh the page and your navigation will be styled according to your css.
Hope this help a little. Peace!
After adding the auto-nav block, click and select "Custom template". You're custom template name should appear in the dropdown menu. Select it and there you go.