Design

▶ Watch Video

Maintain the web site styles classified by Audience and Role to render distinct looking web sites. These styles primarily relate to colors, fonts, images, and other design elements. The 'Global' attributes are always available, but the majority of this modules attributes are controlled by the Site Type. A web site's site type is selected in the master consoles update page for the given web site. Site types generate the area around the web site's content. This module will have additional dynamically generated tabs relating to the surrounding areas provided by the site type. Typically, these sections are top, right, bottom, left, and navigation. Sections that appear in more than one site type are typically named the same, but you may have to revisit your design records after changing site types.

In [cp:privateLabeling default='Centralpoint' key='ProductTitle' /] 7 the design elements were stored in three different modules: Design::Color Schemas, Design::Module Font Settings, Design::Site Images. These modules have been combined to make it easier to locate design attributes. Instead of categorizing these module's attributes by type (color, font, images), they are categorized by location (top, right, bottom, left). You'll find that this new organization caused each tab's attributes to be virtually the same. All attributes from the old modules that referenced the 'Nav Bar' have been have been removed and will be implemented using [cp:privateLabeling default='Centralpoint' key='ProductTitle' /] Scripting. Numerous [cp:privateLabeling default='Centralpoint' key='ProductTitle' /] 7 site properties have also been mapped to attributes in this module: Center Window Spacing, Core Page Sub Nav Alignment, Global Padding, Left Bar Display, Left Bar Drop Shadow, Left Bar Padding, Left Bar Width, Left Image Nav Alignment, Left Navigation Width Control Option, Main Homepage Center Content Window Padding, Main Site Border, Main Site Border Thickness, Main Site Homepage Alignment, Main Site Width, Right Bar Display, Right Bar Padding, Right Bar Width, Site Border, Site Border Thickness, Site Navigation - HTML Divider Line, Site Navigation - Sub Nav Item Indentation, Site Navigation Bold Option, Site Navigation Section Homepage Padding, Suppress All Site Navigation, Suppress Bottom Bar, Vertical Nav Display Options, Vertical Navigation Display Only Options. There were also many old site properties relating to design which were simply no longer necessary. Generally speaking, when the old site properties referred to a location (top, right, bottom, left) they have been moved to the appropriate tab in the new design module. The same goes for old site properties relating to the navigation or sub navigation.

Setting Up A Responsive Design

• Setting up a responsive audience design may require changes that you can not anticipate. If you are upgrading an existing audience we recommend you first test your changes on an audience that is not accessible to the public. • Set Global > Rendering Mode to "Hybrid" to force the site to use DIVs in modern browsers. Mobile devices won't be using the older browsers anyway. This change should have little or no effect on the way that your site renders. • Set Media Queries (Responsive Design) to "1 (Mobile)" and use the default settings to support mobile devices. This will add a viewport meta tag to all pages to prevent them from automatically resizing on mobile devices. • Add "img, object { max-width: 100% !important; }" to the Global > Custom Styles attribute to allow your images to resize with the viewport. If you experience problems with image resizing in some browsers it can be resolved by adding “div.cpsys_Block { table-layout: fixed; }”. This tells the browser to interpret the size of a column without considering the content and therefore the content (image) size is determined relative to its container. You may also have to add style=”table-layout: fixed;” to HTML tables that you have added in the content of your site. Applying this change will cause your left and right columns to be exactly the width that you define; removing the “rubber band” effect. If your audience utilizes Left and Right Perimeter advertisements you may also have to add “.cpweb_PerimeterLeftTd, .cpweb_PerimeterRightTd { width: 10% !important; } .cpweb_PerimiterCenterTd { width: 80% !important; }” to explicitly set the width of these columns. • Remove predefined pixel widths from the Global > Wrapper Width and Navigation > Width attributes. Setting them to the empty string will let their widths change with the viewport. You can also add something like ".cpweb_Wrapper { max-width: 960px; margin: 0px auto; }" to the Global > Custom Styles attribute if you'd like to convert your wrapper width to a max wrapper width. • Set Left > Width Units and Right > Width Units to "Percentage". This will allow the column widths to change with the viewport. • Remove all explicitly defined widths and HTML tables used for formatting from records in the client console. You can typically discover these elements by loading the pages using a mobile width to discover what is forcing the page to be wider than its viewport. Sometimes you'll have to view and search the source and style sheets for "width" to find the offending elements. • The media query styles can be designed to manually modify the page as the viewport changes if any of the steps above are unacceptable. This process requires manual analysis and implementation on a case-by-case basis. • Use Development > Content Audit > Responsive Audit to find content that has the potential to cause display issues issues in a responsive audience. The preceding link may not work if the module is not accessible or enabled.

Setting Up Sub Navigation CSS Tiers

By default all sub levels of Site Navigation are setup using Design > Styles > Sub Nav Tab. The CSS that this tab eventually translates is as follow:

/* Default CSS from the Style Module */

.cpsty_SubNavigation { background-color:#CCCCCC; text-align:left; text-decoration:inherit; font-size:95%; font-weight:bold; }

.cpsty_SubNavigation a, .cpsty_SubNavigation a:link { text-decoration:inherit; }

.cpsty_SubNavigation a:hover { }

.cpsty_SubNavigationSelected { color:#990000; text-decoration:inherit; }

.cpsty_SubNavigationSelected a, .cpsty_SubNavigationSelected a:link { color:#990000; text-decoration:inherit; }

.cpsty_SubNavigationHover { color:#FFFFFF; text-decoration:inherit; background-color:#888888; }

.cpsty_SubNavigationHover a, .cpsty_SubNavigationHover a:link { color:#FFFFFF; text-decoration:inherit; }

.cpsty_SubNavigationText { padding:2px 3px 2px 3px; margin:0px 0px 0px 0px; }

Each site will have different properties to each one of these class names. So when you need to setup a multilevel CSS class block, be sure to use your sites default by viewing source and loading the /SiteTypes/Default.master.css.aspx into note pad. When you start setting up the different blocks for each level remember that anything that you keep the same will inherit from the default class block above.

Here is what the 1^st level of the sub navigation CSS:

/* 1st Level of the sub navigation */

.cpsty_SubNavigation1 { background-color:#CCCCCC; text-align:left; text-decoration:inherit; font-size:95%; font-weight:bold; }

.cpsty_SubNavigation1 a, .cpsty_SubNavigation1 a:link { text-decoration:inherit; }

.cpsty_SubNavigation1 a:hover { }

.cpsty_SubNavigation1Selected { color:#990000; text-decoration:inherit; }

.cpsty_SubNavigation1Selected a, .cpsty_SubNavigation1Selected a:link { color:#990000; text-decoration:inherit; }

.cpsty_SubNavigation1Hover { color:#FFFFFF; text-decoration:inherit; background-color:#888888; }

.cpsty_SubNavigation1Hover a, .cpsty_SubNavigation1Hover a:link { color:#FFFFFF; text-decoration:inherit; }

.cpsty_SubNavigation1Text { padding:2px 3px 2px 3px; margin:0px 0px 0px 0px; }

As you can see here with this example, if placed on the page would change nothing. You will need to go through each property and make sure it is unique to that level and differs from the default unless you want it inherited.

And here is for a 2^nd level:

/* 2nd Level of the sub navigation */

.cpsty_SubNavigation2 { background-color:#CCCCCC; text-align:left; text-decoration:inherit; font-size:95%; font-weight:bold; }

.cpsty_SubNavigation2 a, .cpsty_SubNavigation1 a:link { text-decoration:inherit; }

.cpsty_SubNavigation2 a:hover { }

.cpsty_SubNavigation2Selected { color:#990000; text-decoration:inherit; }

.cpsty_SubNavigation2Selected a, .cpsty_SubNavigation2Selected a:link { color:#990000; text-decoration:inherit; }

.cpsty_SubNavigation2Hover { color:#FFFFFF; text-decoration:inherit; background-color:#888888; }

.cpsty_SubNavigation2Hover a, .cpsty_SubNavigation2Hover a:link { color:#FFFFFF; text-decoration:inherit; }

.cpsty_SubNavigation2Text { padding:2px 3px 2px 3px; margin:0px 0px 0px 0px; }

This essentially can go on forever depending on how many tiers you have. Just make sure to change each number in ALL the class names.

Audiences: Apply Unique Design

To first begin applying a unique design per audience, please step through all steps outlined in Audiences: Create a new Website via Audiences
You will want to assign this audience with a unique record in both Homepages & Design > Styles.
Site Architecture > Module Designer: You will want to begin with creating 2 new records here. One if for the Homepage layout, and the other is to control the interior pages / all pages pulling from the Navigation module. This is done using the drop-down menu labeled Module after you click the "NEW" button.
When inside these records it is best practice to set the field Use Navigation Content? to No.
Insert this CpScript to pull the primary content from these modules: [cp:scripting key='Attribute' systemname='Content' ExecuteCpScriptsInResult='true' /]
Go back to the Audience that you want to enable this new design for. Site Architecture > Audiences > (find / select audience)
Click the tab labeled Company.
Near the bottom of the record, there are two fields that you need to utilize to assign the newly created records built within Module Designer.
Near the bottom of the record, there are two fields that you need to utilize to assign the newly created records built within Module Designer.
Homepages Module Design (HomePagesModuleViews): Set this to new Homepages Module Designer record that you've just created.
Navigation Module Design (NavigationModuleViews): Set this to new Navigation Module Designer record that you've just created.
Now save the audience record, and refresh your new audience's URL. The homepage & navigation pages will be reading the design layout from these new Module Designer records.
Please note: You may need to also create other new records in Module Designer to finish your site. For example: If you're utilizing News & Events modules, there is a good chance that you will need to create new versions of these to specifically match the look & feel of your new audience.

Audiences: Create a new Website via Audiences The instructions are for you to create a new website using CentralPoint's Audiences module. You can blend this into an existing design, or make it look like a completely different site all-together. The instructions below will assist you in the initial creation of a new audience/website.

Audiences play a huge factor in back-end management. You can assign Administrators to individual Audiences, and they will only be able to view/edit records that are assigned to the same Audience as their Administrator record.

Site Architecture > Audiences: Create your new audience using the console location in this step. Please note that your Audience system name will show in the URL bar within every page of that particular audience. I typically will keep them as short as possible, often using acronyms to abbreviate the system name.
The "Main" audience is the root & default audience in every client console.
Example: client-domain-here.com/main/navigation-system-name.aspx
The bold piece of the example URL above is the audience system name. After creating your audience, this system name is set in stone. There is no way to change it, so please be certain this is desired from initially creating the audience.
In this example, lets pretend we created an Audience with the system name being site1.
Site Architecture > Homepages: To access your new audience using a front-end URL, you will need to assign it to a record in this Homepages module. You can share a homepage with another audience, or create a brand new one specific to site1.
In this example, lets pretend we created a new Homepage record with the system name being site1-home.
Your front-end URL would now be: client-domain-here.com/site1/site1-home.aspx
Please note the following. You still will not be able to access the front-end until the next step is complete. Each audience should ONLY be assigned to ONE & ONLY ONE homepage record. Audiences assigned to multiple homepages could, and most likely will produce errors on the front-end website.
Design > Styles: This is the final step before your new site/audience is ready for front-end viewing. You must either tag an existing Styles record to your new audience, or create a brand new one. Again, each audience should only be assigned to ONE & ONLY ONE record in Design > Styles. An audience assigned to multiple records in this section of the console could, and most likely will cause issues within your new audience/site.
If you have followed these steps exactly as laid out, you will now be able to access the front-end of your website @: client-domain-here.com/site1/site1-home.aspx