Adding extra image areas to header option

  • Author
    Posts
  • #1747183

    theone3210
    Member

    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.

    #1747340

    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.

    #1747374

    theone3210
    Member

    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

    #1747386

    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.

    #1747455

    theone3210
    Member

    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

    #1747457

    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.

    #1747462

    theone3210
    Member

    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.

    #1747463

    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.

    #1747464

    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.

    #1747465

    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.

    #1747472

    theone3210
    Member

    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

    #1747473

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

The topic ‘Adding extra image areas to header option’ is closed to new replies.