Getting started

Overview of Theme Venera, its contents, and how to get started with a simple template.

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
  |   ├── less/
  │   │   └── list of pre-processed files for easy editing
  |   ├── js/
  │   │   ├── theme_venera.js
  │   │   ├── jquery-1.10.1.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.

Files Contents

  • index.html - markup for homepage
  • contact.html - contact page with contact form and map
  • create_account.html - create account example page
  • html_blog/single_post.html - markup for blog page with a single post and a side bar
  • html_blog/two_posts_per_line.html - markup for blog page list of posts, two per line and a side bar
  • html_blog/one_post_per_line.html - markup for blog page list of posts, one per line and a side bar
  • html_features/pricing_table.html - pricing table example
  • html_features/basic_elements.html - markup for most of the elements like testimonials, recent work, progress bars, alerts, forms, tables, tabs and pills, tooltips and many more
  • html_features/awesome_icons.html - list of font awesome icons with classes related to each icon
  • html_features/about_us_page.html - markup for about us page
  • html_features/coming_soon_page.html - markup for Coming Soon Page/Under Maintanance
  • html_features/gallery_of_images.html - markup for gallery of images

Docs sections

Scaffolding

Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

Base CSS

Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Font Awesome, a great little font based icon set.

Components

Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, breadcrumbs, testimonials and more.

Extra Components

Extra components for custom interface like pricing tables, image galleries, page not found, coming soon page and more.

Blog

Styles for blog related pages.

JavaScript plugins

Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

List of components

Together, the Components, Extra Components, Blog and JavaScript plugins sections provide the following interface elements:

  • Testimonials
  • Blog pages
  • Pricing Tables
  • Homepage Slider
  • Button groups
  • Button dropdowns
  • Navigational tabs, pills, and lists
  • Navbar
  • Labels
  • Badges
  • Page headers and hero unit
  • Thumbnails
  • Alerts
  • Progress bars
  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead
  • Contact page
  • Page not found
  • Coming soon page
  • Image Gallery
  • Create account page
  • Sign in widget
  • About us page

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.

What if I want to use a blue color scheme?

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