1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
Welcome to GadgetBit!

We are a community of technology enthusiats.

If you are already a registered member then you can login here

If you are new to the site then why not join up? It will only take a couple of minutes to register, by doing so all adverts will be removed from the site. You can register here or you can use your Facebook or Twitter account.

Add an extra image to the right of site_logo

By Creaky · Oct 10, 2015 ·
Tags:
  1. Creaky
    Open styles/yourstyle/theme/common.css and find:
    Code:
       /* Search box
    
       --------------------------------------------- */

    After add:
    Code:
       #banner-pos {
    
         position: relative;
    
         margin-right: 90px;
    
         float: right;
    
       }
    
    

    Refresh your theme.

    Open styles/yourstyle/template/overall_header.html

    Find: (this may only be a partial search if you have made changes previously but it is about line 96)
    Code:
       <div id="wrap">
    
         <div class="border-left">
    
         <div class="border-right">
    
         <div class="border-top">
    
         <div class="border-top-left">
    
         <div class="border-top-right">
    
           <div class="inside" style="direction: {S_CONTENT_DIRECTION}; ">
    
             <a id="top" name="top" accesskey="t"></a>
    
             <div id="page-header">
    
               <div class="headerbar">
    
                 <div class="inner"><span class="corners-top"><span></span></span>
    
                     <div id="site-description">
    
                   <a id="logo">{SITE_LOGO_IMG}</a>
    
                  <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
    
                 </div>

    After add:
    Code:
       <div id="banner-pos">
    
       <img src="/url_image_location/ur_image.gif" alt="" />
    
       </div>

    Refresh your template and imageset.

    Note: You can adjust the position of your image relative to the right hand side by playing with the value:
    Code:
       margin-right: 90px;
    In #banner-pos

    If you find the image doesn't sit correctly in the vertical you can add:

    [code[/code]
    margin-top: 5px;[/code]


    Like this:
    Code:
       #banner-pos {
    
         position: relative;
    
         margin-right: 90px;
    
         float: right;
    
         margin-top: 5px;
    
       }
    To #banner-pos

    Adjust:
    Code:
       margin-top: 5px;
    In #banner-pos accordingly

    I hope that's clear enough

    Original source: Knowledge Base - Add an extra image to the right of site_logo

    Share This Article