CSS Framework Guide

Redframe CSS Framework Guide

  1. Body
  2. Containers & Wrappers
  3. Header
  4. Main Wrapper
  5. Galleries
  6. Widgets
  7. Core Classes

I. Body

The <BODY> will always have one of these classes:

.desktop_body // applied if client is using non-mobile device

.tablet_body // applied if client is using tablet mobile device (iPad etc)

.mobile_body // applied if client is using a small mobile device (iPhone etc)

 

If a visitor is using a mobile device, the <BODY> may have one of these classes:

.android_body // applied if client is using Android device

.apple_body // applied if client is using Apple device

 

The <BODY> will always have a class that is the same as your Redframe domain name:

.mysamplesite // for example, if your domain is mysamplesite.redframe.com


II. Containers & Wrappers

The Redframe Framework uses two outer containers that surround all the site content, #container and #inner_container:

[codesyntax lang=”css” lines=”no”]

<div id="container"> 
	<div id="inner_container">
	/* ALL SITE CONTENT GOES IN HERE */
	</div>
</div>

[/codesyntax]

These two containers are used to frame the site and establish the maximum width of the site when the header expands for galleries. Altering these dimensions may break some transition animations on the site.

Inside #inner_container are the four outer wrappers that define the site content:

[codesyntax lang=”css” lines=”no”]

<div id="header_wrapper" class="outer_wrapper">
/* ALL HEADER CONTENT GOES IN HERE */
</div>

<div id="gallery_wrapper" class="outer_wrapper">
/* ALL GALLERY CONTENT GOES IN HERE */
</div>

<div id="m_f_wrapper">
	<div id="main_wrapper" class="outer_wrapper">
	/* ALL PAGE CONTENT GOES IN HERE */
	</div>
	<div id="footer_wrapper" class="outer_wrapper">
	/* ALL FOOTER CONTENT GOES IN HERE */
	</div>
</div>

[/codesyntax]

Notice that #main_wrapper and #footer_wrapper are both wrapped by #m_f_wrapper. This is what allows us to hide the page content and footer when transitioning to galleries.

All four outer wrappers have the class .outer_wrapper. This class can be defined with a fixed width to make all four wrappers conform to the same width. Alternatively, you can set width to 100% on .outer_wrapper and then use the wrapper ids (e.g. #header_wrapper) to define different widths on each wrapper; this lets you use a combination of fluid and fixed wrappers.

Not shown in the code above is the .center_wrapper class that is included on wrappers inside each of the sections (with the exception of #gallery_wrapper). For example, inside #header_wrapper is this:

[codesyntax lang=”html4strict” lines=”no”]

<div id="header_wrapper" class="outer_wrapper">
	<div id="header" class="center_wrapper">
	/* ALL HEADER GOES IN HERE */
	</div>
</div>

[/codesyntax]

.center_wrapper allows you to have a fluid-width outer wrapper and a fixed-width inner wrapper on each element. The width of .center_wrapper effectively determines the minimum page width of your site. Examples of .center_wrapper will be further discussed in the upcoming sections.


III. Header

The <HEADER> is comprised of three main parts: the IFP3 Menu, the Logo, and the Nav Menu. The structure of the <HEADER> inside #header_wrapper is below:

[codesyntax lang=”html4strict” lines=”no”]

<div id="header_wrapper">
	<div id="header">
		<header>
			<div id="header" >
				<div id="header_nav_ifp3" >
				/* IFP3 MENU GOES IN HERE */
				</div>
				<div id="header_logo">
				/* LOGO GOES HERE */
				</div>
				<div id="header_nav_menu">
				/* NAV MENU GOES HERE */
				</div>
			</div>
		</header>
	</div>
</div>

[/codesyntax]

1. #header

#header carries information the <HEADER> layout in its class attribute. #header will always have one of these classes for describing the IFP3 Menu position:

 

.ifp3_left // set if the IFP3 menu is left aligned

.ifp3_right // set if the IFP3 menu is right aligned

.ifp3_center // set if the IFP3 menu is center aligned

 

#header will always have one of these classes for describing the Logo position (this is always opposite the IFP3 Menu position):

 

.logo_left // set if the Logo is left aligned

.logo_right // set if the Logo is right aligned

.logo_center // set if the Logo is center aligned

#header will always have one of these classes for describing the Nav Menu position:

 

.menu_left // set if the Nav Menu is left aligned

.menu_right // set if the Nav Menu is right aligned

.menu_center // set if the Nav Menu is center aligned

 

#header will always have one of these classes for describing the drop orientation of the submenus in the Nav Menu:

 

.drop_left // set if the Nav Menu is right aligned

.drop_right // set if the Nav Menu is left aligned

.drop_center // set if the Nav Menu is center aligned

 

2. #header_nav_ifp3

#header_nav_ifp3 has the following internal structure:
[codesyntax lang=”html4strict” lines=”no”]

<div class="nav header_nav" id="header_nav_ifp3">
	<nav>
	<ul id="header_nav1_menu">
		<li id="buttonDownload">
		<a><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span>Download</a>
		</li>
		<li id="buttonLB">
		<a><span class="ui-icon ui-icon-heart"></span>Favorites</a>
		</li>
		<li id="buttonMusic">
		<a><span class="ui-icon ui-icon-volume-on"></span>Music</a>
		</li>
		<li id="buttonCart">
		<a><span class="ui-icon ui-icon-cart"></span>Cart</a>
		</li>
		<li id="buttonSearch">
		<a><span class="ui-icon ui-icon-search"></span>Search</a>
		</li>
		<li id="buttonSignIn">
		<a><span class="ui-icon ui-icon-home"></span>Sign In</a>
		</li>
		<li id="buttonSignOut">
		<a><span class="ui-icon ui-icon-home"></span>Sign Out</a>
		</li>
		<li id="buttonPrivate">
		<a id="header_private_menu_link"><span></span>Private</a>
		<div id="header_private_menu"></div>
		</li>
		<li id="buttonShare">
		<a><img src="new-share-link.png" /></a>
		</li>
	</ul>
	</nav>
</div>

[/codesyntax]

 

#header_nav_ifp3 will always have one of the following three sets of classes:

 

.alignright .clearright // set if the IFP3 Menu is right-aligned

.alignleft .clearleft // set if the IFP3 Menu is left-aligned

.aligncenter .clearboth // set if the IFP3 Menu is center-aligned

 

Note that some of these buttons may be hidden depending on the admin settings. Each of the buttons in #header_nav_ifp3 (except for #buttonShare) follow a pattern of:

[codesyntax lang=”html4strict” lines=”no”]

<li><a><span></span>Text</a></li>

[/codesyntax]

 

Note #header_private_menu hidden inside #buttonPrivate. When a customer is signed in, #header_private_menu is displayed. The internal structure of this menu is described further below.

3. #header_logo

#header_logo will have one of two possible structures depending on whether or not a logo image has been uploaded. If a logo has been uploaded, #header_logo looks like:

[codesyntax lang=”html4strict” lines=”no”]

<div id="header_logo" class="header_logo logo">
	<a><img id="header_logo_img" /></a>
</div>

[/codesyntax]

 

If a logo has not been uploaded, #header_logo looks like:

[codesyntax lang=”html4strict” lines=”no”]

<div id="header_logo" class="header_logo logo">
	<a><h1 id="header_logo_h1">Company Name</h1></a>
</div>

[/codesyntax]

 

#header_logo will always have one of the following three sets of classes:

 

.alignright .clearright // set if the logo is right-aligned

.alignleft .clearleft // set if the logo is left-aligned

.aligncenter .clearboth // set if the logo is center-aligned

 

4. #header_nav_menu

#header_nav_menu has this basic wrapper structure:

[codesyntax lang=”html4strict” lines=”no” tab_width=”1″]

<div id="header_nav_menu">
	<nav>
	<ul id="header_nav2_menu">
	/* NESTED LIST OF <UL> and <LI> */
	</ul>
	</nav>
</div>

[/codesyntax]

#header_nav_menu will always have one of the following three sets of classes:

 

.alignright .clearright // set if the Nav Menu is right-aligned

.alignleft .clearleft // set if the Nav Menu is left-aligned

.aligncenter .clearboth // set if the Nav Menu is center-aligned

 

#header_nav_menu will always have one of these classes for describing the drop orientation of the submenus:

 

.drop_left // set if the Nav Menu is right aligned

.drop_right // set if the Nav Menu is left aligned

.drop_center // set if the Nav Menu is center aligned

 

The menu’s nested UL/LI structure is unique for each website; however, the general structure follows a pattern like this:

 

[codesyntax lang=”html4strict”]

<ul class="nav_menu topnav" id="header_nav2_menu">
<li><a>Page Title</a></li>
<li class="gallery"><a>Gallery Title</a></li>
<li class="ext"><a>External Page or Embed Title</a></li>
<li class="folder"><a>Folder Title</a>
	<ul class="subnav">
	<li class="page"><a>SubPage Title</a></li>
	<li class="folder"><a>SubFolder Title</a>
		<ul class="subnav">
		<li class="folder"><a>SubSubFolder Title</a>
			<ul class="subnav">
				<li class="gallery"><a>SubSubGallery Title</a></li>
			</ul>
		</li>
		</ul>
	</li>
	</ul>
</li>
</ul>

[/codesyntax]

 

The nested <LI>s alway have one of these four classes:

.page // used when menu item is a page

.gallery // used when menu item is a gallery

.ext // used when menu item is an external link or embed

.folder // used when menu item is a folder

 

All the submenu <UL>s always have the class .subnav and may have another class, .graphical_menu, if graphical menus are enabled in the gallery settings.

If graphic menus are enabled, then all .folder <LI>s will contain the following structure:

 

[codesyntax lang=”html4strict” lines=”no”]

<li class="graphical folder has_img">
	<a>
		<img class="link_img" />
		<div class="link_title">Folder Title</div>
		<div class="link_desc">Folder Description</div>
	</a>
	<ul class="subnav">
	/* SUBMENU GOES IN HERE */
	</ul>
</li>

[/codesyntax]

 

 

If graphic menus are enabled, then all .gallery <LI>s will contain the following structure:

 

[codesyntax lang=”html4strict” lines=”no”]

<li class="graphical gallery has_img">
	<a>
		<img class="link_img" />
		<div class="link_title">Folder Title</div>
		<div class="link_desc">Folder Description</div>
	</a>
</li>

[/codesyntax]

 

 

5. #header_private_menu

If a customer is signed in to the site and has private menus assigned to his account, then #header_private_menu will be visible. #header_private_menu uses the exact same UL/LI structure as #header_nav_menu (including the use of .graphical), so styling this menu is almost identical.

One important difference exists: #header_private_menu does not have a “top-tier” level of list items. Since all menus in #header_private_menu are effectively .subnav <UL>s, the CSS is slightly different.

For instance, to change the submenu item background-color in #header_nav_menu to red, you would use:

 

[codesyntax lang=”css” lines=”no”]

#header_nav_menu ul ul li {
	background-color: #f00;
}

[/codesyntax]

 

To do the same in #header_private_menu, remove the first UL from the CSS:

[codesyntax lang=”css” lines=”no”]

#header_private_menu ul li {
	background-color: #f00;
}

[/codesyntax]


IV. Main Wrapper

The Main Wrapper area contained inside #m_f_wrapper is displayed for every page on website. #m_f_wrapper consists of four parts: the showcase, the page content, the sidebar, and the footer. The structure of #m_f_wrapper is:

 

[codesyntax lang=”html4strict” lines=”no”]

<div id="m_f_wrapper">
	<div id="main_wrapper">
		<div id="main_showcase">
		/* PAGE SHOWCASE GOES IN HERE */
		</div>

		<div id="main">
			<div id="main_content_inner">
			<div>
				<div id="main_content">
				<article>
					<div id="page_content">
					/* PAGE CONTENT GOES IN HERE */
					</div>
				</article>
				</div>
			</div>

			<div id="sidebar_wrapper">
			<aside>
				<div id="sidebar">
					<div id="sidebar_top"></div>
					<div id="sidebar_main">
					/* PAGE SIDEBAR GOES IN HERE */
					</div>
					<div id="sidebar_bottom"></div>
				</div>
			</aside>
			</div>
		</div>
	</div>

	<div id="footer_wrapper">
	<footer>
		<div id="footer">
		/* FOOTER GOES IN HERE */
		</div>
	</footer>
	</div>
</div>

[/codesyntax]

The #main container contains additional information about the page layout in its class attribute. #main can have the following classes:

.has_showcase // set if page has a showcase

.no_showcase // set if page has no showcase

.has_content // set if page has content and/or sidebar

.no_content // set if page has no content or sidebar

.no_sidebar // set if page has no sidebar

.right_sidebar // set if page has right sidebar

.left_sidebar // set if page has left sidebar

If a page has a left-aligned sidebar, then the #sidebar will come before the #main_content; otherwise, #sidebar comes afterwards.

1. #main_showcase

Most of the showcase styles are defined inside the settings of Showcase Editor in admin. Since the showcase Javascript code has very specific CSS requirements, changing the specific properties of the showcase is not advised.

However, the #main_showcase container around the showcase can be altered to further enhance the presentation of your site. Bear in mind that the showcase has a minimum width of 910 pixels, so setting the container to dimensions less than 910px can cause display problems.

2. #main_content

#main_content contains a single wrapper, #page_content, inside which all the current page content defined in the admin’s Page Editor is injected. By preceding your style definitions with #page_content, you can guarantee style control over your page elements. For instance, the following will turn all your page links red:

[codesyntax lang=”css” lines=”no”]

#page_content a { 
	color: #f00; 
}

[/codesyntax]

#main_content will have one of the following classes based on the page content:

.no_content // set if page has no content or sidebar

.has_content // set if page has content or sidebar

#main_content will have one of the following classes based on the inverse of the sidebar width:

.full // set if page is full width

.five_sixth // set if page is 5/6 width

.four_fifth // set if page is 4/5 width

.three_fourth // set if page is 3/4 width

.two_third // set if page is 2/3 width

.one_half // set if page is 1/2 width

 

3. #sidebar

#sidebar has #sidebar_top and #sidebar_bottom available to add “end caps” to the sidebar area. #sidebar_main is filled with the page sidebar widgets; refer to the Widgets section for information on how to style widgets.

#sidebar will have one of the following classes based on the inverse of the sidebar width:

.one_sixth // set if page is 1/6 width

.one_fifth // set if page is 1/5 width

.one_fourth // set if page is 1/4 width

.one_third // set if page is 1/3 width

.one_half // set if page is 1/2 width

 

4. #footer

The page footer inside #m_f_wrapper is the same across all pages. Presently, the footer has a very simple structure; this structure will likely be expanded in the future as more footer controls are implemented in the admin. The footer structure is as follows:

 

[codesyntax lang=”html4strict” lines=”no”]

<div id="footer_wrapper" class="footer_wrapper outer_wrapper">
	<footer>
	<div id="footer" class="center_wrapper clearfix">
		<div id="footer_social">
		/* SOCIAL LINK ICONS GO HERE */
		</div>
		<div id="footer_copyright">
		/* COPYRIGHT INFO GOES HERE */
		</div>
	</div>
	</footer>
</div>

[/codesyntax]


V. Galleries

The galleries are defined by defined by four primary areas: the gallery title, the gallery big image, the gallery thumbnails, and the image nav menu. When a gallery is visited, #gallery_wrapper is dynamically populated with the following structure:

 

[codesyntax lang=”html4strict” lines=”no”]

<div id="gallery_wrapper" >
	<div id="gallery_inner_wrapper">
		<div id="gallery_container">
			<div id="gallery_controls">
			<div id="IV_nav_holder">
				<div id="IV_nav_container"></div>
			</div>
			<div id="gallery_thumb_nav">
				<div id="gallery_pagination"></div>
				<div id="gallery_title">
				/* GALLERY TITLE GOES HERE */
				</div>
			</div>
		</div>

		<div id="gallery_big_wrapper">
			<div id="gallery_big_loading"></div>
			<div id="gallery_big_container">
				<div id="gallery_big">
					<div id="gallery_big_cover"></div>
					<img id="gallery_big_img" />
				</div>
				<div id="gallery_big_content">
					<div class="gallery_image_title"></div>
					<div class="gallery_image_desc"></div>
				</div>
			</div>
		</div>

		<div id="gallery_thumb_wrapper">
			<ul id="gallery_thumb_container">
			/* GALLERY THUMBNAILS GO IN HERE */
			</ul>
		</div>

		<div style="clear: both;"></div>
	</div>
</div>

[/codesyntax]

It is NOT advised to alter the width or height dimensions of the gallery thumbnails or big images. The gallery Javascript relies on certain dimensions to make the gallery display correctly; altering these dimensions in your CSS could break the gallery animations.

#gallery_inner_wrapper will have one of the two following classes:

.thumbs_right // set if thumbs are aligned to the right

.thumbs_left // set if thumbs are aligned to the left, or if there there is no inner big image

 

1. #gallery_thumb_nav

The #gallery_thumb_nav wrapper contains two parts: #gallery_title and #gallery_pagination.

#gallery_title controls the appearance of the gallery title. The font-size is dynamically controlled by the Javascript to guarantee that the title always fits inside #gallery_title. You can set the maximum font size via CSS, but be aware that the title will always be scaled to fit.

#gallery_pagination controls the sets of thumbnails; this is dynamically generated based on how many images are in a gallery. For example, #gallery_pagination with six pages (currently on page 4) has the following structure:

 

[codesyntax lang=”html4strict” lines=”no”]

<div id="gallery_pagination">
	<div class="pagination">
		<a class="prev">&lt;</a>
		<a class="sp">1</a>
		<a>2</a>
		<a>3</a>
		<span class="current">4</span>
		<a>5</a>
		<a class="ep">6</a>
		<a class="next">&gt;</a>

	</div>
</div>

[/codesyntax]

 

 

2. #gallery_big_wrapper

#gallery_big_wrapper contains the elements comprising the big preview image on galleries set to display “Images on Page”. When a gallery is set to “Pop Up Image”, then this section is hidden.

#gallery_big_wrapper has the following structure:

 

[codesyntax lang=”php”]

<div id="gallery_big_wrapper">
	<div id="gallery_big_loading"></div>
	<div id="gallery_big_container">
		<div id="gallery_big">
			<div id="gallery_big_cover"></div>
			<img id="gallery_big_img" />
		</div>
		<div id="gallery_big_content">
			<div class="gallery_image_title"></div>
			<div class="gallery_image_desc"></div>
		</div>
	</div>
</div>

[/codesyntax]

Overall, changes inside #gallery_big_wrapper should be mostly limited to color, border, background, and padding alterations; changes to width, height, or margin could break the gallery. Overriding #gallery_big_content and its children #gallery_image_title and #gallery_image_desc makes it possible to customize your own title/captions for the images. Altering the border and padding attributes of #gallery_big_container lets you alter the frame around the big image.

 

3. #gallery_thumb_wrapper

Gallery thumbnails are dynamically populated based on the size of a visitor’s screen, your admin settings, and the number of images in a gallery. While the number and orientation of thumbnails differs from gallery to gallery, the fundamental structure remains the same (in the following code, #i# represents the order in which a given image is listed in a gallery):

 

[codesyntax lang=”html4strict” lines=”no”]

<div id="gallery_thumb_wrapper">
	<ul id="gallery_thumb_container">
		<li id="gallery_thumb_item_#i#">
			<div id="gallery_thumb_holder_#i#">
				<a id="gallery_thumb_#i#">
				<img id="gallery_thumb_image_#i#" />
				</a>
			</div>
		</li>
		/* SAME PATTERN FOR ALL OTHER THUMBS */
	</ul>
</div>

[/codesyntax]

As with #gallery_big_wrapper, most changes within #gallery_thumb_wrapper should be limited to color, background, and border alterations; changes to the height or width of a thumb are likely to be ignored by the Javascript or cause breaks in the gallery.

4. #IV_nav_container

More than any other part in the gallery, changes to the CSS for #IV_nav_container should be very limited as this is a fundamental feature to both galleries and customer favorites. If you have questions as to how to safely alter #IV_nav_container, please contact the support team at Redframe for further information.


VI. Widgets

Customized widgets can be added to pages or sidebars to add specialized content such as gallery thumbnails, contact forms, Facebook Likes, and more. Since widgets can be contained inside #page_content or #sidebar, you can apply location-specific styles to the widgets or just general site-wide styles.

The general structure of a widget is as follows, with #widgetID# as the system-defined ID number for specific widget and #widgetType# as the type of widget being used:

 

[codesyntax lang=”html4strict” lines=”no”]

<div id="widget_#widgetID#">
	<div class="widget">
		<h3 id="widget_title_#widgetID#" >Widget Title</h3>
		/* WIDGET CONTENT GOES HERE */
	</div>
</div>

[/codesyntax]

As of the current version, the following values for #widgetType# are available:

.widget_amazon // set if widget is an Amazon Associates widget

.widget_button // set if widget is a custom button widget

.widget_contact // set if widget is a contact widget

.widget_fbfanbox // set if widget is a Facebook Fanbox widget

.widget_fblike // set if widget is an Facebook Like widget

.widget_galleries // set if widget is an galleries menu widget

.widget_gmaps // set if widget is a Google Maps widget

.widget_info // set if widget is an info widget

.widget_paypal // set if widget is a Paypal widget

.widget_plusone // set if widget is a Google Plus One widget

.widget_rss // set if widget is a RSS widget

.widget_search // set if widget is a search widget

.widget_testimonials // set if widget is a testimonials widget

.widget_text // set if widget is a text widget

.widget_thumbnails // set if widget is a thumbnails widget

.widget_tweet // set if widget is Twitter Tweet widget

.widget_video // set if widget is video widget

The widget’s title inside h3.widget_title will only be displayed if the specified widget has a title; otherwise, this element will not be in the structure.

Each .widget_wrapper has its own padding-top defined inline. The value of padding-top is set in your admin Widget Editor under the widget’s padding settings.

The internal structures of our first-party Redframe widgets are listed below:

1. .widget_contact

 

[codesyntax lang=”html4strict” lines=”no”]

<div class="contact_form">
	<div>
		<label for="contact_name">Your Name*</label>
		<input id="contact_name" type="text" name="contact_name" />
	</div>
	<div>
		<label for="contact_email">Your Email*</label>
		<input id="contact_email" type="email" name="contact_email" />
	</div>
	<div>
		<label for="contact_message">Your Message*</label>
		<textarea id="contact_message" name="contact_message"></textarea>
	</div>
	<div>
		<button id="contact_submit" type="submit" name="contact_submit">Send</button>
	</div>
	<div class="contact_result"></div>
</div>

[/codesyntax]

.contact_form always has one of the following classes:

.contact_form_small // small sized input fields

.contact_form_medium // medium sized input fields

.contact_form_large // large sized input fields

.contact_form_auto // auto sized input fields (automatically fills parent container)

The class .reqd denotes fields that are required. Currently all fields are required, but future development will introduce more sophisticated form controls in which some fields will be optional.

 

2. .widget_galleries

This widget will be revised in the upcoming weeks. CSS for this widget will be added here once the new version is live.

3. .widget_info

 

[codesyntax lang=”html4strict” lines=”no”]

<div class="address">
	<p><label><b>Address:</b></label>
	<address>#address#</address></p>
</div>
<div class="phone">
	<p><label><b>Phone: </b></label>
	#params.phone#</p>
</div>
<div class="email">
	<p><label><b>Email: </b></label>
	<a>#params.email#</a></p>
</div>

[/codesyntax]

 

 

4. .widget_pages

This widget will be revised in the upcoming weeks. CSS for this widget will be added here once the new version is live.

 

5. .widget_rss

This widget will be revised in the upcoming weeks. CSS for this widget will be added here once the new version is live.

 

6. .widget_search

 

[codesyntax lang=”html4strict” lines=”no”]

<label class="widget_search_label">#Label#</label><br />
<input type="text" name="input_search" class="widget_search_input" id="widget_search_input_#widgetID#" />
<button class="buttonFix" id="widget_search_button_#widgetID#">#Button Label#</button>

[/codesyntax]

7. .widget_testimonials

Each testimonial entry in a testimonials widget has the following structure, where #i# is the testimonial number:

 

[codesyntax lang=”html4strict” lines=”no”]

<div>
	<blockquote id="testimonials_#widgetID#_#i#">
		<span class="testimonials_quote">#Testimonial Quote#</span>
		<span class="testimonials_customer">#Testimonial Customer#</span>
	</blockquote>
</div>

[/codesyntax]

Do not apply CSS changes to the wrapper <DIV>s surrounding each testimonial; these are used by the jQuery for animations.

8. .widget_thumbnails

 

[codesyntax lang=”html4strict” lines=”no”]

<ul class="thumbnail_widget_container" id="thumbnail_widget_container_#widgetID#">
	<li class="gallery_thumb_item" id="gallery_thumb_item_#i#">
		<div class="gallery_thumb_holder" id="gallery_thumb_holder_#i#">
			<a class="gallery_thumb" id="gallery_thumb_#i#">
			<img class="gallery_thumb_image" id="gallery_thumb_image_#i#" />
			</a>
		</div>
	</li>
	/* MORE THUMBNAILS GO HERE */
</ul>

[/codesyntax]

 

As with all gallery-related aspects of Redframe, changes to .widget_thumbnails should be limited to color, border, and background properties. Changing the width or height of the thumbnails may cause breaks in the gallery.


VII. Core Classes

The Redframe CSS framework uses a small set of core classes to define the layout and formatting of your site. These classes are fundamental to the creation of Redframe themes and page elements. Understanding these classes is essential to taking full advantage of the Page Editor in the admin.

Below is a list of the core classes in the Redframe CSS framework and their respective uses:

1. Alignment Classes

 

.clearfix      // cross-browser class that fixes issues with float/clear in old browsers;

// guarantees that subsequent elements don’t overlap

 

.alignleft // floats the element to the left

.alignright // floats the element to the right

.aligncenter // floats the element to the center

 

.textleft // aligns text to the left

.textright // aligns text to the right

.textcenter // aligns text to the center

 

.clearleft // clears floated elements to the left

.clearright // clears floated elements to the right

.clearboth // clears floated elements to the both left and right

 

2. Width Classes

.full // element fills the full width of its parent

.none // element is hidden

 

.one_half // element fills 1/2 the width of its parent

.one_third // element fills 1/3 the width of its parent

.one_fourth // element fills 1/4 the width of its parent

.one_fifth // element fills 1/5 the width of its parent

.one_sixth // element fills 1/6 the width of its parent

.two_third // element fills 2/3 the width of its parent

.three_fourth // element fills 3/4 the width of its parent

.four_fifth // element fills 4/5 the width of its parent

.five_sixth // element fills 5/6 the width of its parent

 

.last_col      // removes margin-right on last column in row;

// MUST be used at end of each column row

.column_img    // if applied to an image, the image will stretch to always

// fill the width of the parent container

A majority of the pre-defined Page Elements in the admin’s Page Editor use the width classes to lay out their elements. By using these width classes inside your page content, you can create amazing page layouts. For example, here is the code for a three column layout with an image title, and text in each column:

 

[codesyntax lang=”html4strict” lines=”no”]

<div class="portfolio_row full clearfix">
	<div class="one_third">
		<img class="column_img" />
		<h3>#title#</h3>
		<p>#text#</p>
	</div>
	<div class="one_third">
		<img class="column_img" />
		<h3>#title#</h3>
		<p>#text#</p>
	</div>
	<div class="one_third last_col">
		<img class="column_img" />
		<h3>#title#</h3>
		<p>#text#</p>
	</div>
</div>

[/codesyntax]

 

3. Reset Styles


.no_border // removes border from element

.no_shadow // removes box-shadow from element

.no_corner // removes border-radius from element

.no_background // removes background from element

.no_margin // removes margin from element

.no_padding // removes padding from element

 

4. Special Styles

 

.overlay // turns an element into a absolute position overlay above its parent

.bg_overlay // turns an element into a fixed position overlay above its parent

.hr // creates a pseudo-<HR> elements that can be used as a divider

.more-link // creates a fancy link “button”; used on <a> elements

.portfolio_row // adds more margin to the bottom of a .full row

.wp-caption // turns an element into an image caption container; wp- prefix enables WordPress import

.wp-caption-text // marks an element as image caption text