Update (NEW)

arteri5 custom background image add-on

Install background image easily with arteri5 custom background image add-on block. Image outputs as background image to theme [body] to enhance web presentation with web performance taken to consideration. 

1. Responsive fixed full width background image powered by VEGAS
2. Select transparency by theme section/area.
3. More than 15 overlay geometric patterns included. Select overlay to enhance background image output.
4. Slow fading effect / lazy loader for best web presentation.
5. Insert block in any area of a page with edit mode indicators.
6. Can be used in any arteri5 theme pagetype, stacks or editable area. 
7. If block included in global area, background image will output in all pagetype, where the global area is available.
8. Can include multiple block in a page, image/block outputs depends on CSS styling "seniority' on webpage html.

This add-on installs automatically with arteri5 theme package.

To include in your theme pages, in page edit mode > select area > tool-tip > select block > find arteri5 custom background block in the list > and the custom block UI will appear.

On the custom background UI you can select/upload image file to your file manager and this blcok will sync with selected image. Prefered image size 1200px X 900px (or higher) at 300Kb (or lower) image file size (for best web page performance).

Default settings included for overlays, image fading/lazy loader and opacity. You can refine your own custom settings for the given area.

You can also choose which area in a theme to render the background image for a webpage, either for feature area, the pageSection area, footer or a combo of areas within a page (as a background for the entire page).

Bare in mind, the image outputs as background image to [body] tag and setting the selected areas will only set transparency on a selected section of a theme.    

Update (NEW)

Template styling for concrete5 blocks.

Included styling via templates for most used concrete5 blocks;

1. Pagelist Block - w/thumbnail image and date string
2. Search Block
3. Sign-in Block - 5 overlays included
4. E-mail Sign-Up block - 5 overlays included
5. Responsive slideshow template -thanks RK01
6. Tags block - 2 style templates

To include stylings on page edit mode > select required blocks > tool-tip > choose templates > select your prefered template > click save > preview/publish.

 

Newly Added/Installed

After much feedback, and with the recent update from fitvids.js author Chris Coiyer, now theme included fitvids.min.js, a minified version from fitvids.js, which is more lighter.

Currently supports responsive (fluid) video embeds for Youtube, Vimeo, Bliptv, Viddler and Kickstarter. You can also include your own video vendor here, from the author's github channel.  

 

General Design Approach

Theme layout inspired by 'Bootstrap', but with less codes and files to quickly support your future web projects, powered by Skeleton. Mobile First iniatives, using pure CSS environment for best webpage performance and ease of use.

A top sticky (fixed) bar for logos, links, custom search bar or anything that would catch your future website visitor's attention, works on any modern browsers and screen size.

Upon installation, grey color tones was set as default theme colors. Change colors immediately with concrete5 theme customize feature, and reset, if you do not like your chosen color scheme. Pick any color or font sylings from concrete5 tool-tip selector with ease.

Embeded in theme is autonav main menu navigation for top pages of choice and core block styling included.

Use pre-installed styling via Content editor or Block Design tool. Styling includes ribbons, responsive image classes, responsive video classes, shadows, browser safe transparency classes included via the drop down menu in content editor (aka tinyMCE) and the block Design tool (add CSS section) For general use and how-to, refer section down below.

General Design Feature You Need to Know.

1. Site logo or site-name will be at maximum of 220px width and 30px in height due to the fixed sticky header bar stylings. All logo's and Sitename should accomodate that area space for best webpage view.
2. The social icon section is editable, with area space 30px in height and 400px in width. Works bests with social icons, About Us linksd, Sitemap link, Archive etc.
3. Upon theme install, the default search bar is assigned. However, you can edit the area (30px height x 220px width) with your custom search bar or Google search etc. 
4. If you wish to retain the search bar, please create a new page with title "search-results" and add core search block in the page area. Else you can point the search results to your desire page in theme/elements/header.php and find "search-box" class > edit the search result url.
5. For featured area on all pages, It automates page titles and page description (using full textword helper at 160 word count) You can override with any block desired in page edit mode or add a global stack if you do not wish the page titile and description to display.
6. For credits (footer tags area), you can overwrite with your desire block selection. Area reserved designed for sitemap links, archive links, member-login links etc. Or you can support us and concrete5 by leaving it be :-). 
7. Do take note that this theme depends heavily on CSS and less Js approach. Best for performance, quick loading, so you can concentrate on web build contents and layout.
8. Please use concrete5 Themes > Customize section and on page editing tools to have control/personalize with your future design web builds.
9. Menu navigation links was designed to cater for 6 to 8 links,for best web page practice in both webpage view and small screen view. It also compliments theme simplicity and minimalist styling.

Browser Support

All major modern browsers including IE families (with media quiries)

Looks best in chrome, firefox, android, safari, opera and all webkit browsers.

Theme Environment

Tested on concrete5 V5.5.++

Theme best used on concrete5 V5.6.++

*We included minimum requirement to V5.5.2 due to theme best workflow performance and funtionality.

NEW! Now works with concrete5 V5.5.1

Installation

General concrete5 theme installation via Marketplace download and package install.

or;

FTP unzipped theme package files/folders > upload to path_to_your_domain/package/ folder.  Go to Dashboard > Install (Add Functionality) > Find theme_package > Install.

 

Overrides and Customization

To fully customize, theme, copy theme folder from your package folder ie. path_to_your_domain/package/theme_package_name/themes/theme_name/ > rename the folder to "your_custom_theme_name" (without quotes) > add to path_to_your_domain/themes folder.

Install your custom theme via Dashboard > Theme > "your_custom_theme_name" > Install > OK.

Press Activate if you wish to install theme to entire site or go to page > Edit > Design > choose theme_name > choose page type > Save > Preview.

Customization Feature

Overall Theme

Customize default background color, default font styles, default font selection, default links color, default links hover color.

New! Include background image with theme add-on/block easily for a given page. 

Sticky Header Bar

Customize sticky header background color, add custom logo section, social icons section, and search bar section.

Header Nav - MainMenu Navigation

Customize background color, links color, links hover color.

Page content

Customize full width background color, content background area color.

Customize page bottom background color and page content background color.

Footer

Customize footer background color and font color,

Footer Tags

Customize footer tags background color and font color.

 

Theme Basic Web Page Structure

Theme comprises 7 main sections with unique id reference.

1. Webpage reference located in file: theme_name/elements/header.php

#header - Sticky bar (fixed) contains global site-name, global social-icons, and global search bar area to customize.

#feature - Pre-installed Page title and description output or overwrite with your own custom blocks.

#header-nav - autonav built-in navigation block with parent page (top page) setting.

2. Webpage referencing located in file: theme_name/"page_type".php

#pageSection - contains the body content of a web page.

#pageSection-bottom - contains additional/extended contents below pageSection.

3. Webpage referencing located in file: theme_name/elements/footer.php

#Footer - extended footer with Global area.

#Footer-tags - Footer tags and back to top navigations. Overwrite credits and tags section accordingly.  

 

Stylesheets

typography.css - packages/theme_package_name/theme_name folder/

Required for concrete5 incontext editing. Includes, fonts, background colors, features element colors, links colors etc.

base.css - packages/theme_package_name/theme_name folder/css/

Basic and reset style for theme and web page. Includes unique id page styling.

nav.css - packages/theme_package_name/theme_name folder/css/

Autonav and media quiries theme/webpage styling.

layout.css - packages/theme_package_name/theme_name folder/css/

concrete5 blocks, feature elements and related styling for theme/webpage.

Included/Addition

fitvids.js - packages/theme_package_name/theme_name folder/js/

Javascript library for responsive video embeds. Use it if required.

New! Internet explorer helper file (ie-css3.htc) to help out rich CSS3 rendering for IE 7, 8 etc. Located in packages/theme_package_name/theme_name folder/js/ and used with files in css theme folder. 

 

Customization Indicators via  Dashboard > Theme > Customize:

Indicators: *Customize font style only, ** Customize font style and font colors only, *** Customize font style, font color, background colors, link colors. **** Customize background color only.

1. Header sticky bar - ***
2. Feature Area - ***
3. Header Nav - ***
4. pageSection - ****
5. pageSection-bottom - ****
6. Footer - ***
7. Footer-tags - ****
8. Ribbon style title headers - ****
9. Buttons - ****

Some Quick Customization How To's

Add a ribbon feature to your title.

Use Content block to generally write your title. Ribbon feature is only extended to HI, H2, H3 and p (paragraphs) tags.

To create this feature, select the required title, go to Styles drop down menu and select ribbon-title-left for folded ribbon to the left or select ribbon-title-right, for vice versa.

Add button feature

Button feature works best on a-tags (href's) in content editor. For exmple use; in content editor, while links is highlighted, go to Styles drop down menu and select button > click save and button feature is rendered.

Form designs

Generally we have incorporated form stylings with button output to suit your selected color scheme. The color scheme is incorporated for any type of forms with input type: text, emails, text area, labels etc. You can customize background looks and paddings/margins via block editing design tool.

New! Select block > template for more options.

Addinng Spaces within a Block area.

In pagesection area (content), by selecting a block within an area, you can customize the width and gutters for contents from background edge with block design tool.

This will not effect Skeleton's design layout in any page type. Use padding (block design) to add more space in between your content area and background edge.

 

Re-create additional responsive area.

You can actually replicate this using Skeleton framework pre-assign classes with blocks Design tool. Select the content block, add skeleton classes in design > CSS section and add in CSS classes text area > click save. More detail and how to's you can find in the Resources section below.

 

Responsive Images

Works best with content editor aka tinyMCE by selecting the image and assign image-with-grid through the Styles drop down menu.

Allthough a handfull of image blocks do not cater theme responsive image class, surprisingly some image blocks do. Please test available blocks or grab/download awesome responsive image blocks here in the Add-On Marketplace for best results.

 

Scaled Video Embeds (Using Responsive CSS)

Works best with content editor > Add/Edit Video > Embed in content edito >. Select and highlight the parsed video and from the Syles drop down menu > select video-scale. > click save. 

Useful tips: Some blocks strips out certain design elements due to it's nature and script. In helping them to co-exist within a given area, you can also utilise the Spacer block (available here and FREE in the Marketplace) to organize your contents layout. Examples use can be viewed in the Resources section below.  

Resources and How-To's

1. organize contents using skeleton frameworks and concrete5
2. Theme Official Documentation Page.
3. customizing skeleton framework themes with concrete5
4. more to come...