Freshlife (themejunkie) Theme – How To Change Logo Position

Customizing freshlife 2.0 logoOwing greatly to how useful our previous short article on how to customize the front page dispay of Eleven40 studio press  Genesis Custom theme was to the few persons using

it I have decided to write another short article on how you can easily change the position of the image (logo.png) logo on the header of your themejunkie freshlife theme either left -center , center , right or right-center.

The default position for the logo is usually right and many users do not like it that way and may wanna change the position to suit the layout they want for their site , Now to achieve this you have to use custom css after uploading the logo file to your theme directory to replace the one that came with the theme .

1.

Moving your logo Out-rightly to the right Side of the header

Log in to your admin , click on editor –> Freshlife theme Options ==> Click on general settings ==> Copy and paste this code at the Custom css box below favicon.ico settings .

#logo                   { padding: 8px 20px 8px 0px; font-size: 14px; line-height: 20px; text-align: absolute;  float: right;}

save your settings and preview your options to be sure they are correct

2.

Moving your logo  to the center  of Your WordPress header

Use this css code

#logo {
background:#fff url('images/logo.png') no-repeat;
margin-left: 285px;
}

paste it in the customer css and save

3.

Tweaking it for other custom position

You can use the code provided above to get your logo displayed in any position of your choice , take for example

#logo {
background:#fff url('images/logo.png') no-repeat;
margin-left: 285px;
}

from the code above you can see that we assumed that the distance from left till center is just about 285px thus including that in our article .

ALSO READ
How to Insert Mobile Ads Unit in mobilepress - Wordpress

To play around with other custom position you have to keep increasing or decreasing the “285px” till you ‘ve achieved your desired position .

Note: if what you are using is the text logo then you have to customize it via header.php editing along this lines

<?php if (get_option('freshlife_text_logo_enable') == 'on') { ?>
<div id="text-logo">
<h1 id="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<p id="site-desc"><?php bloginfo('description'); ?></p>
</div> <!-- end #text-logo -->
<?php } else { ?>
<a href="<?php bloginfo('url'); ?>"><?php $logo = (get_option('freshlife_logo') <> '') ? get_option('freshlife_logo') : get_bloginfo('template_directory').'/images/logo.png'; ?><img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>" id="logo"/></a>
<?php }?>
 
<?php /* Header Ad */
if( get_option('freshlife_header_ad_enable') == 'on'){
echo "<div class='header-ad'>";
echo get_option('freshlife_header_ad_code');
echo "</div>";

 

Sign Up in Seconds


Join us to get latest updates (ONLY) delivered to your inbox. No Spam, We Promise!

4 COMMENTS

  1. This article is helpful now i can change the position ,thanks bro

LEAVE A REPLY

Please enter your comment!
Please enter your name here