Beksters Lab

Okay, thanks, that works for the responders name. I’ve used Firebug to find the relevent code for the word “says” and “on” and have added the following code to change the colour:

.comment-meta .says {
	color: #483a2b;
}
.comment-author.vcard {
	color: #483a2b;
}

Thanks for the help.

Hi Andrew, one such example can be found at:
https://josephinemyles.com/2012/09/27/the-hot-pressure-blog-tour-day-six/#comments
In this case, the text to change colour is: “HJ on ….. said”. Any ideas how to do this? Thanks.

Okay, I am figuring this out. I have copied the Responsive structure code from the Twenty Eleven theme into my child theme and am making the relevant changes there.

Thanks for your help alchymyth, that’s done the trick!

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.

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.

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

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.

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

Thankyou both, that has finally worked. I had previously already uploaded the images to the server and also uploaded them both in the appearance tab due to following different tutorials. I’d tried referencing both images in the css with links to my images folder on the server as suggested above but it didn’t work. Now that I’ve removed the files from the appearances tab it works perfectly. The only slight modification I had to make was to specify the home class for body:

body.home {
	background: url('images/gallery-paper-tile.jpg');
}

Thanks again for your help, headache over!

Ok, so I have now managed to reduce the width of the navigation bar and have removed the search bar for the sake of simplicity. I am still unsure of how to align the navigation bar with the content box and remove the space inbetween. Here is the code for my child theme:

/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme
Author:
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");

/* = My added code to give wrapper for nav and content
-----------------------------------------------*/
#wrapper {
	margin: 0 auto;
}

/* =Structure
----------------------------------------------- */

body {
	padding: 0 1em;
}
#page {
	margin: 1em auto;
	max-width: 1000px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	/*MY CODE*/
	background: #fff;
	padding: 20px;
	-moz-border-radius: 0px 0px 20px 20px;
	border-radius: 0px 0px 20px 20px;
	/*END MY CODE*/
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}

/* I EDITED WIDTH BELOW */
/* One column */
.one-column #page {
	min-width: 900px;
}
/*end edit width*/

/* =Global
----------------------------------------------- */

body, input, textarea {
	color: #333;
	font: 15px "Century Gothic", Calibri, Verdana, sans-serif;
	font-weight: 300;
	line-height: 1.625;
}
body {
	/*MY CODE*/
	background: #e2e2e2 url('images/bg.jpg') center top repeat-y;
	/*END MY CODE*/
}
#page {
	background-color: transparent;
}

/* Headings */
h1,h2,h3,h4,h5,h6 {
	color: #5d5d5d;
	clear: both;
	text-align: center;
}

/* Text elements */

ul {
	list-style: circle;
}

/* Links */
a {
	color: #333;
	text-decoration: none;
}
a:focus,
a:active,
a:hover {
	text-decoration: underline;
}

/* =Menu
-------------------------------------------------------------- */

#access {
	/*MY CODE to curve top corners of nav*/
	-moz-border-radius: 20px 20px 0px 0px;
	border-radius: 20px 20px 0px 0px;
	/*end curved corners of nav*/

	background: #d7d7d7; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f7f7f7, #d7d7d7);
	background: -o-linear-gradient(#f7f7f7, #d7d7d7);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f7f7f7), to(#d7d7d7)); /* older webkit syntax */
	background: -webkit-linear-gradient(#f7f7f7, #d7d7d7);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	clear:both;
	display: block;
	margin: auto ;
	width: 750px;
}
#access a {
	color: #666;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}

/* =Footer
----------------------------------------------- */

/* Site Generator Line */
#site-generator {
	background: transparent;
	border-top: none;
	color: #333;
	font-size: 12px;
	line-height: 2.2em;
	padding: 2.5em 0.5em;
	text-align: center;
}
#site-generator a {
	color: #333;
	font-weight: bold;
}

I also had a go at adding a wrapper around the content, hoping this would pull things together with css but I’m not sure if I’ve gone about it correctly.
I added a div called wrapper in the header.php file:
….

<body <?php body_class(); ?>>

<div id="wrapper">

<div id="page" class="hfeed">

….
and ended it in the footer.php file:
….

</div><!-- #main -->
</div><!-- end my code, closes wrapper div -->
<footer id="colophon" role="contentinfo">

….
I’m not entirely sure if this is correct as I’m not great with php so any help will be appreciated. Cheers!