Introduction:

The files for the top navigation are on the server and not accessed through the content management system. When you view source for the page, you are viewing the rendered code. To see the reference to the navigation, you need to go to /public_html/index.php

This navigation was initially generated by a widget but the navigation is now hard-coded. As a result, the names that are related to widgets and the CMS can be changed without issue.

There are 2 main files that control the top navigation.

header.php

Function: To change text and add new navigation items.

Location: /_ingredients/templates/includes/header.php

Note: In this file, the <li class> as in <li class=”lw_item_7 lw_files_php lw_item_9f4ac956”> is meaningless and can be renamed without issue as long as the reference is correct in palette.less.

palette.less

Function: To change colors in navigation and colors in groups.

Location: /_ingredients/themes/global/import/palette.less

If you are updating the color palette, you must update the colors throughout the file. There are styles that reference the color with different levels of saturation.

.palette(
@color1: #491C74; //purple
@color2: #08671b; //green
@color3: #0A54B3; //blue
@color4: #B12586; //pink
@color5: #006E6A; //teal
@color6: #B3191E; //red
@color7: #1D2C5D; //dark blue
)

The Homepage group uses the same color as the About group (purple). All new groups that are not referenced through the navigation but found through a site search, default to purple.

Although the colors have been defined for the different areas of the site, there may be occasion when you may have to recolor a group.

To recolor a group, you may do one of the following:

A. Call the group in the code.

The group name is not the name of the group in the CMS nor the directory name.

View source code to get group name. Blanks in CMS Public Name field convert to underscores.

Example 1
Public Name: Campus Life
Group Name: group_campus_life

&.group_campus_life {
.accent-color(@color-campus, @color-campus-dark);

Example 2
Public Name: Give to Purchase
Group Name: group_give_to_purchase

&.group_give_to_purchase {
.accent-color(@color-give, @color-give-dark);
}

B. Reference it with the body tag, which references the directory name.

View source code to confirm. Taxonomy for directory name utilizes hyphens rather than underscores for spaces.

Example 1
Public Name: Campus Life
Directory Name: /campus-life/
Body Name: body_campus-life

&.body_campus-life {
.accent-color(@color-campus, @color-campus-dark);
}

Example 2
Public Name: Give to Purchase
Directory Name: /give-to-purchase/
Body Name: body_give-to-purchase

&.body_give-to-purchase {
.accent-color(@color-give, @color-give-dark);
}

*If you do not specify a directory when creating the group, the body tag will reference the name of the page.