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 me or contact me via a form on www.soziev.com. Thanks so much!
Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Theme Venera. You'll see something like this:
theme_venera/ ├── assets/ | ├── css/ │ │ ├── theme_venera.css │ │ └── theme_venera_blue.css | ├── js/ │ │ ├── theme_venera.js │ │ ├── jquery-1.8.3.min.js │ | └── showcase.js | ├── fonts/ │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ | └── fontawesome-webfont.woff | └── images/ │ ├── lightbox/ │ | └── lightbox-images... │ ├── photos/ │ | └── photos-used-for-showcase-only... │ └── theme-images... ├── features/ │ ├── pricing_table.html │ ├── basic_elements.html │ ├── awesome_icons.html │ ├── about_us_page.html │ ├── page_not_found.html │ ├── coming_soon_page.html │ └── gallery_of_images.html ├── documentation/ │ ├── get_started.html │ ├── scaffolding.html │ ├── base_css.html │ ├── components.html │ ├── blog.html │ ├── pages.html │ └── javascirpt.html ├── blog/ │ ├── single_post.html │ ├── two_posts_per_line.html │ └── one_post_per_line.html ├── psd/ │ ├── font-oswald/ | | └── Oswald Fonts for Photoshop │ ├── homepage.psd │ └── browser-window.psd ├── index.html ├── contact.html └── create_account.html
Please note that all JavaScript plugins require jQuery to be included.
Theme Venera comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Theme Venera documentation.
Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Font Awesome, a great little font based icon set.
Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, breadcrumbs, testimonials and more.
Extra components for custom interface like pricing tables, image galleries, page not found, coming soon page and more.
Styles for blog related pages.
Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.
Together, the Components, Extra Components, Blog and JavaScript plugins sections provide the following interface elements:
With a brief intro into the contents out of the way, we can focus on putting Theme Venera to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.
Now, here's a look at a typical HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Theme Venera Template</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
To make this a Theme Venera template, just include the appropriate CSS and JS files:
<!DOCTYPE html>
<html>
<head>
<title>Theme Venera Template</title>
<!-- Add Theme Venera stylesheet -->
<link href="css/theme_venera.css" rel="stylesheet" media="screen">
<!-- Add Google Web Fonts support -->
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300,700" media="all" rel="stylesheet" type="text/css" >
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/theme_venera.min.js"></script>
</body>
</html>
And you're set! With those two files added, you can begin to develop any site or application with Theme Venera.
It's super easy. Just include a theme_venera_blue.css (contact me if you can not find this file) file instead of theme_venera.css in your html like so:
<!DOCTYPE html>
<html>
<head>
<title>Theme Venera Template</title>
<!-- Add Theme Venera BLUE stylesheet -->
<link href="css/theme_venera_blue.css" rel="stylesheet" media="screen">
<!-- Add Google Web Fonts support -->
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300,700" media="all" rel="stylesheet" type="text/css" >
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/theme_venera.min.js"></script>
</body>
</html>
Head to the docs for information, examples, and code snippets.
Visit the Theme Venera docs