place image in toolbox header

  • Author
    Posts
  • #1368825

    bonnyreg
    Member

    Hello again good people at WP.
    Could someone please explain to me the CSS code that I should use to place images in the header of toolbox theme pages.
    I had a browse around the CSS forum but couldn’t find a suitable answer, and one reply to the same question on a different theme stated that all themes have different CSS entries, so I’m stumped I’m afraid.
    Regards Bonny Reg

    The blog address is http://humorousscript.wordpress.com

    The blog I need help with is humorousscript.wordpress.com.

    #1368940

    Hi, not knowing exactly what your end desires are for your site, I’ll offer the following to get you started and give you some ideas. I’ve set a width for the overall content container, which is #page on toolbox to 950px and just so you can see it, I’ve given it a low-opacity white color. I’ve also set the left and right margins of #page to “auto” so that it remains centered in the browser window and added some padding so that the content is not flush up against the margins of #page.

    I then set a height and width for #branding, which is the area a header image would typically be inserted into and again, I’ve given it a background low-opacity color so that you can see where it is and the size.

    #page {
    background: rgba(255, 255, 255, 0.2);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    width: 950px;
    }
    
    #branding {
    background: rgba(255, 255, 255, 0.2);
    height: 250px;
    width: 100%;
    }

    You can adjust the heights and widths as you desire and then upload an image to your media library (Media > Add New) with the dimensions of the width in #page and the height in #branding. Get the URL of that image and then replace the rgba(255, 255, 255, 0.2); in #branding with the following and replace URL OF IMAGE between the double quote marks with the URL of your uploaded header image.

    background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent;

    See what you think and we can work from there.

    Also, starting from scratch with a theme design can be quite a job, and although a lot of fun, it can be a little frustrating.

    If it becomes frustrating, we can help out with some of it, but we have also partnered with Tweaky, a design consultant that can help you dive deep into the design and get it looking just like you want it.

    #1368985

    bonnyreg
    Member

    Thank you so so much for your reply, I will take my time over the next couple of days to try and muster something-up using your CSS above.

    I have another question but think I should ask on the forum as it’s on a different subject.

    Kind Regards Bonny Reg

    #1369052

    Bonny, you are welcome and let us know if you have any problems.

The topic ‘place image in toolbox header’ is closed to new replies.