WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Quick CSS question re: small "glow" around Header (5 posts)

  1. wigglebutt
    Member
    Posted 10 months ago #

    Hi there,

    I expanded the header to fit across the whole body of the page and I made it the same color as the background, but there is still a small "glow" around the header ... between the header and the background. Is there a way to get rid of the glow?

    My site is http://parkpack.com/. Also if you're a CSS wiz I would like to make the cart total orange at all times and nothing I've tried seems to do it. Any help there would be very much appreciated!

    My custom CSS is as follows (please don't judge... it's all trial and mostly error for me):

    .site-header {
    	padding: 0;
    }
    
    .site-header img {
    	max-width: 210%;
    	float: left;
    	padding: -5rem;
    }
    
    #enhancedtextwidget-6 {
    	font-weight: bold;
    	float: right;
    	position: absolute;
    	top: 130px;
    	right: 25px;
    	color: #e57443;
    }
    
    body {
    }
    
    #intro_text {
    	background: #dbd9dc;
    	font-weight: bolder;
    	font-size: 18px;
    	line-height: 1.5em;
    	list-style-type: disc;
    }
    
    #intro_bullets li {
    	font-weight: bold;
    	font-size: 18px;
    	line-height: 1.5em;
    	list-style-image: url(/wp-content/uploads/2013/10/favicon21.gif);
    }
    
    .site-navigation.main-navigation {
    	margin-top: -2px;
    	background-color: #303030;
    }
    
    .site-footer {
    	margin-top: 0;
    }
  2. Andrew
    Forum moderator
    Posted 10 months ago #

    The glow is around the whole website. Do you still want it applied to everything apart from the header?

  3. wigglebutt
    Member
    Posted 10 months ago #

    Thank you for replying!

    I didn't notice my glow was around the whole thing before. No, I do not want any glow. Is it possible to remove it?

  4. Andrew
    Forum moderator
    Posted 10 months ago #

    Yep, add this to your Custom CSS:

    #page {
     -webkit-box-shadow: none;
     box-shadow: none;
    }

    I used Chrome's developer tools to find that out.

    Here's a useful tutorial for Chrome's dev tools to help find CSS: https://dailypost.wordpress.com/2013/07/25/css-selectors/

    Additional Chrome dev info:

  5. wigglebutt
    Member
    Posted 10 months ago #

    Thank you! I have Firebug, but I still was lost. I'm just not very good at this.

    Anyway, I really appreciate your help! Thank you!! The colors are slightly off even though I matched them, so now I'm going to try and do a transparent background.

    Thank you!

Reply

You must log in to post.

About this Topic