#Intro

AstroBlog - HTML Bloging Template

AstroBlog - HTML Bloging Template is beautiful , clean and eye catching html template.You can use this template to create your nice blog website.We have build this template WordPress suitable. So when you will convert this template into wordpress , it will be easier for you.

Created:04/16/2019

Last updated:04/16/2019

Author name:Saiful

Author user:Codeastrology

Email:codeastrology@gmail.com

Thank you for buying this template. 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 or you can contact with the email provided. Thanks so much.

#Getting Start

When you download it form Themeforest you will get a zip file.This file have all the source files and folders. Unzip that file and you will see some file and folders. There is a screenshots folder, documentation folder and a zip file named "Main_File_Astroblog_1.11.zip". In this zip file you will get the main files of your template. Just like this screenshot

Follow the steps below to get started with your Site Template:

  1. Open the ... /Template Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. There is two version of template. If you want to use the dark version, you need to use the files inside version-02 folder
  4. Make sure you upload the required files/folders inside listed below:
    • css – Stylesheets Folder
    • fonts – Fonts Folder
    • images – Images Folder
    • js – Javacripts Folder
    • index.html – (and All HTML files that you want)

    The other files can be used according to your preferences.

  5. You’re now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Basic template Structure

The template has a responsive layout and is based on the Bootstrap V3+ Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.

#General Info

Editing Requirements

  • Notepad++ is enough to edit the template code like html,css,Javascript. You can use any code editor.

#Template Edit

Edit Code

Every section has started with section tag

For your dynamic content you need to place content inside col-lg-6 col-md-6 col-sm-12 div

                                  

<section class="ab_header_top ab_hader_top_area"> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12"> your content goes here </div> </div> </div> </section>

Edit Slider Section

To change the slider title find the line

                                    

<div class="ab_featured_slide_content text-center"> <h1><a href="#">Your Slider title goes here</a></h1> </div>

Add Template default background Color

If you want to use a template default background color(Blue) to any section use ab_blue class

                                    

<div class="ab_blue "> <h1><a href="#">Your content goes here</a></h1> </div>

Edit section title

For edit the section title find a div with ab_section_title class . Just like this. Put your title inside h2 tag

                                    

<div class="ab_section_title "> <h2>Your section title goes here</h2> </div>

Edit Slider Image

To change the slider image you need link up the image into the css file. Find this class in the css file and link up your slider image. Below code for slider one.

                                    

.ab_featured_single_slide_1{ background: url(../images/slider_1.jpg)no-repeat; }

Edit the slider text content inside the <p> tag.

<div class="ab_featured_single_slide_2 text-center">
    <div class="ab_overlay"></div>
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-8 col-sm-8">
                <div class="ab_featured_slide_content text-center">
                    <h1><a href="#">Lorem ipsum dolor sit.</a></h1>
                        <ul class="ab_slide_admin">
                            <li><a href="#" class="white_link">September 25, 2018</a></li>
                            <li><span>Posted By <a href="#">Saiful Islam</a></span></li>
                        </ul>
                    <p>Slide text content goes here.</p>
                </div>
        </div>
    </div>
</div>                                   
                                

Social Icon

All icons are generated by the plugin "Font-Awesome". List of all the icons can be found here.Read the documentation of fontawesome - it is described in detail how to change the icons and their size.

 <div class="ab_head_right">
    <ul class="social_link">
        <li><a href="#"><i class="icofont-facebook"></i></a></li>
        <li><a href="#"><i class="icofont-twitter"></i></a></li>
        <li><a href="#"><i class="icofont-instagram"></i></a></li>
        <li><a href="#"><i class="icofont-linkedin"></i></a></li>
        <li><a href="#"><i class="icofont-pinterest"></i></a></li>
    </ul>
</div>                                   
                                

#Files structure

AstroBlog HTML Template
  • assets
    • css
      • animate.css
      • default.css
      • responsive.css
      • style.css
    • fonts
      • icofont
        • fonts
          • icofont.eot
          • icofont.svg
          • icofont.ttf
          • icofont.woff
          • icofont.woff2
        • icofont.css
  • images
    • All demo images
  • js
    • custom.js
    • jquery-1.12.4.min.js
    • modernizr-3.6.0.min.js
  • vendor
    • bootstrap
      • css
        • bootstrap.min.css
      • js
        • bootstrap.min.js
        • popper.min.js
    • magnific_popup
      • jquery.magnific-popup.min.js
      • magnific-popup.css
    • meanmenu
      • jquery.meanmenu.js
      • meanmenu.css
    • slick
      • ajax-loader.gif
      • slick.css
      • slick.min.js
      • slick-theme.css
  • version-02
  • 404.html
  • blank-template-with-header-footer.html
  • contact.html
  • fashion.html
  • index.html
  • lifestyle.html
  • top.html
  • travel.html
  • single_blog.html
  • single_blog_full_width.html
  • single_blog_left_sidebar.html
  • readme.txt

#Template Sections

Home Light Version

Home Dark Version

Slider Section

Top Article Section

Featured Article Section

Side Navigation Bar

Side Navigation Bar

#credits

I've used the following JavaScript Library.

jQuery

jquery

Bootstrap v4.1

https://getbootstrap.com/

#Changelog

v1.0 (04/16/2019)

  • Initial release

Once again, thank you so much for purchasing AstroBlog- HTML Bloging Template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question related to the template on Themeforest, Feel free to knock at our email: codeastrology@gmail.com or you might consider visiting the forums and asking your question in the "Item Support" section.

Saiful Islam