1. Start
  2. Folder Structure
  3. HTML Structure
  4. CSS Files and Structure
  5. JavaScript
  6. Elements
  7. Sources and Credits

Hotmagazine

News & Magazine HTML5 Template

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form here. Thank you very much!

Hotmagazine is Html5 + CSS3 News & Magazine template and works fine in all major browsers and IE from version 9. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each section parts.

Lets take a closer look at the structure of Html, Css, JavaScript...

Folder Structure

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.

Here they are:

  1. HTML - Main folder for template
  2. Documentation - Documentation for Hotmagazine site template

When you open HTML Package you will see 11 Folders corresponding 11 versions of our Hotmagazine.

Here they are:

  1. dark-version
  2. default
  3. design
  4. fashion
  5. game
  6. politics
  7. showbiz
  8. sport
  9. tech
  10. travel
  11. video

HTML Structure

The Default version of Hotmagazine template contains 35 html pages. These pages are

  1. 404-error.html
  2. allfooter.html
  3. autor-details.html
  4. autor-list.html
  5. comming-soon.html
  6. contact.html
  7. forum-category.html
  8. forum-topic.html
  9. forums.html
  10. header2.html
  11. header3.html
  12. header4.html
  13. header5.html
  14. home2.html
  15. home3.html
  16. home4.html
  17. home5.html
  18. home6.html
  19. index.html
  20. news-category1.html
  21. news-category2.html
  22. news-category3.html
  23. news-category4.html
  24. news-category5.html
  25. news-category6.html
  26. single-post.html
  27. single-post2.html
  28. single-post3.html
  29. single-post4.html
  30. single-post5.html
  31. single-post6.html
  32. single-post7.html
  33. single-post8.html
  34. underconstruction.html
  35. video.html

Body part of the Html file contains a main div tag container, and this is divided in other main sections and each of these sections is further divided into smaller parts:

  1. CONTAINER

    Main building blocks of Container looks like in the photo


  2. Header

    Header is based in boostrap framework with logo, advertisement, navigation menu, search bar, and topline with weather, time, log-in and social icons.




  3. CONTENT Sections
    • Different section

      • we have included different sections, such as ticker new, heading section, block-wrapper etc.

      Most important section is block wrapper with with news posts block and sidebar, let's see it structure below:



  4. Footer

    Different widgets, last line with copyright line and navigation menu





Grid:

Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

The default Bootstrap grid system utilizes 12 columns, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns stack Hotmagazinely.

For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).




Given this example, we have two div tags with class .col-md-6, making for 12 total columns and a complete row.

Move columns to the right using .col-md-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-md-offset-4 moves .col-md-4 over four columns.

CSS Files and Structure

In folder "css" you will find 9 CSS files

  1. bootstrap.min.css
  2. ticker-style.css
  3. magnific-popup.css
  4. flexslider.css
  5. jquery.bxslider.css
  6. font-awesome.css
  7. owl.carousel.css
  8. owl.theme.css
  9. style.css

Description:

  1. In style.css which is main style sheet for "Hotmagazine" site template. This file contains all of the specific stylings for the page.

    To edit a specific part of the page, simply scroll down, every section is well commented and you can find easy the appropriate style that needs to be edited. In example:




  2. bootstrap.min.css - grid structure based on Bootstrap Framework.

  3. Styles for bxslider. i have used this slider in different slide news posts

  4. Also we have a unique files owl.carousel.css and owl.theme.css for carousells posts

  5. Also we have a file magnific-popup.css for video post. This enable opening video in popup iframe from youtube or vimeo. Also this file is used for login popup you have active only in forum pages, if you click on login at the topline in header.

  6. Also we have a file for font awesome font-awesome.css . If you want to know more about the awesome fonts you can read more here

  7. ticker-style.css is for news ticker, or breaking line posts.



Less files

we have included also two files in folder less

  1. variables.less
  2. style.less


if you want to use less files first you should install less (see here how to install), or you have the second option to use less.js script

If you use less.js you have to work in localhost or in your server and after that you should replace style.css with style.less




In variables.less file you have all commands well commented where you can place your color scheme, font-family etc




JavaScript

In folder js you will find 16 javascript files, but all adjustments are in just one file: "script.js".

All JavaScript files:

Description:

Elements

I have used many elements, i will show the some of these elements, it's very easy to implement in which part of your template you want. every section is well comented, just grab that section and place where ever you want in your page.

Note: Using other elements from other version to another, is not complicated if you are familiar with html and css coding, you have to copy that part of html and important is also to copy css part. if you have problem with this our web developer can help you make some movements.

Description

Sources and Credits

I've used the following images, icons or other files as listed.

Once again, thank you for purchasing this Template. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Template. Here is to be honest a simple documentation because we think there is no problem to implement your elements in this template because the code is clean and well commented. For more general question related to this Template on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you are satisfied with "Hotmagazine - site template" please go to your downloads section on ThemeForest.net and rate Hotmagazine with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you :)

Hope that you will enjoy Hotmagazine as much as I've enjoyed developing this template.

Kind Regards,
Nunforest Team