Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Making the Header change color when hovering?

    Hi Guys,

    Still working on this blogger template but struggling to make the header highlight to color:#3273D3 when hovering over the main title of the page!

    You can see it does not do it on the "Welcome to the blog" title. www.aaronhowarth1.blogspot.com

    Here is the code for the template I've tried all sorts and can't get the title to highlight!

    I've included the parts of the code I THINK would need to be edited not sure though?

    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
      <head>
        <b:include data='blog' name='all-head-content'/>
    
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content='Blog about everything and anything from sports, movies, tv shows and games to general topics, news and the media' name='description'/>
    <meta content='blog, oldham, oafc, latics, owl, movies, tv shows, games, films, xbox 360, playstation 3, sports, ufc, wwe, mma, entertainment, espn, hbo, cnn, sky sports, football, soccer, cricket, rugby, superbowl, wrestlemania, the walking dead, dexter, lost, heroes, entertainment' name='keywords'/>
    </b:if>
    
    <!-- Start www.bloggertipandtrick.net: Changing the Blogger Title Tag  -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title> 
    <b:else/>
    <title><data:blog.pageName/> ~ <data:blog.title/></title>
    </b:if>
    <!-- End www.bloggertipandtrick.net: Changing the Blogger Title Tag  -->
    Code:
       <div id='header-wrapper'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Welcome to my blog! (Header)' type='Header'/>
    </b:section>
    <div style='clear:both;'/>
    Code:
    <style type='text/css'>
    body{background:url(http://1.bp.blogspot.com/_dZM2bJJMfBs/TQfsPKonW8I/AAAAAAAAAzE/6EeWf6eC34w/s000/body-bg.jpg) repeat fixed;color:#444;font:12px/1.1em Segoe UI,Arial,Verdana,sans-serif;margin:0px;padding:0px;}
    a:link,a:visited{color:#3D3E3E;outline:none;text-decoration:none;}
    a:hover{color:#3273D3;outline:none;}
    a img{border-width:0}
    #body-wrapfull{margin:0px;padding:0px;}
    #body-wrap{margin:0px 0px 0px 0px;padding:0px;}
    #wrap2{margin:0px;padding:0px;}
    
    h1,h2,h3,h4,h5,h6{color:#333;letter-spacing:-1px;text-shadow:1px 1px 1px #E2EEF1;line-height:1.3em;font-family:&quot;Myriad Pro&quot;,&quot;Myriad Web&quot;,Myriad,&quot;Segoe UI&quot;,Calibri,Arial,sans-serif}
    h1{font-size:22pt}
    h2{font-size:18pt}
    h3{font-size:16pt}
    h4{font-size:14pt}
    h5{font-size:12pt}
    h6{font-size:10pt}
    
    .italic{font-style:italic}
    .clearfix:after{visibility:hidden;display:block;font-size:0;content:&quot; &quot;;clear:both;height:0}
    * html .clearfix{zoom:1}
    *:first-child+html .clearfix{zoom:1}
    ul{list-style:square;margin:0 0 18px 1.5em}
    ol{list-style:decimal;margin:0 0 18px 1.5em}
    ol ol{list-style:upper-alpha}
    ol ol ol{list-style:lower-roman}
    ol ol ol ol{list-style:lower-alpha}
    ul ul,ol ol,ul ol,ol ul{margin-bottom:0}
    dl{margin:0 0 24px 0}
    dt{font-weight:bold}
    dd{margin-bottom:18px}
    strong{font-weight:bold}
    cite,em,i{font-style:italic}
    big{font-size:131.25%}
    ins{background:#FFC}
    blockquote{font-style:italic;padding:1em 2em;background:#EFEFEF}
    pre{background:#f7f7f7;color:#222;line-height:18px;margin-bottom:18px;padding:1.5em}
    abbr,acronym{border-bottom:1px dotted #666;cursor:help}
    ins{text-decoration:none}
    sup,sub{height:0;line-height:1;vertical-align:baseline;position:relative}
    sup{bottom:1ex}
    sub{top:.5ex}
    input[type=&quot;text&quot;],textarea{padding:2px;background:#f9f9f9;border:1px solid #ccc;resize:none;box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1)}
    
    /* Header-----------------------------------------------*/
    #header-wrapper{width:960px;height:140px;margin:0px 0 10px 0;overflow:hidden;}
    #header-inner{background-position:center;margin-left:auto;margin-right:auto}
    #header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:100%;overflow:hidden;}
    #header h1{margin:0 5px 0;padding:25px 0 0 0px;color:#494749;font-size:48px;text-shadow:none;}
    #header .description{padding-left:10px;color:#282725;text-shadow:none;font-weight:bold;padding-top:5px;margin-top:0px;}
    #header h1 a,#header h1 a:visited{color:#494749;text-decoration:none;text-shadow:none;}
    #header h2{padding-left:15px;color:#736f74;font:14px Arial,Helvetica,Sans-serif}

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Code:
    #header h1 a:hover{color:#3273D3}
    is what you need.

    At the moment this rule:

    Code:
    #header h1 a, #header h1 a:visited {
        color: #494749;
        text-decoration: none;
        text-shadow: none;
    }
    is more specific than

    Code:
    a:hover{color:#3273D3;outline:none;}
    and hence takes precedence.

    If you use Firebug you can see the css rules for an element and which one is being applied.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello aaronoafc,
    You just need to be specific when directing :hover toward your header so it does not affect all anchors.
    Add this bit to your CSS - h1.title a:hover {background: #f00;}

    .../edit Looks like I'm the echo this time.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks for the reply it's almost their however it turns the background a different color and keeps the text black, I meant I just want the text to change to color:#3273D3.

    I tried changing it from background to color however it did nothing yet this one works for the articles beneath:

    a:hover{color:#3273D3;outline:none;}

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Actually, it looks like you might need:

    Code:
    #header h1 a:hover{color:#3273D3 !important;}
    although I can't quite see why at the moment.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Oh, of course. #header h1 a:visited is equally specific as #header h1 a:hover, so you can either add the !important as my previous post or just amend this:

    Code:
    #header h1 a, #header h1 a:visited {
        color: #494749;
        text-decoration: none;
        text-shadow: none;
    }
    to this:

    Code:
    #header h1 a{
        color: #494749;
        text-decoration: none;
        text-shadow: none;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •