00%
images loaded

Template Structure

To get to know what you've bought.

Peel template

  • /css/ (Styles)
  • /fonts/ (Icons)
  • /images/ (Images)
  • /js/ (Javascript, mostly jQuery)
  • /modules/ (Modules, like the Titan Slider)
    • /img-scroller/
    • /tera-lightbox/
    • /titan-slider/
  • /php/ (mail script)
  • contact.html (Contact page - uses mail script)
  • favicon.png
  • index.html (Home)
  • journal-single.html (Single Journal page)
  • journal.html (Journal overview)
  • profile.html (Profile page)
  • project-single.html (Project single)
  • projects-1-column.html (Project overview - 1 column)
  • projects-2-column.html (Project overview - 2 columns)
  • projects-4-column.html (Project overview - 4 columns)
  • projects-masonry.html (Projects overview - Masonry)

HTML Structure

Most pages have a structure like this:

<html>
	<head> // Scripts
	<body> // Add your favorite helper classes here
		<div id="wrapper" class="animsition">
			<div id="loader" class="fh"></div> // The loader
			<header id="main-header"> 
				// Logo and main navigation
			</header> 
			<div id="inner"> 
				// Inner
				<section class="x"> 
					// A section, may contain a portfolio grid or content
				</section> 
			</div> 
			<footer> 
				// The copyright footer (on the very bottom)
			</footer> 
		</div> 
		// Scripts
	</body>
</html>
/*----------------------

	Peel - CSS 1.0
	By Themanoid

	Table of Contents

	00. Loader
	01. Buttons
	02. Filters
	03. Forms
	04. Header
	05. Hero
	06. Lists
	07. Thumbs
	08. Style
	09. Footer
	10. Accordion

-----------------------*/

CSS Structure

The Elements.css file has all the styled elements used in Peel. You can modify this stylesheet at your own risk.

To adjust styles, it's better to override them using the custom.css file, also included with Peel.

Next up: Grid