WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] search box, background for piano black (3 posts)

  1. abtr
    Member
    Posted 4 years ago #

    Hi! im using piano black. im trying to bring the search box to the right above the rss feed and im trying to turn the whole of the left column background in a dark grey colour, i tried doing it, but something is stopping me from covering the whole areas, only allowing a change in a block of it. furthermore i think the same thing is preventing me from making the border in the right column meet the footer.

    http://www.ozmma.com

    thanks for any help

  2. henkholland
    Member
    Posted 4 years ago #

    For the searchbox add this to your style.css:

    #search-area {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(img/search-area.gif) no-repeat scroll 0 0;
    display:inline;
    float:right;
    height:29px;
    margin:5px -143px;  /*THIS LINE IS ADDED*/
    width:183px;

    For the background of the left column:

    #left-col {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFFF2 none repeat scroll 0 0;  /*THIS LINE WAS ADDED*/
    display:inline;
    float:left;
    margin:0 0 0 5px;
    width:584px;
    }

    Change #FFFFF2 to your liking. http://www.colorschemer.com/online.html

    For the border to meet the footer, the footer is a rectangular block so the "left"border will never go down al the way but for the right one it helps to lower the padding-bottom to 0:

    #middle-contents {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(img/side.png) repeat-y scroll 0 0;
    padding-bottom:0;
    }

    How do I "see"this:
    Get Firefox and then the free Firefox addon Firebug. You can then click anywhere in your site and see what piece of the css influences that piece of your site and you can even make changes but not save them, so it is safe to practice. (but test in Internet Explorer also).

  3. abtr
    Member
    Posted 4 years ago #

    Hi Henkholland!

    Thanks for putting in the effort to answer my question. i didnt work out the search button part of it but i was thinking of moving that somewhere else entirely anyway. For the background, i didnt use the exact codes you gave me but it was very good in reminding me of how to do it, must of slipped my mind when i tried the first time, i ended up doing this:

    #left-col { float:left; display:inline; margin:0 0 0 5px; background:#333 none repeat scroll 0 0 ; width:619px; height: 1503px;

    i basically just adjusted the height and width.

    As for the padding, worked perfectly, thanks. And i know what you mean when you said it will never go to the bottom, so ive decided (when i find the time) to open that footer image and re-draw it so theres no spaces.

    Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic