3) change font colors

I would recommend experimenting with whole color palettes first—you can find that in Appearance -> Themes -> Customize -> Colors.

To target individual text colors, you need to create CSS rules to override ones in the theme. There could be many. You can use the built in web inspector to find them. Here are a few basic ones:

To change the base text color, you can update the color for the "body" tag:

body {
	color: hotpink;
}

That should affect any text that doesn't have a more specific color rule in the theme's CSS.

To adjust link colors, you can do something like this:

a {
	color: blue;
}
a:visited {
	color: purple;
}
a:hover,
a:focus,
a:active {
	color: green;
}

But that won't affect post titles on the home page because there are more specific rules in the theme for those particular colors. Here is an example that will change the color, visited color, and hover color for post titles on the home page:

.entry-title a,
.entry-title a {
	color: brown;
}
.entry-title a:visited,
.entry-title a:visited {
	color: teal;
}
.hentry:hover .entry-title a,
.hentry:hover .entry-title a:hover {
	color: gold;
}

Other font colors may also need specific rules added to adjust theme depending on what text you add and what rules exist in the theme to affect that text. You can adjust the font color further as you add more content. Use your browser's web inspector to find what CSS selectors to use to adjust more colors.

2) reposition content so header image to be fully displayed similiar to the way it was on the old theme

With this one, I think you're breaking out of the Sidekick setup completely—it has a built in setup to do a header image that is 480 x 150 pixels. What you can do is bypass that completely and add a background image to one of the header elements using CSS. Here is a basic example that just adds in the background image. You should add these to the "#masthead hgroup" selector that is already in your custom CSS from the last example:

background: url("http://havekniveswillcooktestsite.files.wordpress.com/2013/03/logo-2010-03-razorclams.jpg") no-repeat;
	height: 235px;

To find which selectors to use, I right-clicked on the things on the page I wanted to find out more about, selected "Inspect Element," and used the browser's built in web inspector to browse the HTML on the left and all of the CSS that applies to whatever is selected on the right. It's the most useful thing you can possibly do when working with a theme's existing CSS.

1) change the menu to full width, single line

To make the menu full width in the Sidekick theme, try setting the width for the area that contains the site title as well as the menu to 100%. Here is an example to get you started:

#masthead hgroup {
	width: 100%;
}
.main-navigation {
	width: 100%;
}

If possibIe, I want to 1) change the menu to full width, single line and 2) reposition content so header image to be fully displayed similiar to the way it was on the old theme and 3) change font colors

thanks for any help.

If you'd prefer to research CSS positioning on your own, you might find these links useful:
http://alistapart.com/article/css-positioning-101
http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

- Beverly

#text-2 {
	position: absolute;
	left: 100px;
	top: 430px;
	z-index: 9;
}

Adjust the value until it looks right.

thanks for letting me know that it is possible to redisplay the logo. It's useful too that you think it looks okay where it is - always good to get a second opinion. I think I'll leave it where it is for now and if the client wants something different I'll have a go at applying a negative margin to it.

Thanks too for your tips re use of images, I think these ones look okay, but will bear in mind for future.

actually when i move them to the top they become unclickable..

Tricky! This took me a while to figure out!

Try adding "z-index: 9" to the "#text-2" block. Here's an updated example:

#supplementary {
	position: static;
}
#main {
	position: relative;
}
#text-2 {
	position: absolute;
	top: 430px;
	z-index: 9;
}
.site-navigation {
	margin-top: 60px;
}

As for the horizontal alignment, there's a more general issue: your content has flexible width but the header doesn't. Drag the browser window to make it narrower and see what happens.

By the way:
a) There's no point making a logo link to the full-size original.
b) You get better quality on the page if you use an image editing application to downsize images to the desired pixel dimensions instead of relying on WP for the downsizing.

Thanks for your reply. Thanks too for showing me the screen shot, I've not used firebug before but it looks like a useful tool. I suspected that it probably was not possible. After a bit of tinkering I think that the logo looks good enough.

Thanks again.

The blue highlighted line shows "entry-content" area! Sorry I am not more help but I am no way an expert, hopefully one will shout out!

I'm trying to position the 'Breathe' logo on this page: http://thackraymagicandmedicine.wordpress.com/collaborations/therapy/ a little higher up, in line with 'Therapy' and 'Breathe Magic - Integrating Magic into Rehabilitation' and sitting directly underneath the Arts Council logo. I think the reason this may be difficult is that 'Therapy' as the title probably has padding going across to the other side preventing anything from being put there. Is there anyway around this with the use of css code/code in the text editor? It's important I don't affect the layout of other pages, but this page will be a static page.

Thanks for your help

Is there a way to have the location of the menu bar change depending on whether a person is logged in to wordpress?

There is! You can use the body classes to target each one:

.logged-in

So you might try adding something like this to the bottom of your custom CSS in the Appearance → Custom Design → CSS editor:

.logged-in #access,
.logged-in #wrapper {
	padding-top: 28px;
}

b) If you turn everything into an image, you can create links by using image mapping. You can generate the code here:
http://www.isdntek.com/tagbot/imap.htm
Again you need a fixed-width theme.

Great advice - thank you again. (bg image now on page, positioning absolute and pixel defined.)

Having achieved my initial objectives, I've now encountered a new problem!

Specifically, I failed to anticipate that text would shift whenever window is re-sized (which of course is desired, predictable behaviour - and no doubt obvious to all seasoned designers).

What I'd like to achieve is text that stays nailed to the underlying image.

Any suggestions?

ps I'm still considering your advice (posted elsewhere) to photshop the text onto the image, but then how would I make hyperlinks?

I input what was suggested above :
#supplementary {
position: static;
}
#main {
position: relative;
}
#text-2 {
position: absolute;
top: 430px;
}
.site-navigation {
margin-top: 60px;
}

This did work and moved my buttons to the top between my header and Menu. But once I move them they become un clickable. This is the widget text code I am using.

<div class="textwidget"><a href="http://pinterest.com/pinninggals/"><img src="http://pinninggals.files.wordpress.com/2013/02/pinterest.png" width="60" height="60" alt="Follow Me on Pinterest" /></a>

<code>all the code here</code>

Alternately you can put the code in and then select all the code and click the code button above the entry box.

That will keep the forum software from interpreting it.

<div class="textwidget"><img src="http://pinninggals.files.wordpress.com/2013/02/pinterest.png" width="60" height="60" alt="Follow Me on Pinterest" />

#header_icons img {

float:right;

height:32px;

width:32px;

margin:0;

margin-right:10px;

}

#header_icons {

float: right;

padding-top:50px;

width:250px;

z-index:-9999;

padding-bottom:10px;

}
div id=”header_icons”>

<img src=”http://pinninggals.com/?attachment_id=193” width=”40px”>

<img src=”http://pinninggals.com/?attachment_id=194” width=”40px”>

<img src=”http://pinninggals.com/?attachment_id=195 ” width=”40px”>

<img src=”http://pinninggals.com/?attachment_id=196 ” width=”40px”>

</div>

So if I input the code above into the css it should do what im trying to?

#supplementary {
	position: static;
}
#main {
	position: relative;
}
#text-2 {
	position: absolute;
	top: 430px;
}
.site-navigation {
	margin-top: 60px;
}

Note: this example assumes your site has the same header height throughout.