Saturday, December 14, 2013

Add meta slider right next to logo in wordpress theme Tiga

When you upload logo in wordpress theme Tiga, there is a big space in header next to logo.
So, I want to add the slider in that vacant space.
It is better to use child theme for revision.

*** Create Slider and get a code to insert in the template
I use meta slider and I installed and activated it.

After adding slide images, select Nivo slider. I found other option does not work well in some browser. Then, select Hidden for navigation.

At bottom, find the code in Usage. I will use Template Include
Full Template Include code is just like <?php echo do_shortcode("[metaslider id=233]"); ?>

** Insert code in header.php
You will find the following in header.php
 
   <div class="site-branding">
    <?php tiga_site_title(); ?>
   </div><!-- end .site-branding -->

   <?php get_template_part( 'menu', 'primary' ); // load menu-primary.php file. ?>

I will use table and it will be changed as follows:

<table  width="900px" height="30px" border="0" cellpadding="0" ><tr>
<td align="center" valign="center" width="250px" height="30px">

   <div class="site-branding">
    <?php tiga_site_title(); ?>
   </div><!-- end .site-branding -->
</td>

   <?php get_template_part( 'menu', 'primary' ); // load menu-primary.php file. ?>



<td align="left" valign="center" width="500px" height="30px">
<div><?php echo do_shortcode("[metaslider id=233]"); ?></div>
</td></tr></table>


It will show metaslider next to your logo in header.

** Hide lines of table
After revising header.php, logo and slider will be shown with table lines. Let's hide lines by css.

In header.php, there is following css:

/*  STANDARD TABLE  ------------ */
table {
  width: 100%;
}

table,
td {
  border: 1px solid #e8e8e8;
  border-collapse: collapse;
  margin: 1.5em 0;
  padding: 5px 10px;
}


Revise border as follows:

/*  STANDARD TABLE ----------- */
table {
  width: 100%;
}
table,
td {
  border: 0px solid #ffffff;
  border-collapse: collapse;
  margin: 1.5em 0;
  padding: 5px 10px;
}


Paste it in Appearance > Theme Options > Custom Code > Custom CSS.

 

Thank you.

No comments:

Post a Comment