Freshlife (themejunkie) Theme – How To Change Logo Position

Customizing freshlife 2.0 logo

Owing 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

Must Read : How to customize Freshlife 2.0 Premium Theme From themejunkie easily

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

ALSO READ
7 WordPress Plugins to save your server some juice

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 .

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 these 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').'//img.3ptechies.com/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>";


 

Previous ItemQuick Heal for email spam on your primary email account
Next ItemHow to Move a WordPress site from /blog to root directory In Seconds
Obasi Miracle
Obasi Miracle is one of the brains behind 3rd Planet Techies. A webdesign afficionado and IT Support brain-box, he flourishes and revel in helping many-a-techies in their aspiration to become the best they can.

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