“Sentinell” Documentation by “EvGreen” v1.0


“Sentinell”

Created: 05/07/2012
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

Sentinell theme comes in 46 HTML files, 2 PHP files and one CSS file:

  1. index.html - Home Page with collage and 4 text widgets.
  2. mainpage2.html - Home Page with collage and 3 text widgets.
  3. mainpage3.html - Home Page with collage and 4 text widgets, but no slogan area.
  4. mainpage4.html - Home Page with collage and 3 text widgets, but no slogan area.
  5. mainpage5.html - Home Page with collage and "about" widget.
  6. mainpage6.html - Home Page with collage and "about" widget, but no slogan area.
  7. mainpage7.html - Home Page with collage and 4 image+text widgets.
  8. mainpage8.html - Home Page with collage and 3 image+text widgets.
  9. mainpage9.html - Home Page with collage and pricing.
  10. mainpage10.html - Home Page with collage all widgets.
  11. mainpage11.html - Home Page wide slider and 4 image+text widgets.
  12. mainpage12.html - Home Page with normal slider and 4 image+text widgets.
  13. blog.html - Blog page with sidebar on the right, grid ratio 9:3.
  14. blog2.html - Blog page with sidebar on the right, grid ratio 8:4.
  15. blog3.html - Blog page with sidebar on the right, second type, grid ratio 9:3.
  16. blog4.html - Blog page with sidebar on the right, second type, grid ratio 8:4.
  17. blog5.html - Blog page with sidebar on the left, grid ratio 9:3.
  18. blog6.html - Blog page with sidebar on the left, grid ratio 8:4.
  19. blog7.html - Blog page with sidebar on the left, second type, grid ratio 9:3.
  20. blog8.html - Blog page with sidebar on the left, second type, grid ratio 8:4.
  21. single.html - Single page with sidebar on the right, grid ratio 9:3.
  22. single2.html - Single page with sidebar on the right, grid ratio 8:4.
  23. single3.html - Single page with sidebar on the right, second type, grid ratio 9:3.
  24. single4.html - Single page with sidebar on the right, second type, grid ratio 8:4.
  25. single5.html - Single page with sidebar on the left, grid ratio 9:3.
  26. single6.html - Single page with sidebar on the left, grid ratio 8:4.
  27. single7.html - Single page with sidebar on the left, second type, grid ratio 9:3.
  28. single8.html - Single page with sidebar on the left, second type, grid ratio 8:4.
  29. typography.html - Typography headings page.
  30. floats.html - Typography images and floats page.
  31. dropcaps.html - Typography dropcaps and blockquotes page.
  32. checklists.html - Typography lists and code page.
  33. separators.html - Typography separators page.
  34. buttons.html - Typography buttons page.
  35. boxes.html - Typography warning boxes page.
  36. separators.html - Typography separators page.
  37. tables.html - Typography tables page.
  38. tabs.html - Typography tabs page.
  39. toggle.html - Typography toggles page.
  40. grids.html - Typography grids and blocks page.
  41. pricing.html - Typography pricing tables page.
  42. portfolio.html - Portfolio with collage.
  43. portfolio-single.html - Portfolio detailed project page.
  44. portfolio-single2.html - Portfolio detailed project page.
  45. portfolio-single3.html - Portfolio detailed project page.
  46. contact.html - Contact page.
  47. mail.php - Very simple newsletter script.
  48. 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-213 code lines: General rules, resetting default browser styles, browser hacks etc. No-need for editing here.
	
	/* === PrettyPhoto Section === */
	
	214-418 lines: PrettyPhoto styles and Vegas styles
	
	/* === Slider Section === */
	
	419-630 lines: Nivo slider stylings.
	
	/* === User modular section 1 === */
	
	631-651 lines: Theme styling starts here, font-face rules.
	
	/* === User modular section 2 === */
	
	652-828 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 === */
	
	831-1067 lines: General typography; headings, blockquotes, code blocks, boxes etc.
	
	/* === Superbuttons === */
	
	1068-1335: The superbutton properties.
	
	/* === Grids section === */
	
	1335-1345: Grids, sidebar and widgets styling. More on how to use the grid - in showcase.html file.
	
	/* === Logo === */

	1346-1356 lines: Logo position
	
	/* === Menus === */

	1357-1510 lines: Menus

	/* === Entertainer/Collage/Slider === */
	
	1512-1595 lines: Entertainer (main page) styles.

	/* === Content === */
	
	1596-2119 lines: General content styles, text widgets, postboxes etc.
	
	/* === Pricing === */
	
	2120-2252: Pricing tables styles.

	/* === Sidebar === */
	
	2253-2370 lines: Sidebars and separator styles.

	/* === Tables and tabs === */
	
	2371-2491 lines: Tables and tabs styles.
	
	/* === Portfolio === */
	
	2492-2732: Portfolio styles.
	
	/* === Forms === */
	
	2733-3439: Forms styles
	
	/* === Footer === */
	
	3440-3607: Footer classes.
	
	/* === Helper classes === */
	
	3608-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 style.css file, and another image file that has background images in it.

Second step is taking the image file from there, and copying and replacing the original one that is in /THE THEME/css/img/utility_sprite.png.

Now, the third step, - the style.css file contains information about the colors of links and buttons in the theme. Open the style.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 651-831 and replace them with the code that you copied from the colored style.css (like on screenshot below). Save the style.css file and voila, you have new colors for the theme.

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.

You can ofcourse create your own color presets. I've tried to make it as easy for you as possible, so colors are grouped into sections. This allows for super fast changing particular color that shows up on the page. One thing to remember though, the script.js file also contains color data (to i.e. control on-hover animations), so you need to adjust those variables as well. They are on the very top of script.js file. Go on and experiment! :)


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 all custom scripts are commented and divided into sections for possible easy tweaks and changes.
  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. Nivo slider settings and prettyphoto settings can be found at the bottom of the file.
  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 1346 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: 33-98.


SEARCH There is possibility that you wont use search styling (if you will adapt the theme to some CMS), 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 143-148 in blog.html file.


COLLAGE & PORTFOLIO ITEMS/PORTFOLIO DETAILS To add/remove collage tiles simply add or.. remove list items that are placed in betweeen lines 104-127 in index.html file. There should be exactly 24 tiles prepared. However, not all will be displayed on smaller screens. In example, on screen 1920px wide images 1 to 18 will show (3 rows, 6 items in each), but on screen 2560px wide images 1 to 24 will show (3 rows, 8 items each). If you don't have as many items/images, be sure to leave empty "li" tags for the rest of TILES, the theme will then generate a blank tiles for them and add a random grey background to them. I.e I have 20 TILES, add 4 empty "li" tags:

The result on huge screens is going to be:

Each TILE has to have 2 images prepared, preferably one in black and white, other in color (doesn't have to be like that, it's just that one image is going to be default one and the other is its on-hover state). Images need to be of 318px by 181px size, and be named with _bw (for black and white) and _col (for color) affixes. The TILE link needs only the _bw link, as it automaticly assumes _col image exist in the same place as well.

Each TILE can have a small descriptive caption that shows when it's hovered, this caption goes into "data-description" field.

Each TILE can have link to either image/details set or just link to external page/site. For a link to external page/site use just the link:

For items that you would like to load a special slideshow/details page however, use: (the "#" is important)

Now you just need to make sure that #portfolio-single.html (from pic above) exists and is formatted to your needs. Edit portfolio-single.html then, and see:

"pdesc" stands for portfolio description, "pinfohead" for portfolio information header (or just more detailed info), and "backgroundimages" for just background images - you can add/remove as many as you like, and they will be added to background slider.

If you would like the portfolio item to have just short description, and not the detailed information - remove "pinfohead" and "showhide" divs. Portfolio-single2.html is example of such item.

THE PORTFOLIO PAGE WORKS THE SAME WAY, EXCEPT YOU ARE NOT LIMITED TO ANY NUMBER OF TILES, THEY ALL WILL BE SHOWING THERE.


SLIDER / WIDE SLIDER Slider is added feature to address those of you who won't like the COLLAGE, or won't have enough items/images to fill all the TILES. Slider templates are mainpage11.html and mainpage12.html. To add/remove slides simply add or.. remove images that are placed in betweeen lines 104-108 in mainpage11.html file (or mainpage12.html files). Slides can be images and images with links. In version 1.0 of the theme captions on the slider are not available. Possible implementation of such a feature is planned for 1.1 update.


ICONS The social icons in the footer can be added/removed by simply adding.. or removing :) another list items. I've prepared few icons for you to use, but any small icons will fit there. I recommend using iconfinder to find more.


GRIDS Best way to get familiar with the themes grids and container blocks is simply to study the grids.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.


NEWSLETTER LIST To get the newsletter script running, make sure you put maillist.csv into a folder with random name like "dsfad23asd355ccajr2", just random letters and numbers. Then edit mail.php and at line 116 change the "crazyfoldernamehere" to that folder name. Then just edit the rest of mail.php page just so it has same footer/menu as the rest of your site.


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