Customizing a View

If an out-of-the-box experience isn't right for your brand, every view can be customized to your specifications using CSS. This article will detail out what is available to be customized for a general View layout. Click the Help article for a particular module to see the specific customization options for that module.

Developer Hint: Views are incredibly flexible for customization with CSS. Anything you can do in a div or a div container in CSS, you can apply to a View.

In this article:

Basic Layout
General Rules
Elements for Customization
Templates
View Level CSS
View Styling

Click a link above to get directly to that section, or scroll down and start reading.

Basic Layout

Each view is divided into sectors in CSS, and the modules fit into these sectors. The 4 sectors are:

Top - full width of the View (Legacy CSS = 520 pixels, 2012 CSS = 810 pixels)
Left - narrow width on the left (Legacy CSS = 198 pixels, 2012 CSS = 300 pixels)
Right - broad width on the right (Legacy CSS = 318 pixels, 2012 CSS = 494 pixels)
Bottom - full width of the View (Legacy CSS = 520 pixels, 2012 CSS = 810 pixels)

Any module can go into any sector. However, once a module has been placed into a full-width sector (top or bottom), it cannot be moved into a left or right sector. It can be moved up and down, above or below other modules, but it cannot become a left or right.

General Rules

There are a few elements that will be the same for every module.

There is a 17 character limit for the module name
After you add a module, you can change the module name on the main layout page by clicking the module header. The name will change to a text field - make any changes, then click OK.

CSS for all modules

When you create a module, it is given a class of "module_name," plus the name you gave the module.
Example: You added a calendar module and named it Event Calendar. The class name would be "module_name_event_calendar."

Each module will have a specific class name for that module. For example, a calendar module will have the class "calendar". The specific class name for each module is stated in that module's Help article.

The slug that you name when you create a new View is the class name for that entire View.

TIP: Keep a local version of the CSS. Content & Apps only keeps 10 versions of the CSS, so if you are making multiple changes a day, keeping a backup on your end will be the best plan.

Elements for Customization

The following elements can be customized for all modules on a View.

Colors/Fonts/Font Sizes

These can be customized across the board. If a color or font appears on a View, you can customize it, however, fonts must be standard web fonts. Here is a list of acceptable fonts: (http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html).

Headers/Footers/Borders

The border and header can be turned on and off.

You can also customize the background and fonts for headers and footers with colors or images. You can also use an image as the border or header.

Background of the View

You can set one background for all pages in a brand or you can set different backgrounds for each page.

Developer Hint: There are 2 classes on every View within the overall container for the page: all_page_content determines the background for all Views; [name of view] defines the background for a particular view. Insert the name of the View that you titled when you created the view.

Buttons

Any buttons you want on your View, like Share, Submit, pagination arrows, etc, can be custom styled to however you like.

Templates

Templates are sets of content and CSS that you can apply to individual Views. You can create multiple templates to use for specific campaigns or for different properties under your brand. For more info, see the Brand Templates help article.

View Level CSS

If you are an admin on your account, you can also use CSS to customize the look and feel of a View. Administrators will see an extra tab on the top of the module library labeled Custom CSS.

Just enter the CSS code into the field and click "Save". The page will refresh and you'll see the change reflected on the View.

Note: You must save any changes you make to the CSS BEFORE you publish your View. If you publish your View before saving, none of the changes to the code will be saved.

View Styling

If you aren't a CSS expert, there's an easy way you can change the look and feel of your View without having to use any code. The Style tab on the View has controls for you to change everything from the View background to the fonts, using simple sliders and fields so you can get the View to look exactly how you want. Sorry Editors and Authors, you have to be an Admin to use this feature.

Note: Your account must be using 2012 CSS as the base CSS for you to use this feature. Not sure what I'm talking about? See the Choosing Your Base CSS and Facebook Timeline in Tabs help article for more information.

You can find the Style tab on your View, between the Layout and Custom CSS tabs.

Page Layout

You can adjust where your modules appear on your View by adjusting the padding on the top and bottom of the View. Use the sliders to increase or decrease how many pixels of space you have at the top and bottom of the View.

Backgrounds

For your View's background, you can upload an image, have that image repeat, or position the image anywhere on your View. You can also choose a single color for your background. If you want your modules to display their backgrounds, select the Display Module Background checkbox.

Headers

Besides just turning your headers on and off, you can change the header background color, padding, font, font size, font position, and font color. Total control on your headers.

Borders

Borders are simple, so you can simply change your borders' color and width (to a max width of 10 pixels).

Fonts

These controls affect the fonts on your entire View, including all the modules, so choose wisely. You can choose the font, body font color, link font color, and link hover color.

Note: If one of these options has been set in View Level CSS or Brand CSS, any changes you make to it here won't show up on your View.

Live Preview

As you make these changes, you'll see them appear automatically in your View as a live preview, but to make the changes permanent, click Save. This means you can play and make things look crazy without fear of messing up your View.

Vitrue Support