Custom Autonav
Permalink
I'm a C5 newcomer, who with a little help created a theme based on Zurbs's Foundation 3.
I've added the Autonav block, however it is displaying a a vertical bulleted list.
I'm assuming I need a custom block template that will remove the bullets and display the list inline. Typically I'd have the list centred in the div.
I've discovered that I need to edit the file view.php in the folder siteroot/blocks/autonav/view.php.
From this point on I'm lost due to my lack of experience.
I've come across this but not sure how to edit the code.
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...
Any pointers will be gratefully received!
So any pointers would be very welcome.
I've added the Autonav block, however it is displaying a a vertical bulleted list.
I'm assuming I need a custom block template that will remove the bullets and display the list inline. Typically I'd have the list centred in the div.
I've discovered that I need to edit the file view.php in the folder siteroot/blocks/autonav/view.php.
From this point on I'm lost due to my lack of experience.
I've come across this but not sure how to edit the code.
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...
Any pointers will be gratefully received!
So any pointers would be very welcome.
Thanks for your time Irsah,
I'm lost again! Sorry I've only been studying web development for a couple of weeks!
I need to create a folder called "your_template_name_folder" in here: your_root/blocks/autonav/templates/
I then copy and paste view.php and view.css in this new folder.
Can now edit the copied view.php and view.css files to get my custom Autonav?
I've started to get to grips with HTML & CSS but I don't get PHP just yet. So what do I need to do to get an inline list?
Cheers!
I'm lost again! Sorry I've only been studying web development for a couple of weeks!
I need to create a folder called "your_template_name_folder" in here: your_root/blocks/autonav/templates/
I then copy and paste view.php and view.css in this new folder.
Can now edit the copied view.php and view.css files to get my custom Autonav?
I've started to get to grips with HTML & CSS but I don't get PHP just yet. So what do I need to do to get an inline list?
Cheers!
Hi,
Yes but before make sure the autonav block is using your new remplate by clicking the block > template > select your new template.
Then in your root/blocks/autonav/templates/your_new_template/view.css
you can start by adding
If however you want to view a sample core block which is displayed inline by default you can use the autonav "header menu" (it's also listed in the template drop down) and start from there. It's a little bit simpler with less codes.
Advise to use Firebug to check on the element classes so that you can easily target the name classes for styling.
Yes but before make sure the autonav block is using your new remplate by clicking the block > template > select your new template.
Then in your root/blocks/autonav/templates/your_new_template/view.css
you can start by adding
ul.nav ( display: block; list-style: none; /*remove bullets and list styles*/ margin:0; /*reset any margin by theme*/ padding:0; /*reset any padding by theme*/ } ul.nav li { display: inline-block; /*if you want the li item to be inline horizontally*/ margin:0; /*reset margin for a li item*/ padding:0; /*reset padding for a li item*/ }
If however you want to view a sample core block which is displayed inline by default you can use the autonav "header menu" (it's also listed in the template drop down) and start from there. It's a little bit simpler with less codes.
Advise to use Firebug to check on the element classes so that you can easily target the name classes for styling.
Well that worked a treat, thanks!
I copied over the view.php and created a new view.css and saved it in the appropriate directory.
Applied some css to ul.nav { and ul.nav li {... and I have a autonav that I can customise.
Next question. I have developed my own theme and I now have custom autonav with my own menu titles. How do I link autoav to the various pages in my site?
I copied over the view.php and created a new view.css and saved it in the appropriate directory.
Applied some css to ul.nav { and ul.nav li {... and I have a autonav that I can customise.
Next question. I have developed my own theme and I now have custom autonav with my own menu titles. How do I link autoav to the various pages in my site?
Well i think you can create more templates with autonav. On a certain page and styling, use a new template instead.
Use Stacks and the Global Areas block (marketplace). Build an autonav and assign a special template say tempA. Then a different stack another autonav with a another template say TempB.
On a page just call it with the add Stack option (tooltip) and assign autonav TempA or TempB.
To fully customize the autonav here's couple of clues. I think Zurb includes several drop down styles ans advice you to download the Amiant CSS3 Autonav in marketplace. Take a look how the developer applied special CSS characters with autonav and also using a customize and simpler .php codes.
Once you've analyze and compare, then you'll easily find how the customized easily using templates and overrides.
Use Stacks and the Global Areas block (marketplace). Build an autonav and assign a special template say tempA. Then a different stack another autonav with a another template say TempB.
On a page just call it with the add Stack option (tooltip) and assign autonav TempA or TempB.
To fully customize the autonav here's couple of clues. I think Zurb includes several drop down styles ans advice you to download the Amiant CSS3 Autonav in marketplace. Take a look how the developer applied special CSS characters with autonav and also using a customize and simpler .php codes.
Once you've analyze and compare, then you'll easily find how the customized easily using templates and overrides.
Well its getting clearer...slowly but surely.
I'm looking at themes > inspect and I see I have the following pages:
default.php, full.php, home.php, left_sidebar.php, right_sidebar.php and view.php
I quickly created a few test pages, some of which don't work. Both home.php and default.php do work whilst right_sidebar.php and full.php don't!
Changing the page type to sidebar, full etc reverts to default.php
Any ideas???
I'm looking at themes > inspect and I see I have the following pages:
default.php, full.php, home.php, left_sidebar.php, right_sidebar.php and view.php
I quickly created a few test pages, some of which don't work. Both home.php and default.php do work whilst right_sidebar.php and full.php don't!
Changing the page type to sidebar, full etc reverts to default.php
Any ideas???
You can attach/upload the pagetype file here (in .txt and not in .php file type) and probably can take a look.
Possible missing handles (in code) which the system could not grab hold of in your theme file or somewhere around there.
BTW, if a pagetype file do not have the nescessary handles, c5 will use the default handles you have assign in view.php file. That's most likely why certain pages is up and some are'nt. A good check with the pagetype file could be considered.
Possible missing handles (in code) which the system could not grab hold of in your theme file or somewhere around there.
BTW, if a pagetype file do not have the nescessary handles, c5 will use the default handles you have assign in view.php file. That's most likely why certain pages is up and some are'nt. A good check with the pagetype file could be considered.
It depends on what's your approach. What i'll always do is to copy the view.php and view.css and paste it in the directory structure you've enclosed. In addition add a template folder in your_root/blocks/autonav/templates/your_template_name_folder/ and include the two files there.
To edit at your edit page, click on the autonav block > tool tip > select template and find the "your_template_name_folder" and by now the autonav will follow what you have changed in the files you've copied.
Normally the css would be edited in the view.css file and if you want to include the stylings provided by Zurb, esp. the ul li classes, edit the view.php file.
In that file you will find the classes in the html output code (down below) and you can add your own ul li classes by following the instructions in the file (view.php)
Hope it helps.