Make Branding Display Menu Names and Adding an Editable Image Area

  • Resolved Beksters Lab

    (@beksters-lab)


    12 years, 7 months ago

    Hi, I am working on a website and am having a few issues that I cannot figure out how to resolve on my own so could anyone help me please? I am working on a child theme from the twentyeleven theme. This is what I am trying to recreate:

    and this is the site so far:
    https://www.1978bektest.co.uk/howell/
    I was wondering how to add the space for the image on just the home page? It needs to be seperate to the content div and I would like the client to be able to change this image if she chooses. As far as I can tell the only content she would currently be able to change is the text in the content area via editing the home page in the backend of the site. Could anyone give me an idea of how I would go about adding this new editable area?
    I would also like to add the text in the header and this needs to change to match that of each page. I’m planning on using a font from the Google Web Fonts plug-in. I’m assuming I need to update the code in the header.php file to do this but I’m not sure how to do this.
    Thanks for any help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Beksters Lab

    (@beksters-lab)

    apologies for the bad link. This is what I’m trying to recreate:
    https://s85.photobucket.com/albums/k73/redhead_bek/WP%20Shots/?action=view&current=01-1.jpg

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Remove position: absolute on #site-title, #site-description

    Remove all styling on that image

    Assuming the anchor tag (wrapping the image) is a block, add the following styles

    float: left;
height: (image height what ever it is)
width: 100%;

    Thread Starter Beksters Lab

    (@beksters-lab)

    Thanks for the response but I’m not quite sure what you mean. I haven’t got position: absolute specified for #site-title or #site-description in my child theme’s css and I can’t find it in the twentyeleven css either. Can you elaborate on that please?

    I’m not even sure if I’m going about this the right way but I’ve added the following to index.php between primary and content divs to display the image:

    <div>
    <a class="image-wrap" href="#">
        <img alt="forest" src="images/DSC_0154.jpg">
    </a>
</div>

    and then added the following to my child theme’s css:

    img {
   	 max-width: 100%;
   	 display: block;
}

.image-wrap {
   	padding: 5px;
    	border: 5px solid #fff;
    	display: block;
	float: left;
	height: (image height what ever it is)
	width: 100%;
}

    I can’t even get the image to show. Am I doing this wrong?
    Thanks.

    Thread Starter Beksters Lab

    (@beksters-lab)

    sorry, added the image height but it still doesn’t display

    Thread Starter Beksters Lab

    (@beksters-lab)

    Okay, I have scrapped the last lot of code and now have the following on index.php:

    <div class="homeimage" alt="forest" src="images/DSC_0154.jpg">
</div>

    and the following in my stylesheet:

    .homeimage {
background-image: url(images/home.jpg);
background-color: #FFFFFF;
border: 10px solid #fff;
height: 400px;
width: 83%;
margin: 0em auto;
margin-bottom: 20px;
}

    This is working, with a hitch, the image displays on the blog page instead of the home page and I have no idea why. I can remove it from the blog page by changing the stylesheet to:

    .home.homeimage {
.......
}

    but how do I get it to display on the home page?
    Thanks.

    Thread Starter Beksters Lab

    (@beksters-lab)

    I’ve started again from scratch as I realised there was an issue with the navigation in browsers other than Firefox. I have mostly got the page names to display in the header, with the exception of ‘blog’ and I still have another issue but I will start them in a new thread.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Make Branding Display Menu Names and Adding an Editable Image Area’ is closed to new replies.