Arras Theme: How to add & center-Position image logo

The only available option is the text logo without even the provision for custom header. This short tutorial will guide you on how you can replace the text description with an image logo in the latest arras free premuim wordpress theme.

Let me show you three (3) easy practicable method you can use in changing that boring text description in your arras theme powered blog header section with either a custom header logo or a simple image logo.

#1.

By Modifying your Header.php :

This can be done in 3mins just log in to your wordpress dashboard and Navigate to ==> appearance==>Editor  ==> Header.php

Search for

<div id="header">
    <div id="branding" class="clearfix">
    <div class="logo">
        <?php if ( is_home() || is_front_page() ) : ?>
        <h1 class="blog-name"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
        <h2 class="blog-description"><?php bloginfo('description'); ?></h2>
        <?php else: ?>
        <span class="blog-name"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></span>
        <span class="blog-description"><?php bloginfo('description'); ?></span>
        <?php endif ?>
    </div>

And Replace it with

<div id="header">
	<div id="branding" class="clearfix">
	<div class="logo">
		<a href="your home page url"><img src="your logo image url"></a> 
	</div>

Remember to link the logo the your homepage by adding the homepage link as well as your new logo image path or full url.

#2.

By Modifying the Default.css :

This is another easy tweak for you ,,, just log in to your cpanel and navigate to wp-contents=>themes=>arras=> Css=>Styles

open default.css and search for :

.logo

or

{ max-width: 590px; float: left; font-weight: 700; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; text-transform: uppercase; }

and replace the side within {} tags with this code

{ max-width: 590px; float: left; background:#fff url('images/logo.png') no-repeat; font-weight: 700; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; text-transform: uppercase; }

Save and close to preview changes.

#3.

Placing your logo in a custom header image :

This is only necessary if you want to do a whole lot of edits in the header section instead of just the logo section using custom image. just design an image of exact size and add your logo, slogan and other stuff to various position of your choice including the center position. Navigate to the exact path in option 2 above and search for 

#header					{ background: #fff; border-bottom: 5px solid #383332; }

Replace with

#header					{ background: #fff url('images/logo.png') no-repeat; border-bottom: 5px solid #383332; }

Now following all the above methods you can easily center your logo by adding this lines in between the {} tags after searching for

.logo

add

margin-left: 285px;

to the other lines there to center your image logo…

Love this tips and guide? drop a comment and share it with your friends too