“Etherna” Documentation by “EvGreen” v1.0


“Etherna”

Created: 01/05/2011
By: Daniel Leczycki
Email: the242@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Template files
  2. CSS Files and Structure
  3. JavaScript
  4. Walkthrough - all what you need is here.
  5. Sources and Credits

A) HTML Template files - top

Etherna theme comes in 30 HTML files, 2 PHP files and one CSS file:

  1. index.html - Home Page with slider.
  2. mainpage_pricing.html - Home Page with slider and pricing.
  3. mainpage_pricing_nowidg.html - Home Page with slider and pricing, without text widgets.
  4. mainpage_news.html - Home Page with slider and news section.
  5. mainpage_noslogan.html - Home Page with slider, without slogan section.
  6. mainpage_noslider.html - Home Page without slider.
  7. mainpage_vid.html - Home Page with video instead of the slider.
  8. blog.html - Blog page with sidebar on the right.
  9. blog2.html - Blog page with sidebar on the left.
  10. blog3.html - Blog page with sidebar on the both sides.
  11. about.html - Page with features of the theme listed.
  12. typography.html - Typography headings page.
  13. floats.html - Typography images and floats page.
  14. dropcaps.html - Typography dropcaps and blockquotes page.
  15. checklists.html - Typography lists and code page.
  16. buttons.html - Typography buttons page.
  17. boxes.html - Typography warning boxes page.
  18. separators.html - Typography separators page.
  19. tables.html - Typography tables page.
  20. showcase.html - Typography grids and blocks page.
  21. pricing.html - Typography pricing tables page.
  22. protfolio.html - Portfolio 3 columns page.
  23. protfolio1c.html - Portfolio 1 column page.
  24. protfolio2c.html - Portfolio 2 columns page.
  25. protfolio4c.html - Portfolio 4 columns page.
  26. protfolio_allinone.html - Portfolio all in one page.
  27. contact.html - Contact page.
  28. contact2.html - Contact variant 2 page.
  29. contact3.html - Contact variant 3 page.
  30. 404.html - Simple error page.
  31. mail.php - Very simple newsletter sending page (enter your email there).
  32. sendEmail.php - Contact form mail sending engine (enter your email there).

B) CSS Files and Structure - top

I'm using one CSS file in this theme.

  1. style.css - This is the main style for the site. You can find style.css in the /css/ folder with the HTML templates. The file is divided into easily distinguishable sections. Most importantly though:

The styling is separated into sections:

	
		
	/* === Reset stylings === */
	
	1-186 code lines: General rules, resetting default browser styles, browser hacks etc. No-need for editing here.
	
	186-245 lines: Helper classes like .hr, .alignleft, .hidden or .clearfix
	
	/* === Slider Section === */
	
	249-400 lines: Nivo slider stylings.
	
	/* === User modular section 1 === */
	
	406-437 lines: Theme styling starts here, font-face rules and logo position.
	
	/* === User modular section 2 === */
	
	437-488 lines: All the colors, and background is grouped together there. I call that space "USER MODULAR STYLES" because this section is pretty much
	all that the user needs. This whole section can be imported from rainbow.css that are in "COLOR PRESETS" folders. More on that later;
	
	/* === General typography === */
	
	488-706 lines: General typography; headings, blockquotes, code blocks, boxes etc.
	
	/* === Menus === */

	707-852 lines: Menus

	/* === Search === */
	
	854-892 lines: Search styles.
	
	/* === Main blocks === */
	
	893-991 lines: Container and blocks styles.
	
	/* === Grids section === */
	
	992-1210: Grids, sidebar and widgets styling. More on how to use the grid - in showcase.html file.
	
	/* === Hotstuff bar === */
	
	1213-1251: The "hot stuff this week" bar that you can find in mainpage_pricing.html
	
	/* === Forms === */
	
	1253-1304: Forms styles
	
	/* === Blog posts === */
	
	1307-1329: General post wrappers.
	
	/* === Testimonials === */
	
	1331-1369: Testimonials widget
	
	/* === Footer === */
	
	1371-1463: Footer classes.
	
	/* === Superbuttons === */
	
	1465-1490: The superbutton properties.
	
	/* === Superbuttons - colors === */
	
	1491-1713: The superbutton color classes.
	
	/* === Pagination === */
	
	1715-1739: Pagination classes.
	
	/* === Pricing === */
	
	1741-1860: Pricing tables styles.
	
	/* === Portfolio === */
	
	1862-1876: Classes that change margins for typography in portfolio grids.
	
	/* === Newsletter === */
	
	1878-1930: Newsletter in the footer.
	
	/* === Zoomer === */
	
	1932-1937: Zoomer class that triggers the "spyglass" onhover effect and lightbox effect.
	
	/* === Table === */
	
	1939-1975: Table classes.
	
	/* === Special classes === */
	
	1977-2015: Special classes like .widgettitle that removes top margin from any header, .dropcap class.
	
	/* === Prettyphoto === */
	
	2018-2020: Prettyphoto lightbox effect styling.
	
	/* === Helper classes === */
	
	2020-end: Empty classes for mobile devices, printing and the color changing widget from live-preview. Those classes can be removed if not needed.
	

THE MAIN QUESTION REGARDING CSS FILES WOULD BE PROBABLY: "HOW DO I CHANGE THE COLOR OF THE THEME TO ONE OF THE AVAILABLE ONES?"

It's easy! First step is picking the color that you like from folder "COLOR PRESETS" that came with the download package after buying the theme. In that folder there are many subfolders named according to their colors. In each one of them there is a rainbow.css file, and another folder "IMG" that has background images in it.

Second step is taking the background.png file from there, and copying and replacing the original background file that is in /THE THEME/css/img/background.png , you just switched the background color.

Now, the third step, - the rainbow.css file contains information about the colors of links and buttons in the theme. You can use one color for background, and another for rainbow.css (like having dark background but red buttons and links). Open the rainbow.css file, and copy all the code in it, then go to /THE THEME/css/style.css and open up that style.css file, find lines 438-488 and replace them with the code that you copied from the rainbow.css (like on screenshot below). Save the style.css file and voila, you have new colors for links and buttons.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

I strongly recommend FireFox browser with FireBug addon to find sections of the code that you want to alter. It will save you a lot of time and trouble, as CSS file in this theme takes well over 2000lines of code.


C) JavaScript - top

This theme imports 3 Javascript files.

  1. jQuery - directly from google file repository, or in case their server is down - from /js/libs/jquery-1.4.2.min.js
  2. Custom scripts - in /js/script.js
  3. And plugin scripts - /js/plugins.js
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. Most of the animation in this site is carried out from the customs scripts. The functions there are commented and you should have no problem figuring which one does what. To edit the twitter plugin edit line 79:
    /* Twitter initiates. Enter your username here. */
    	jQuery(".tweeter_widget").tweet({
                username: "designsentry",
                join_text: "auto",
                avatar_size: 30,
                count: 4,
                auto_join_text_default: ",",
                auto_join_text_ed: ",",
                auto_join_text_ing: ",",
                auto_join_text_reply: "DS replied to",
                auto_join_text_url: "DS was checking out",
                loading_text: "loading tweets..."
        });
    

    To edit behavior of the slider, edit lines 159-167:

    /* Innitialize Nivo Slider */
    	jQuery('#slider').nivoSlider({
    	directionNav:false,
    	captionOpacity:0.85,
    	slices:10,
    	pauseTime:6000,
    	keyboardNav:true,
    	pauseOnHover:true
    	});
  3. In addition to the custom scripts, I implement a few "tried and true" plugins to create the effects. Those plugins are packed all into one file: plugins.js , so you won't need to manually edit anything in the files. Also, this way you can add more plugins by simply pasting their code into plugins.js and not call for yet another file in each .html file.

D) Walkthrough - top

Again, thank you for buying the theme. This is a walktrough page that I prepared for you, so you can understand this template better, and make necessary changes easier.


LOGO First of all, we want to change the logo to your own. If you have logo ready and prepared, then just replace the /images/logo.png and, if some aligning is necessary, edit style.css file, find line 431 and in class #logo change (left and bottom) values.


MENU Menu is simply an unordered list of link elements. Opening another <ul> inside <li></li> tags will allow for drop-down menus. Lines in index.html file: 43-109.


SEARCH There is possibility that you wont use search styling, in this case - to remove it, edit all html files that you want to remove search from, and delete the code as shown in the image. Lines 110-115 in index.html file.


SLIDER To add/remove slides simply add or.. remove images that are placed in betweeen lines 124-131 in index.html file (or one of the mainpage.html files). Slides can be images and images with links. Images can have captions on them. To add a caption, add title="#htmlcaptionx" to the image tag, and then add the div below, with corresponding id, that has the caption itself.


ICONS The social icons in the footer can be added/removed by simply adding.. or removing :) another list items. All of the icons that are available are located at /RESOURCES/icons. There are plenty.


JQUERY PORTFOLIO Construction of the portfolio is very simple - it's a series of elements that contain all the necessary info inside. So, we got link with the image, and class="zoomer" for the nice lightbox effect when clicked, at line 134, then heading h3 at line 135, and finally little info on who created the item, with link to i.e. full, in-detail post about that item, lines 136-137.


GRIDS Best way to get familiar with the themes grids and container blocks is simply to study the showcase.html file. It contains all the explanations that you need.


CONTACT All you need to do to make the contact form work is: edit the sendEmail.php file and at line 7 and 8 enter your email adress and name.


All the code is commented and you should have no problems figuring out how to populate the rest of the site with your content, as every aspect of construction of the site is similar if not identical to the examples mentioned above. However if you still have problems understanding HTML code, you can try to learn more from w3schools or.. simply wait for wordpress edition of this site. It will be even easier to operate and use.



E) Sources and Credits - top

I've used (or recommend using) the following images, icons or other files as listed.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Daniel "EvGreen" Leczycki

Go To Table of Contents