Need help? Check out our Support site, then


Adding extra image areas to header option

  1. I looked for this topic and I could not find anything on it. How would I be able to add an image area to the header. Below the site title on the twenty eleven theme? My website is chestercountyareahomes.wordpress.com. I would like to add an image of me with my name and phone number on the right of it, and a century 21 logo picture on the left. I would like these images between the Site's title and the main header image.

    Thanks in advance,
    Steve Benedetto

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

  2. Hi Steve, First off, add the following and see If I'm reading you right. I've placed a red square where I think you are talking about having the logo, your image and phone number. I would suggest making a single image with all of that in the image. Add the following code first though as a trial.

    hgroup:after {
        background: none no-repeat scroll 0 0 #FF0000;
        content: "";
        float: right;
        height: 150px;
        position: absolute;
        right: 7.6%;
        text-align: center;
        top: 30px;
        width: 200px;
    }
    #branding #searchform {
        display: none;
    }
    #site-title {
        margin-right: 200px;
    }

    Due to the responsive design of Twenty Eleven, on the surface, it sounds like what you want to put up there to the right of the site title might be too much.

    I see a logo in your media library now.

  3. Thank you so much for the response. I was able to get it where I wanted it with the code you gave me! However is there anyway I could add two images. For example lets say I wanted to put the century 21 logo where you placed the red box in your code, and I wanted to put a picture of me right below the site description(The town names) How would I go about doing that. Thanks again for your help

  4. Well, I had some stuff worked out, but my computer decided to reboot without my permission so I lost it all. The thing is, we can add all this, but it gets difficult to keep all of it when on narrower devices, such as phones and smaller tablets since at some point, everything ends up occupying the same space and overlapping, unless we make the header area so tall that people have to scroll way down to find your content.

    I'll have some stuff for you to try in a bit and you need to narrow down your browser window to phone size so you can see what happens.

    I can limit and adjust things using media rules and possibly get it all to fit and flow together, but it is likely going to require a sizable bit of coding.

  5. I'm sorry to hear that. I'm not so worried about mobile site. If worse comes to worse, I will disable to mobile site option. I appreciate all the help I can get. I really do appreciate all of your help sacred path.

    Thanks,

    Steven Benedetto

  6. Steven, ok, let me see what I can do with things. Perhaps I can adjust the text and such as well using media queries and get everything to work.

  7. A sample site that I want it to look like is: http://www.uppermerionhomes(dot)com. Sorry, I don't know if you can post links or not on the forums. But if you look that is the site I have currently. Thank you so much for your help!! I greatly appreciate it.

  8. Thanks for the link. Typically on things like outside links, what you did is just fine, especially when you are providing it for a sample reference.

    I'm working on it for you right now.

  9. Ok, replace the hgroup, search and site title rules I had last given with the following.

    #branding #searchform {
    	display: none;
    }
    
    hgroup:after {
    	background: url('http://uppermerionhomes.com/predesign/bv_turbo/agent/c21AllianceAgent/images/c21_logo.png') no-repeat;
    	content: "";
    	float: right;
    	height: 150px;
    	position: absolute;
    	right: 4.6%;
    	text-align: center;
    	top: 160px;
    	width: 200px;
    }
    
    hgroup:before {
        background: none no-repeat scroll 0 0 #FF0000;
        content: "";
        height: 100px;
        position: absolute;
        top: 160px;
        width: 250px;
    }
    #site-title {
        margin-right: 0;
    }
    
    @media screen and (max-width: 768px) {
        #site-description {
            margin-right: 0;
            font-size: 95%
        }
        #site-title a {
            font-size: 25px;
        }
        hgroup:before, hgroup:after {
            top: 125px;
        }
    }
    
    @media screen and (max-width: 650px) {
        hgroup:before, hgroup:after {
            top: 115px;
        }
    }
    
    @media screen and (max-width: 575px) {
        hgroup:before, hgroup:after {
            top: 150px;
        }
    }

    This works all the way down to around 563px in width where the two images will start to overlap each other. Give it a try and narrow your browser window way down and see what you think, At around 563px in width, we could dump one of the images and then it would work clear down to smartphone display widths.

    You can do the second image in the hgroup:before rule the same as you did for the hgroup:after.

  10. Oh yeah, the image on the left (your photo). Include your text in that image off to the right of the image. I've accounted for a width of 250px and a height of 100px for that image. If it is wider, then adjustments to the media queries will have to be made.

  11. Excellent!! Thank you so much for all of your help. I will definitely be able to take it from here. That was exactly what I was looking for.

    Thank You,
    Steve Benedetto

  12. Steve, you are welcome, and if you have any problems, please let us know. Best of luck.

Topic Closed

This topic has been closed to new replies.

About this Topic