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!
Etherna theme comes in 30 HTML files, 2 PHP files and one CSS file:
I'm using one CSS file in this theme.
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.
This theme imports 3 Javascript files.
/* 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 });
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.
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