WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] How do i change the Logo and footer background colors (12 posts)

  1. darkrupy
    Member
    Posted 8 months ago #

    I'm trying to change the logo background color from white to black,as well as the footer background from white to black.I would like to also remove the gray strip above the footer entire as well if possible.Since I lack the css knowledge and full understanding of code,I was wondering if anyone out there could possibly help me out.There are other things I need help with,but these are the bigger issues that I currently have.

  2. rdellconsulting
    Member
    Posted 8 months ago #

    Lots of Snippets to help

    Footer Snippets

    Logo Background:
    .tc-header .brand {background: #000000;}

  3. darkrupy
    Member
    Posted 8 months ago #

    Thank you sir,so i tried both of the things above,yet the footer remains the same,as does the logo background,I managed to remove the gray strip though.Does my code need to be in a specific order for them to work or does it not matter?

  4. darkrupy
    Member
    Posted 8 months ago #

    here is how it looks currently,the order could be the reason why it isn't displaying properly,i'm not entire sure though

    .tc-header .brand {background: #000000;}
    header.tc-header {
    min-height: 0px;
    background: #000000;
    border-top: 10px solid #000000;
    border-bottom: 0px solid #ffffff;
    }

    Logo Background:
    .tc-header .brand {background: #000000;}

    .carousel .item {
    line-height: 1120px;
    overflow: hidden;
    min-height: 520px;
    }

    .carousel-caption {
    background: rgba(0, 0, 0, 0.0);
    }

    h1, h2, h3, h4, h5, h6 {
    text-shadow: 0 0px 0 transparent;
    }

    .navbar-inner {
    background: url(http://hhogan.com/beta/wp-content/uploads/2013/12/an_afternoon_of_cut_and_paste_etc__by_mrcwatson-d4rrrbz.jpg) repeat;none
    }

    body {
    background: url(http://hhogan.com/beta/wp-content/uploads/2013/12/Zelda.jpg) fixed 0 0;
    }

    #main-wrapper {

    margin-top: 50px ;
    margin-bottom: 0px;
    }

    #main-wrapper
    background-color: rgba(0, 0, 0, 70);

    color: rgba(0, 0, 0, 70);

    }

    footer#footer {
    background: none repeat scroll 0 0 #000000;
    border-top: 12px solid #000000;
    color: #000000
    padding: 0;
    }

    footer#footer {
    border-top: none;
    }

    #main-wrapper {
    margin-bottom: 0px;
    }

  5. rdellconsulting
    Member
    Posted 8 months ago #

    Just a bit confusing!

    I've adjusted your code above to this:

    body {
    background: url('http://hhogan.com/beta/wp-content/uploads/2013/12/Zelda.jpg') fixed 0 0;
    }
    h1, h2, h3, h4, h5, h6 {
    text-shadow:        0 0px 0 transparent;
    }
    #main-wrapper {
    color:              rgba(0, 0, 0, 70);
    background-color:   rgba(0, 0, 0, 70);
    margin-top:         50px ;
    margin-bottom:      0px;
    }
    .tc-header .brand {
    min-height:         0px;
    background:         #000000;
    border-top:         10px solid #000000;
    border-bottom:      0px solid #ffffff;
    }
    .navbar-inner {
    background: url('http://hhogan.com/beta/wp-content/uploads/2013/12/an_afternoon_of_cut_and_paste_etc__by_mrcwatson-d4rrrbz.jpg') repeat;none
    }
    .carousel .item {
    /* line-height:        1120px; Can't be right? max-height maybe? */
    overflow:           hidden;
    min-height:         520px;
    }
    .carousel-caption {
    background:         rgba(0, 0, 0, 0.0);
    }
    footer#footer {
    background:         none repeat scroll 0 0 #000000;
    /* delete one of next two lines - border or no-border */
    border-top:         12px solid #000000;
    border-top:         none;
    /* delete one of previous two lines - border or no-border */
    color:              #000000;
    padding:            0px;
    }

    I've just published a Beginners Guide to CSS which might give you a start.

  6. darkrupy
    Member
    Posted 8 months ago #

    After using the adjusted code,several things disappeared,such as the black boarder around the nav bar,the gray strip above the slider is back,and the body color changed from transparent to black,the footer background and logo background remained white as well.I'm not sure why it happened or how to fix it,so i reverted the code back.

  7. darkrupy
    Member
    Posted 8 months ago #

    within the body part of the code,I found that,the background color wasn opaquea,and thus hiding the text.Now that I got it fixed,I still have yet to find a way to do the same with the footer and logo background.

    here is my website if you want to see how it looks,but basically i'm just trying to either make the backgrounds for both the logo and footer black,or possibly transparent.

    http://hhogan.com/beta/

  8. rdellconsulting
    Member
    Posted 8 months ago #

    Logo Background:
    .tc-header .brand {background: #000000;}

    Footer:
    footer#footer .colophon {background-color: #000000;}

    You also need this snippet to remove the white rectangles:
    Snippet

    You need to resize your slider images. Recommended dimensions are 1170 x 500 px

  9. darkrupy
    Member
    Posted 8 months ago #

    Thank you very much sir,the footer finally changed to black and the snippet removed the white boarder,like you said it would,now that's left is the logo background.I greatly appreciate your assistance rdell.

  10. darkrupy
    Member
    Posted 8 months ago #

    small update,I noticed that the background around the logo did indeed turn black,but it appears that the problem might be my logo,as the white area
    might be from the text,let me adjust it accordingly.

  11. darkrupy
    Member
    Posted 8 months ago #

    I found out,that the white space was indeed coming from the logo,so what i did was give it a black background and redid the logo.And with that I close this post,as you've helped me find the solution to these problems,and for that I thank you.

  12. darkrupy
    Member
    Posted 8 months ago #

    resolved

Reply

You must log in to post.

About this Theme

About this Topic