Forums

Custom Theme styling Autonav

Permalink
Hi there, please help, I am now desperate! I am converting a html theme to Concrete5 version 5.7.5.1. I am trying to style the autonav using the themes custom css but seem to be failing miserably. Could anyone possibly point me in the right direction as to where I am going wrong? Please bear in mind I am a designer more than developer so please go easy on me!

Here is the css, most of which I will not be using as I cannot figure out how to apply more than one colour to the autonav and will drop the megamenu as I have no idea how to make that an option either. Really I just need to know how to link this to the autonav view.php so it works.

/********************************************************COLOR************************************************/
.nicdark_menu > li > a:hover { color: #868585; }
.nicdark_menu > li > a { color: #a4a4a4; }
/*divider and triangle color*/
.nicdark_menu > .grey > a:after, .nicdark_menu > .grey .sub-menu li:first-child:before, .nicdark_menu > .grey .sub-menu li ul li:first-child:before{ color: #f9f9f9; }
.nicdark_menu > .greydark > a:after, .nicdark_menu > .greydark .sub-menu li:first-child:before, .nicdark_menu > .greydark .sub-menu li ul li:first-child:before{ color: #495052; }
.nicdark_menu > .green > a:after, .nicdark_menu > .green .sub-menu li:first-child:before, .nicdark_menu > .green .sub-menu li ul li:first-child:before{ color: #6fc191; }
.nicdark_menu > .blue > a:after, .nicdark_menu > .blue .sub-menu li:first-child:before, .nicdark_menu > .blue .sub-menu li ul li:first-child:before{ color: #74cee4; }
.nicdark_menu > .violet > a:after, .nicdark_menu > .violet .sub-menu li:first-child:before, .nicdark_menu > .violet .sub-menu li ul li:first-child:before{ color: #c389ce; }
.nicdark_menu > .orange > a:after, .nicdark_menu > .orange .sub-menu li:first-child:before, .nicdark_menu > .orange .sub-menu li ul li:first-child:before{ color: #ec774b; }
.nicdark_menu > .red > a:after, .nicdark_menu > .red .sub-menu li:first-child:before, .nicdark_menu > .red .sub-menu li ul li:first-child:before{ color: #e16c6c; }
.nicdark_menu > .yellow > a:after, .nicdark_menu > .yellow .sub-menu li:first-child:before, .nicdark_menu > .yellow .sub-menu li ul li:first-child:before{ color: #edbf47; }
/*dropdown*/
.nicdark_menu > .yellow > .sub-menu li{ background-color: #edbf47; }
.nicdark_menu > .grey > .sub-menu li{ background-color: #f9f9f9; }
Viewing 15 lines of 137 lines. View entire code block.


Here is the view.php as I have messed it up so far:

<?php defined('C5_EXECUTE') or die("Access Denied.");
$navItems = $controller->getNavItems();
$c = Page::getCurrentPage();
/**
 * The $navItems variable is an array of objects, each representing a nav menu item.
 * It is a "flattened" one-dimensional list of all nav items -- it is not hierarchical.
 * However, a nested nav menu can be constructed from this "flat" array by
 * looking at various properties of each item to determine its place in the hierarchy
 * (see below, for example $navItem->level, $navItem->subDepth, $navItem->hasSubmenu, etc.)
 *
 * Items in the array are ordered with the first top-level item first, followed by its sub-items, etc.
 *
 * Each nav item object contains the following information:
 *   $navItem->url        : URL to the page
 *   $navItem->name       : page title (already escaped for html output)
Viewing 15 lines of 109 lines. View entire code block.


The menu and navigation use superfish.min.js and tinynav.min.js for their functionality. I have also attached two screenshots showing how the menu should look (as it does in the html version) and how it is looking at the moment using the autonav.

Realise I am asking a lot here, but would really appreciate and and all help!

Steve.

2 Attachments

 
StevieB replied on at Permalink Reply 1 Attachment
I have added nicdark_bg_orange sf-with-ul to the following line:
//Put all classes together into one space-separated string
   $ni->classes = implode("nicdark_menu sub-menu nicdark_bg_orange  sf-with-ul", $classes);
}


which is now giving the background colour to the drop boxes as desired. However, the first link in the second level drop down is still uncoloured and the shadow and arrow of the first dropdown is still all wrong (see attached).

Please help??
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi StevieB,

What is the link to your site?
StevieB replied on at Permalink Reply
At the moment it is on my home server but I will be moving it up to the host later on. If you think you can help I will PM you with access to the server and the C5 installation? I think I just got in over my head thinking it would be a lot easier to make them work together.
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
When your site is available to be viewed, I can take a look.
StevieB replied on at Permalink Reply
Thanks, I really do appreciate that! I will PM you shortly once it is on the server.