Arteri5 Documentation

Arteri5 RWD concrete5 documentations and work-around. CSS classes, updates, general notes and author notices. Information and how-to's, in utilising the theme…



Working With Arteri5

Installation

General concrete5 theme installation notices via on-line and FTP files/folders uploads to your web host to your_domain_path/themes/ folder.

Theme Environment

Works with concrete5.5.++ (Tested)

Works best in concrete 5.6.++ (Tested)

Works great with concrete5 V5.6.1 beta 3 (tested 28/01/2013)

Override/Customizations

Permissions granted to override and customize to individual needs for commercial and personal use. Open Source Initiatives MIT License included.

To fully customize, copy arteri5 folders and rename to "your_custom_theme_name" (without quotes and add to your_domain_path/themes folder > Install themes > Dashboard > Theme > "your_custom_theme_name" > Install > OK.

Press Activate if you wish to install theme to entire site or Go to page and > Edit > Design > choose desired theme.

Theme Construction

Structure: Skeleton -CSS responsive framework/boilerplate

Menu Navigation: CSS transition with mobile quiries and soft scroll effect.

Stylesheet: CSS Level 3

HTML: HTML5 compliance

Browser Support

Google Chrome, FireFox, Android platform, Safari, Safari Mobile, IE7, IE8, IE9, Opera 

* All major modern browers supported.

Theme Background

Theme comprises 6 section with unique id:-

#header (theme/elementss/header.php)

Fixed header Top Bar (Global Headers Bar)

.site-name (editable GlobalArea)

.social-icons (editable GlobalArea)

.search-box (editable GlobalArea)

#feature

.pageTitle (individual page override to desired contents)

#header-nav

#pageSection (theme/"page_type".php)

#pageSection-bottom (additonal full width area at bottom page)

#Footer (theme/elements/footer.php) (editable GlobalArea)

#footer-tags  (editable fonts and colors)

Stylesheets

Theme stylesheets are located in theme/css/"file_name".css and concrete5 integrations stylesheets located in theme/typography.css.

base.css -> General theme/webpage styles, webpage style reset

skeleton.css -> Skeleton responsive framework

layout.css -> concrete5 block styles, buttons styles, form style, featured styles and non-validate CSS styles for nrowser support.

nav.css -> Navigation styling and media quiries (for mobile platorm)

typography.css -> Webpage (body) fonts/color setting, background color setting, fonts style setting,  links color setting, links hover color setting, featured elements color settings.

Theme Overrrides Environment

Skeleton classes overrides available in concrete5 page editing.

Immediate style overrides in tinyCE editor.

Immediate style overrides in Dashboard > Theme (for concrete5 V5.6.1 beta 3). Page refresh overrides with concrete5 V5.6.++ and below.

 

Getting To Know Arteri5

Extending Theme


Global Customizations

Change Global Font Styles and Size

Dashboard > Themes > theme_name > "Page Font Styles" > tool-tip > Select desired stylings.

Change Global Font Colors 

Dashboard > Themes > theme_name > "Page Font Color" > tool-tip > Select desired stylings.

Change Global Links Color 

Dashboard > Themes > theme_name > "Links Color " > tool-tip > Select desired stylings.

Change Global Links Hover Color 

Dashboard > Themes > theme_name > "Links Hover Color " > tool-tip > Select desired stylings.


By-Elements Customizations

Change Featured Background

Dashboard > Themes > theme_name > "Featured Background" > tool-tip > Select desired stylings.

Change Featured Font Style

Dashboard > Themes > theme_name > "Featured Font Style" > tool-tip > Select desired stylings.

Change Featured Font Color

Dashboard > Themes > theme_name > "Featured Font Color" > tool-tip > Select desired stylings.


Change Navigations Font

Dashboard > Themes > theme_name > "Navigations Font" > tool-tip > Select desired stylings.

Change Navigation Background Color

Dashboard > Themes > theme_name > "Navigation Background Color" > tool-tip > Select desired stylings.

Change Navigation Font Color

Dashboard > Themes > theme_name > "Navigations Font Color" > tool-tip > Select desired stylings.

Change Navigation Hover Color

Dashboard > Themes > theme_name > "Navigations Hover Color" > tool-tip > Select desired stylings.


Change PageSection Background Color

Dashboard > Themes > theme_name > "PageSection Background" > tool-tip > Select desired stylings.

Change PageSection Contents Area Background Color

Dashboard > Themes > theme_name > "Contents Background Color" > tool-tip > Select desired stylings.


Change PageSection-Bottom Background Color

Dashboard > Themes > theme_name > "PageSection-bottom Background" > tool-tip > Select desired stylings.

Change PageSection-Bottom Font Color

Dashboard > Themes > theme_name > "PageSection-bottom Font Color" > tool-tip > Select desired stylings.

Change PageSection-Bottom Contents Area Background Color

Dashboard > Themes > theme_name > "Contents-bottom Background Color" > tool-tip > Select desired stylings.


Change Footer Background Color

Dashboard > Themes > theme_name > "Footer Background" > tool-tip > Select desired stylings.

Change Footer Font Color

Dashboard > Themes > theme_name > "Footer Font Color" > tool-tip > Select desired stylings.

Change Footer-Tags Background Color

Dashboard > Themes > theme_name > "Footer-Tags Background" > tool-tip > Select desired stylings.

Change Footer-Tags Font Color

Dashboard > Themes > theme_name > "Footer-Tags Font Color" > tool-tip > Select desired stylings.


Change Ribbon Background Color

Dashboard > Themes > theme_name > "Ribbon Color" > tool-tip > Select desired stylings.


Change Button Background Color

Dashboard > Themes > theme_name > "Button Background" > tool-tip > Select desired stylings.

Change Button Text Color

Dashboard > Themes > theme_name > "Button Color" > tool-tip > Select desired stylings.

Change Button Hover Color

Dashboard > Themes > theme_name > "Button Hover Color" > tool-tip > Select desired stylings.

 

Editing Approach

Background color, set font styling/color/size, featured elements color setting via Dashboard > Themes > "theme_name"> Customize.

All changes can be overwritten through Page > Edit > select Area > Add Block > Design. 

Editing also can be made via Page > Add Block > Content > tinyMCE editor.

 

Featured Design Elements Available in Editor and Block Design mode

.title-ribbon-left

- For paragraphs and headers H1, H2, H3.

.title-ribbon-right

- For paragraphs and headers H1, H2, H3.

.scale-with-grid

- For images to scale with responsive designs. Read more here.

.video-scale

- For embeded videos to scale with responsive layout. Read more here.

.*** columns, .one-third column, .two-thirds column, add-bottom, half-bottom, offset-by-***

- For skeleton responsive classes and layout. 

*** indicates required amount.

.button

- For button classes on "a-tags" (href's)

.full-width

- Extends .button classes to full width 100% in columns or div's width. 

.bottom-shadow

- Adds bottom shadows to div's

.transparency

- Add transparency to div's and child div's.

 


End of Theme Documentation

Resources, Tips, How-to's

http://www.irsah.com/concrete5/how-tos/consistent-arrange-contents-concrete5-skeleton-themes-mobile/

http://www.irsah.com/concrete5/how-tos/customize-concrete5-skeleton-responsive-themes/

http://www.getskeleton.com/

http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-responsive-layout-with-skeleton-widescreen/

http://untame.net/2012/06/responsive-design-with-the-skeleton-css-boilerplate/

http://designshack.net/articles/css/build-a-responsive-mobile-friendly-web-page-with-skeleton/