Cam you help to change my header?


#1

Hell, guys!

For a long time I wanted to change my template and I found one very nice.

I want to change my header little bit. I fount one blog which use the same template and there have some changes on the header.

They replace the lettering with image logo and the header have some effect - when the mouse is on the header it turned to white.

The problem is there I don’t know how to do all that with my header.

Here is a link for the blog with the original template. It’s for my my experiments anonymousdolls.blogspot.bg/

and here is the link on the blog with the changed header underneathstardoll.net

Can you please help me to change my header like the header from the second blog?


#3

This is the code from my template, but I don’t know hat to change to replace the lettering with image.

> <div class='lyco-search'>
> </div>
>   <div class='search-form'>
> <form action='/search' class='searchform' method='get'>
>   <input class='searchbar' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here'/>
>   <input class='searchsubmit' type='submit' value='Search'/>
> </form>
> </div>
> <div class='clear'/>

> <div class='blogouter-wrapper'>
>   <header class='header-wrapper'>
>   <div class='ct-wrapper'>
>     <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
>       <b:widget id='Header1' locked='true' title='Prikazna (Header)' type='Header' version='1' visible='true'>
>         <b:includable id='main'>

>   <b:if cond='data:useImage'>
>     <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
>       <!--
>       Show image as background to text. You can't really calculate the width
>       reliably in JS because margins are not taken into account by any of
>       clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
>       width if the user is using shrink to fit.
>       This results in a margin-width's worth of pixels being cropped. If the
>       user is not using shrink to fit then we expand the header.
>       -->
>       <b:if cond='data:mobile'>
>           <div id='header-inner'>
>             <div class='titlewrapper' style='background: transparent'>
>               <h1 class='title' style='background: transparent; border-width: 0px'>
>                 <b:include name='title'/>
>               </h1>
>             </div>
>             <b:include name='description'/>
>           </div>
>         <b:else/>
>           <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
>             <div class='titlewrapper' style='background: transparent'>
>               <h1 class='title' style='background: transparent; border-width: 0px'>
>                 <b:include name='title'/>
>               </h1>
>             </div>
>             <b:include name='description'/>
>           </div>
>         </b:if>
>     <b:else/>
>       <!--Show the image only-->
>       <div id='header-inner'>
>         <a expr:href='data:blog.homepageUrl' style='display: block'>
>           <img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl'/>
>         </a>
>         <!--Show the description-->
>         <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
>           <b:include name='description'/>
>         </b:if>
>       </div>
>     </b:if>
>   <b:else/>
>     <!--No header image -->
>     <div id='header-inner'>
>       <div class='titlewrapper'>
>         <h1 class='title'>
>           <b:include name='title'/>
>         </h1>
>       </div>
>       <b:include name='description'/>
>     </div>
>   </b:if>
> </b:includable>
>         <b:includable id='description'>
>   <div class='descriptionwrapper'>
>     <p class='description'><span><data:description/></span></p>
>   </div>
> </b:includable>
>         <b:includable id='title'>
>   <b:if cond='data:blog.url == data:blog.homepageUrl'>
>     <data:title/>
>   <b:else/>
>     <a expr:href='data:blog.homepageUrl'><data:title/></a>
>   </b:if>
> </b:includable>
>       </b:widget>
>     </b:section>
>     <b:section class='navigation' id='navigation' maxwidgets='1' showaddelement='no'>
>       <b:widget id='HTML99' locked='true' title='Navigation-Menus (Do Not Edit Here!)' type='HTML' visible='true'>
>         <b:includable id='main'>
>           <nav class='main-nav'>
>             <!-- Main menu -->
>             <ul>
>               <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
>               <li><a href='#'>Contact</a></li>
>               <li><a href='#'>Sitemap</a></li>
>               <li><a href='#'>Static Page</a></li>
>               <li class='searchbutton'/>
>               <li class='menu' title='Menu'/>
>             </ul>
> 	        <a href='#' id='pull'>Menu</a>
>           </nav><!-- /main-nav -->
>         </b:includable>
>       </b:widget>
>     </b:section>
>   </div>
>   </header>

#4

If you are referring to the “Prizkana” vs. the “Underneath Stardoll” logos on the respective tab bars (i.e., where the “Home”, “Contact”, “Site Map”, “Static Pages” tabs and the Search and “hamburger” icons are on your blog home page), the “Underneath Stardoll” logo is probably using a transparent background on the .png itself. If so, you would have to edit your logo in a graphics editor (such as Ifanview) rather than using CSS coding.