by
cowgirl » Wed Aug 26, 2015 4:16 pm
Thanks KK you gave me an excellent idea! Now I can do the management of the menu structure and complete styling with couch!
I use my Menu (index.php) to create the menu, the Skins (skins.php) to define my skins and Menu options (menu-options.php) to link the menu to the skins. In snippets/menu.php I'm outputting the menu and in css/styles.php I'm styling the menu using the skins.php values! Isn't that great?
Still planning to expand my skin options for the pages too
It took me some time to figure everything out, but it works like a charm now. I'm posting my code, just in case it might help anyone else.
skin.php
- Code: Select all
<?php require_once('couch/cms.php'); ?>
<cms:template title='Skins' executable='0'>
<!-- for each skin set a name, favicon and color -->
<cms:repeatable name='skins' >
<cms:editable name='cat_name' label='Category Name' type='text' /><br/>
<cms:editable name='favicon' label='Favicon' type="image" width='64' height='64'></cms:editable> <br/>
<cms:editable name='color' label='Color' type='text'/>
</cms:repeatable>
</cms:template>
<?php COUCH::invoke(); ?>
menu-options.php
- Code: Select all
<?php require_once('couch/cms.php'); ?>
<cms:template title='Menu Options' executable='0'>
<!-- connect the skins to the pages -->
<!-- set an empty variable so it won't give any problems concatinating in a loop -->
<cms:set skin_options='' scope='global' />
<!-- loop through the available skins in order to set the options -->
<cms:pages masterpage="skins.php">
<cms:show_repeatable 'skins' >
<cms:set skin_options="<cms:concat p1=skin_options p2=cat_name p3=' | ' />" scope='global' />
</cms:show_repeatable>
</cms:pages>
<!-- set an empty variable so it won't give any problems concatinating in a loop -->
<cms:set page_picker_options='' scope='global' />
<!-- loop through the available pages in menu maker in order to set the options -->
<cms:nested_pages masterpage="index.php">
<cms:set page_picker_options="<cms:concat p1=page_picker_options p2=k_nestedpage_name p3=' | ' />" scope='global' />
</cms:nested_pages>
<!--create the editable regions where skins and pages can be connected -->
<cms:repeatable name='link_style'>
<cms:editable type='dropdown'
name='page_picker'
label='Page'
opt_values="
<cms:show page_picker_options />
"
/>
<cms:editable type='dropdown'
name='category'
label='Categrory'
opt_values="
<cms:show skin_options />
"
/>
</cms:repeatable>
</cms:template>
<?php COUCH::invoke(); ?>
snippets/menu.php
- Code: Select all
<nav class="nav-main mega-menu">
<!-- loop through nested pages aka menu maker -->
<cms:nested_pages masterpage='index.php' depth='3' extended_info='1' include_custom_fields='1'>
<!-- tranfer the name of the current page in the loop to a global variable -->
<cms:set current_menu_item=k_nestedpage_name scope='global'/>
<!-- loop through the skins-->
<cms:pages masterpage='menu-options.php'>
<cms:show_repeatable 'link_style'>
<!-- if the page of the menu-options loop equals the current item in the index loop then set the current category to the connected category in the menu-options -->
<cms:if page_picker = current_menu_item >
<cms:set current_cat=category scope='global' />
</cms:if>
</cms:show_repeatable>
</cms:pages>
<!-- make the menu as desired and use the current_cat as a class you can style using a css couch template -->
<cms:if k_level_start >
<cms:if k_level='0'>
<ul class="nav nav-pills nav-main" id="mainMenu">
<cms:else_if k_level='1' />
<ul class="dropdown-menu <cms:show current_cat />
<cms:if k_is_active> active</cms:if><cms:if k_is_current> current</cms:if>
<cms:if k_immediate_children='3'> three-columns</cms:if>">
<cms:else />
<ul class="submenu">
</cms:if>
</cms:if>
<cms:if k_element_start >
<li class="<cms:show current_cat/>
<cms:if k_is_active> active</cms:if><cms:if k_is_current> current</cms:if>
<cms:if k_immediate_children gt '0' > dropdown</cms:if>">
<a class="<cms:show current_cat />
<cms:if k_is_active> active</cms:if><cms:if k_is_current> current</cms:if>
<cms:if k_immediate_children gt '0' > dropdown-toggle</cms:if>" href="<cms:show k_menu_link />"><cms:show k_nestedpage_title /></a>
</cms:if>
<cms:if k_element_end >
</a>
</li>
</cms:if>
<cms:if k_level_end >
</ul>
</cms:if>
</cms:nested_pages>
</nav>
css/styles.php
- Code: Select all
<?php require_once( '../couch/cms.php' ); ?>
<cms:content_type 'text/css' />
<cms:pages masterpage='skins.php'>
<cms:show_repeatable 'skins'>
header nav ul.nav-main ul.dropdown-menu.<cms:show cat_name />{
border-top: 4px solid <cms:show color />;
}
header nav ul.nav-main li.dropdown.<cms:show cat_name />:hover > a:after {
border-bottom: 10px solid <cms:show color />;
}
header ul.nav-pills > li a.active.<cms:show cat_name />,
#mainMenu li.<cms:show cat_name /> a:hover,
#mainMenu li.<cms:show cat_name /> a:hover i
{
color:<cms:show color />;
}
</cms:show_repeatable>
</cms:pages>
<?php COUCH::invoke(); ?>
and in my snippet/head.php I added the line
- Code: Select all
<link rel='stylesheet' href='<cms:show k_site_link />css/styles.php' type='text/css' />
