“Megnet” Documentation by “Themeloy Author” v1.0


“Megnet”

Created: 01/07/2013
By: Themeloy
Email: themeloy@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free drop your comment here. Thanks so much!


Table of Contents or Click on video tutorial for how to use theme.

  1. Installation
    1. Upload the Theme
    2. Active the Theme
    3. Upload Dummy Content (optional)
    4. Setup Menu & Reading Settings
    5. Set up Home Page
    6. Widget
  2. Using Theme
    1. Shortcodes
    2. Review setting
    3. Custom Sidebar
    4. Theme options
  3. CSS Files & Structure
  4. Javascript Plugins/Scripts
  5. PSDs
  6. Sources and Credits
  7. Changelog

A) Installation - top

You can upload theme files via FTP or Wordpress Theme Uploader.

Theme uploader: Install theme through FTP Active Themes

After theme is successfully uploaded, head on to Appearance » Themes, in Wordpress backend. There should be now one new theme called "Megnet - Responsive WordPress Themes" and click "Active"

If your worddpress thumbnail image doesn't work correctly you can use generate thumbnail after install

Upload Dummy Content (optional)

Notice that downloading Dummy Content may take time, depending on the speed of your internet connection!

  1. First go to Tools » Import and in there choose Wordpress.
  2. If you haven't install importer plugin, you will need to install Importer plugin. So install it and once it's done you can activate it.
  3. Now click Browse and navigate to "Megnet" folder.On Dummy content folder and select megnet.xml file and click Upload file and import
  4. Before submitting it, you may also want to check Download and import file attachments checkbox.
  5. And now you just need to wait. Importing can take a while, but it will save a whole lot of your time so just be patient.

 

Setup Menu & Reading Settings

At first you need to create the main menu, go to Appearance » Menus and create one (if you imported Dummy Content, it already exist). Now you will need to attach it into the theme in Theme Locations (upper left box). Learn more on wordpress menu Appearance Menus Screen

- Click Plus symbol "+" to create menu

- on the left columns you see as in the picture below

- check on categories or page you like to add then click "add to menu"

- After the menu has been add then click save menu on the right column.

Note: You can add new color to menu by adding class "color-1" to "color-10". As In the picture below.

Setup Home Page

This theme include default blogroll and custom home page. If you use custom home page you need to create blank page.

Go to "Page" » "Add New " » Put the page title and on the left side "Page Attribute" choose "Home Page" for the "template" click "publish" See image below

Then on "Setting" » "Reading" » tick on the "A static page" and choose the blank page that we just create.

.You can add new widget to home page like "Home Tab Widget" , "Home Recently Posts Grid".. You can drag & drop any feature to Home sidebar by add new widget to sidebar.

Widgets:

Example Image slider

You need to choose one or more categories. You didn't tick any categories then recently post default would be apply.


B) Using Theme top

Using shortcode Theme comes with custom shortcodes.

  1. Tab
  2. BlockQuote
  3. DropCap
  4. List style
  5. Buttons
  6. Image Carousel
  7. Notification
  8. Icons Font
Tab
[Htab]
[tab title="tab1"]Tab content 1[/tab]
[tab title="tab2"]Tab content 2[/tab]
[tab title="tab3"]Tab content 3[/tab]
[/Htab]
// title: name of the tab column name
// content: text or html
BlockQuote
[quote]blog quote[/quote]

DropCap
	[dropcap color="#888" type="square"]A[/dropcap]
    // type: you could add type "square", "round" or leave it empty
    // color: change any color code you like
List
	[ul class="list list-arrow_blue"] [li]List 1[/li] [li] List 2 [/li][/ul]    
Buttons
	[button class="btn_smallgray" url="#"]
    //url: link to any url
Image carousel
[image_thumbs width=300 id="1"]
[image_slider link="full_url_link" source="full_image_source"] Description [/image_slider]
[image_slider link="full_url_link" source="full_image_source"] Description [/image_slider]
[image_slider link="full_url_link" source="full_image_source"] Description [/image_slider]
[/image_thumbs]
// Width: width of your image carousel
// id: is a uniuqe id for image carousel.
// link: url of image when you click on image
// full_image_source: source of your image you want to display
// description: text description 
Notications
[info_warning]warning[/info_warning]

[info_error]error[/info_error]

[info_success]success[/info_success]

[info]info[/info]
Icons font
[icons icon_name="icon-adjust" icon_size="14px"]

Review setting

You can add review to your product by click "Enable review" on post.

Custom Sidebar You can add new custom sidebar by choosing Appearance » Custom Sidebars. As image below

Click add "add Sidebar" and then fill the pop up text with your text.

On the add new post page or on page Choose sidebars as image below.

Theme Options


C) CSS Files and Structure - top

I'm using amazium.css files for responsive layout in this theme. Other files such as style.css use for markup structure such header, typography and content etc.

CSS File include


       
                
                
        
          
        
        
        

        

D) JavaScript - top

This theme need below Javascript files for run effect.

Script File include

	
  
        
        
        
        
        
        
        
        
        
                  
          


Custom Script

You can add and edit script on custom.js

jQuery(document).ready(function($) {
	
$("#scroller").simplyScroll({autoMode: 'loop', speed: 4, frameRate: 40});

var mainmenu = $('#menu-top, #mainmenu').superfish({
                        delay: 500,
                        animation: {
                            opacity: 'show',
                            height: 'show'
                        },
                        speed: 'fast',
                        autoArrows: false,
                        dropShadows: false,
						disableHI: true
                        //add options here if required
     });
					


//////////////////////////////////////////////////////////////////////////	
// IMAGE LIGHTBOX
//////////////////////////////////////////////////////////////////////////

//Hovers images
$('.triple img, .review-post img, .widget.rec img, .themeloy-popularpost-widget img, .bi_recent_entries img, .carousel img, .home-page-tab-widget img, .cat_recent_entries img, .flickr_badge_image img').hover( function() {
    $(this).stop().animate({opacity:0.7},{queue:false,duration:200});  
   }, function() {
     $(this).stop().animate({opacity:1},{queue:false,duration:200});  
    });

	
	  var $ticker = $("#tickersearchform");
	  var $social = $(".socialdrop");	
	  $ticker.data('bSearch', false);
	  $social.data('cSocial', false);
	  
	 closeSearch = function () {
	
		  $ticker.data('bSearch', false);
		  $ticker.slideUp(400,'easeInOutQuart');
		 
	 };
	 	 
	 openSearch = function () {
		
		 $ticker.data('bSearch', true);
		 $ticker.slideDown(400,'easeInOutQuart');
		
	 }
	 
	 $body = $("body");
	 $("#tickersearch").on("click", function ( e ) {
		 e.preventDefault();
		 e.stopPropagation();
		 $isSearch =  $ticker.data('bSearch');		 
		 if (  $isSearch === true ) { 
		 	closeSearch ();			
		}else {
			 openSearch ();
			 closeSocial ();
			$ticker.on("click", function ( e ) { e.stopPropagation(); });
			 $body.one("click", function ( e ) {  closeSearch ();	 });
		 }
	 } );
	 
	 closeSocial = function () {
		 
		 $social.data('cSocial', false);
		 $social.slideUp(400,'easeInOutQuart');	
	 }
	 
	 openSocial = function () {
		 
		 $social.data('cSocial', true);
		 $social.slideDown(400,'easeInOutQuart');	
	 }
	 
	  $("#tickersocial").on("click" , function ( e ) {
		  e.preventDefault();
		  e.stopPropagation();
		  
		 $cSocial =  $social.data('cSocial');
		
		 if (   $cSocial === true ) { 
		 	closeSocial();			
		}else {
			 openSocial ();
			 closeSearch();
			 $social.on("click", function ( e ) { e.stopPropagation();  });
			$body.one("click", function ( e ) { closeSocial();  });
		 }
	  } );
	 
	 

		if(jQuery().flexslider) {
		  $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
		}
		
						 
        selectnav('mainmenu', {
            label: 'Navigation Menu',
            nested: true,
            indent: '-'
        });
		 selectnav('menu-top', {
            label: 'Navigation Menu',
            nested: true,
            indent: '-'
        });

	
	  var $itemcarousel = $('.jcarousel');
        if( $itemcarousel.length ) {
            var caroWidth = 220;
            $itemcarousel.jcarousel({
                wrap: 'both',
				//auto: 2, 
				animation : 1000,
                easing: 'easeInOutExpo',//easeInBack, easeOutQuart
                setupCallback: function(carousel) {
                    carousel.reload();
                },
                reloadCallback: function(carousel) {
                    var num = Math.round(carousel.clipping() / caroWidth);
                    carousel.options.scroll = num;
                    carousel.options.visible = num;
                }
            });
 
        }  
		
		
		$().UItoTop({ scrollSpeed : 800,easingType: 'easeInOutExpo' });
		
		
		
		    var $tabsNav    = $('.tabs-nav'),
        $tabsNavLis = $tabsNav.children('li');            
        $tabsNav.each(function() {
            var $this = $(this);
            $this.next().children('.tab-content').stop(true,true).hide()
            .first().show();
            $this.children('li').first().addClass('active').stop(true,true).show();
        });
        $tabsNavLis.on('click', function(e) {
            var $this = $(this);
            $this.siblings().removeClass('active').end()
            .addClass('active');
            $this.parent().next().children('.tab-content').stop(true,true).hide()
            .siblings( $this.find('a').attr('href') ).fadeIn();
            e.preventDefault();
        });
		
		
			$(".close").live("click",function(){
			$(this).parent().fadeOut('slow');
		});			
		
//////////////////////////////////////////////////////////////////////////	
// END SCRIPT
//////////////////////////////////////////////////////////////////////////
});
        
        

D) PSD Files - top

This template does not include PSD Files.


G) Sources and Credits - top

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

PHP Scripts

JS & CSS

Fonts



Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Themeloy

Go To Table of Contents