E FLUX Tutorials

07Extra Content Usage First, special thanks to Adam at seyDesign for pioneering this very cool method. Ok, the extra content areas are as follows:

EC1) This area produces content above the Content and Sidebar areas, but below the toolbar. An ExtraContent stack or snippet can be used.

EC2) This area produces content below the Content and Sidebar areas, but above the footer. An ExtraContent stack or snippet can be used.

EC3) This area produces content inside the footer bar. This container is meant for very brief text. Only an ExtraContent snippet can be used in the sidebar, or copy / paste the code below.

<div id="myExtraContent3">My Custom Text</div>This code goes in the sidebar, be sure to clear and ignore the formatting.

EC4) This area makes links appear as sub navigation with the toolbar. This is good for external links, download links, or mediabox images, etc. For proper formatting, copy / paste the code below into the sidebar. Clear and Ignore Formatting.

<div id="myExtraContent4">
<ul>
<li><a href="http://google.com">Google link</a></li>
<li><a href="your_url">My custom link</a></li>
</ul>
</div>This code goes in the sidebar, be sure to clear and ignore the formatting.

08"iPhone Only" Content
In E Flux Extended, the sidebar has been removed from the iPhone version (for readability issues). What you have now, is the ability to create "iPhone only" content above and below the main content section. And if need, you can re-import your original sidebar material.

For iPhone only material above the main content section, copy and paste the code below into the main content section.

<div id="myExtraContent1">
<div class="iPhone">Custom iPhone only content.</div>
</div>DO NOT Place in Sidebar.

For iPhone only material below the main content section, copy and paste the code below into the main content section.

<div id="myExtraContent2">
<div class="iPhone">Custom iPhone only content.</div>
</div>DO NOT Place in Sidebar.

To re-generate your sidebar material for the iPhone place the RW tags below like so,

<div class="iPhone">
%sidebar_title%
%sidebar%
%plugin_sidebar%
</div>

Create padding and a page break above your iPhone content, copy and paste the code below into your custom css box:

.iPhone{
margin-top: 20px;
padding-top: 50px;
border-top: 10px solid #555555;
}

Create padding and a page break below your iPhone content:

.iPhone{
margin-bottom: 20px;
padding-bottom: 50px;
border-bottom: 10px solid #555555;
}

093 Column EC Formatting
With using the 2nd Extra Content Section and some custom css, you can create three column formatting that will render under both the content and sidebar section. Here's the html to copy and paste into your sidebar:

<div id="myExtraContent2">

<div class="column">Your custom content goes here.</div>

<div class="column">Your custom content goes here.</div>

<div class="column">Your custom content goes here.</div>

</div> This code goes in the sidebar, be sure to clear and ignore the formatting.


Now to style the html into columns, copy and paste the code below into your custom css box:

#myExtraContent2 .column{
float: left;
position: relative;
width: 30%;
padding: 20px 30px 170px 0;
}The css can be modified to suit your needs.

*The padding values go in the following order, "top, right, bottom, left". Notice the bottom padding is 170px, this value keeps the content from being clipped from view by the fixed footer.

10Create Background Stripes
If you saw the big strips on the E Flux demo homepage, and though "How do I do that" - here's how.

Add this to your custom css box:

#background{
background-image: url("rw_common/themes/e_flux_ext/images/flare.png");
}
Then select "Repeat X", under Background Repeat in the style options. Then check out the cool stripes! This image was build into E Flux to demonstrate creative possibilities for repeating patterns in your site.