Problem with TypePad banner

Discussion in 'Web Design and Development' started by p0intblank, Dec 7, 2009.

  1. p0intblank macrumors 68030

    Joined:
    Sep 20, 2005
    Location:
    New Jersey
    #1
    I'm setting up a blog for a client with TypePad. I've been using this service for a while now, but this is the first blog that is giving me a problem. For whatever reason the banner graphic I designed isn't showing through above the blue gradient. I've inserted all the necessary custom CSS I could find.

    Here's the site: http://www.thestorybehindthemusic.com/

    Any advice?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Using Firebug it looks like you define the CSS for #banner-inner in 3 spots; lines 16, 109, 944 in style.css. The two later ones create a background with the blue gradient. I'm guessing you want to get rid of that so you can delete those lines.
     
  3. p0intblank thread starter macrumors 68030

    Joined:
    Sep 20, 2005
    Location:
    New Jersey
    #3
    Thanks for the reply. I am only seeing one indication of #banner-inner within the custom CSS code. This is what I have to work with:

    Code:
    #banner { height: 122px; background-image: url(http://www.thestorybehindthemusic.com/images/header_01.png);
    background-position: 0px 0px; background-repeat: no-repeat; }
    
    #banner-inner { overflow: visible; padding: 0; } #banner-header { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #banner-header a { display: block; left: 0; top: 0; height: 122px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }
    
    
    /* three-column tweaks */
    
    	.layout-three-column #container
    	{
    		width: 980px;
    	}
    
    	.layout-three-column #alpha
    	{
    		width: 123px;
    		
    	}
    
    	.layout-three-column #alpha-inner
    	{
    		border: 0;
    		padding: 15px 15px 15px 15px;
    		background: #FFFFFF;
    	}
    
    	.layout-three-column #beta
    	{
    					width: 600px;
    		
    		
    	}
    
    	.layout-three-column #beta-inner
    	{
    		border-left: 1px solid #000000;
    		padding: 15px 15px 15px 14px;
    		background: #FFFFFF;
    	}
    
    	.layout-three-column #gamma
    	{
    		width: 160px;
    		
    	}
    
    	.layout-three-column #gamma-inner
    	{
    		border: 0;
    		padding: 15px 15px 15px 15px;
    		background: #FFFFFF;
    	}
    I can't figure out where this blue gradient is coming from; at least from the look of this code.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
  5. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #5
    You are using an external style sheet with a URL of http://www.thestorybehindthemusic.com/style.css. In this style sheet you are using an @import directive to import three other external style sheets.

    One of these, http://www.thestorybehindthemusic.com/.shared/themes/jim/magnetic/styles.css, has two selectors for #banner-inner, like so;

    Code:
    #banner-inner {
        background: url(header-bg-2.gif) repeat-x 0 0;
        height: 90px;
        padding: 30px 40px 0 40px;
    }
    
    #banner-inner {
        background: url(header-bg-2.gif) repeat-x 0 0;
    }
    The background declaration is where the blue gradient is coming from.
     
  6. p0intblank thread starter macrumors 68030

    Joined:
    Sep 20, 2005
    Location:
    New Jersey
    #6
    As far as I can tell, there's no way to directly edit the style.css code within TypePad. Unfortunately there's no FTP support. Maybe I can add my own custom CSS to hide the background?

    Edit: Well I got it working, but now I can't seem to hide the blog's title, even after inserting the usual code. That's okay, though; I can figure it out from here. Thanks for the help, everyone! I appreciate it.
     
  7. p0intblank thread starter macrumors 68030

    Joined:
    Sep 20, 2005
    Location:
    New Jersey
    #7
    Okay, so I'm not done after all. Now the container's widths aren't working properly. This is the code I used to hide the gradient background:

    Code:
    #banner-inner {
        background: url() repeat-x 0 0;
    I simply removed the background's URL within the source and that seemed to work. However something went wrong with the widths. Any idea why this happened?
     
  8. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #8
    You omitted the closing brace for the selector. It should be (I've also taken the liberty of changing the code);

    Code:
    #banner-inner {
        background-image: none !important;
    }
    To be honest the CSS is a bit of a mess. There are numerous duplicate selectors with both duplicate and additional declarations. If you have no other way but to use duplicate selectors and declarations consider using !important like I have. These declarations stand a better chance of taking precedence when the styles cascade.
     
  9. p0intblank thread starter macrumors 68030

    Joined:
    Sep 20, 2005
    Location:
    New Jersey
    #9
    Thank you! You've been such a big help. I've learned a lot through this process, so thanks again.
     

Share This Page