How to create a colourful navbar

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
User avatar
caigner
Forum Members
Forum Members
Posts: 16
Joined: Sun Aug 16, 2020 5:29 am

How to create a colourful navbar

Post by caigner »

Design specifications call for a colourful navbar like so:
http://fotos.sys-admin.at/navbar_tiny.png

The background colour for a nav entry can be entered into the
"Extra Page Attribute 1" field, the text colour into "Extra Page Attribute 2".

I know I can access this data with

Code: Select all

{page_attr key='extra1'}
and

Code: Select all

{page_attr key='extra2'}
Now my question: Where do I go from here? I know I should somehow transfer these colours to the navigator module, but I don't know, how.

I hope someone can nudge me into the right direction.

Regards,
Christian
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1032
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: How to create a colourful navbar

Post by DIGI3 »

In your navigator template you can access it with {page_attr page=$node->alias key='extra1'} or possibly {$node->extra1}

You could use that as a class name for the link or li or whatever.
Not getting the answer you need? CMSMS support options
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3273
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: How to create a colourful navbar

Post by velden »

From the help of the Navigator module:
The node object:
Each nav template is provided with an array of node objects that match the criteria specified on the tag. Below is a description of the members of the node object:

$node->id -- The content object integer ID.
$node->type -- The type of the node. i.e: content, link, pagelink, etc.
$node->url -- URL to the content object. This should be used when building links.
$node->accesskey -- Access Key, if defined.
$node->tabindex -- Tab index, if defined.
$node->titleattribute -- Description, or Title attribute (title), if defined.
$node->hierarchy -- Hierarchy position. (i.e. 1.3.3)
$node->default -- TRUE if this node refers to the default content object.
$node->menutext -- Menu Text
$node->raw_menutext -- Menu Text without having html entities converted
$node->alias -- Page alias
$node->extra1 -- This field contains the value of the extra1 page property, unless the loadprops-parameter is set to NOT load the properties.
$node->extra2 -- This field contains the value of the extra2 page property, unless the loadprops-parameter is set to NOT load the properties.
$node->extra3 -- This field contains the value of the extra3 page property, unless the loadprops-parameter is set to NOT load the properties.
$node->image -- This field contains the value of the image page property (if non empty), unless the loadprops-parameter is set to NOT load the properties.
$node->thumbnail -- This field contains the value of the thumbnail page property (if non empty), unless the loadprops-parameter is set to NOT load the properties.
$node->target -- This field contains Target for the link (if non empty), unless the loadprops-parameter is set to NOT load the properties.
$node->created -- Item creation date
$node->modified -- Item modified date
$node->parent -- TRUE if this node is a parent of the currently selected page
$node->current -- TRUE if this node is the currently selected page
$node->children_exist -- TRUE if this node has any children at all.
$node->children -- An array of node objects representing the displayable children of this node. Not set if node does not have children to display.
$node->has_children -- TRUE if this node has any children that could be displayed but are not being displayed due to other filtering parameters (number of levels, etc).
(optional) loadprops="" - Use this parameter when NOT using advanced properties in your navigator template. This will disable the loading of all of the content properties for each node (such as extra1, image, thumbnail, etc.). This will dramatically decrease the number of queries required to build a navigation, and increase memory requirements, but will remove the possibility for much more advanced displays
I think that is enough to get you going. If not, don't hesitate to tell us what isn't clear.

On a side note: this module provides a color picker you can include on the page editor: http://dev.cmsmadesimple.org/projects/ecb2

It can NOT be used together with the extra1, 2, 3 attributes but with this tag you can use the chosen values inside a Navigator template: https://docs.cmsmadesimple.org/tags/cms ... /page_attr

This would useful if editors that don't know/understand color codes need to be able to change them.
User avatar
caigner
Forum Members
Forum Members
Posts: 16
Joined: Sun Aug 16, 2020 5:29 am

Re: How to create a colourful navbar

Post by caigner »

Thank you both! I am totally new to CMSms and so a lot of what you suggested or what is in the help pages written, leaves me with more questions.

Like this one:

I have installed the ECB2 module. Now, how do I include the color picker on the page editor? Where in CMSms is the place where I should make the changes?

On a side note: I wish there were more YouTube-Tutorials dealing with this kind of questions. :-)
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3273
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: How to create a colourful navbar

Post by velden »

Although it won't cover your questions we do have a very basic tutorial which may help in understanding how designs, templates, style sheets, navigation(s) and pages are connected.

https://docs.cmsmadesimple.org/tutorial ... troduction

If I were you I'd start with using the extra1 and extra2 attributes and once you have it working proceed with ECB2.

For ECB2 the changes need to be made in the page TEMPLATE.

From the help:
{content_module module="ECB2" field="color_picker" block="test1" label="Color" default_value="#000000"}
But as you don't want the value to be displayed you need to assign it to a variable (not tested), and I'll change the block name to 'color1'

Code: Select all

{content_module module="ECB2" field="color_picker" block="color1" label="Color" default_value="#000000" assign='dummy_var'}
From the Navigator template you should be able to access the value of this content block (field) by using something like:

Code: Select all

...
{page_attr key='color1' page=$node->alias assign='myFirstColor'}
Color: {$myFirstColor}
...
Locked

Return to “Layout and Design (CSS & HTML)”