Manifest Theme: Header Change; Width change; Menu

• 

  quietgal · Member · Sep 17, 2011 at 9:36 am

  • Copy link
  • Add topic to favorites

  Hi,

  I wonder if anyone could help me with the CSS for my blog please? I’m a complete novice with CSS. It confuses the hell out of me. I have not upgraded to custom design as yet only because I am not sure if these changes are feasible which is why I’m here. :D Blog: http://lifelessonsovercoffee.wordpress.com

  Couple of issues:
  1) Width change
  – I would like to stretch the width of the entire one column (ie, title, menu, blog) to fill MAYBE another inch more on each side?

  2) Header change:
  – I would really love to have my image as a semi transparent b/g to the title but failing that, I’m happy to accept the possibly easier option of putting the image BELOW the title but ABOVE the menu.

  3) Menu
  – I found out how to put my categories as a menu which works for me but I really want to take away/modify that secondary header that comes out once you click the menu to get into a category.

  4) A Links page on the menu?
  – I know how to create a new page. I’m trying to create a links page in the menu so that I may embed maybe shortcodes (and have a list of archives, recent posts, other links, etc. )? Something like this blog: http://echoesfromemptiness.com/archives/

  Thanks very much!!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Sep 17, 2011 at 10:18 am

  • Copy link

  1. Existing width was 500px and this appears to give about an extra inch on each side (that of course depends on monitor resolution and the number of pixels per inch on the monitor.

  #site-wrapper, #core-content, #footer {
  width: 750px;
  }

  2. You would create the image, upload it to your media library, get the URL of that image and then put it into a #site-title selector and declare a height to match the height of the image. There are other adjustments that will have to occur as well, so it would be best if you created the semi-transparent image and then gave us the URL once you have uploaded it and we can help get it up there and positioned.

  3.

  h2.archive-title {
  display: none;
  }

  4. Here at wordpress.com, you will have to do this manually and then update it as needed.

• 

  quietgal · Member · Sep 17, 2011 at 11:17 am

  • Copy link

  Wow. Thanks very much for your very prompt reply. :)

  1) I tried it and I didn’t like that width very much. Guess its best to stick with the original width :)

  2) Here’s the URL: http://lifelessonsovercoffee.files.wordpress.com/2011/09/cropped-coffee-cup-2.jpg
  Hope it works and hope it looks ok… :)

  3) Thanks very much! That works perfectly.

  4) I’ll have a further play around with it. I’ve managed to figure out a small part of it in the interim. :D

  Thanks again!! Much appreciated.

• 

  thesacredpath · Member · Sep 17, 2011 at 11:34 am

  • Copy link

  Give this a try for the image behind the site title. The location of the text can be adjusted by changing the “padding-top” value in h1

  #site-title {
  background: url("http://lifelessonsovercoffee.files.wordpress.com/2011/09/cropped-coffee-cup-2.jpg") no-repeat scroll 0 0 transparent;
  height: 160px;
  width: 500px;
  }
  
  h1 {
  margin: 0;
  padding-top: 20px;
  }

  You can also go to appearance > header and “remove” the standard header image.

• 

  quietgal · Member · Sep 17, 2011 at 12:31 pm

  • Copy link

  Thanks!

  That’s perfect! But is there someway I can re-adjust the picture itself as I increased the width to 550px? I know the picture itself is gonna be that size but is there a way to “centre” the image? If not, that’s ok, I’ll just revert everything back to 500px.

  Also, is there a way to bring that menu to sit right below the header picture and get rid of all that space in between?

  No more from me. I think that’s all I have to ask. :)

• 

  quietgal · Member · Sep 17, 2011 at 2:09 pm

  • Copy link

  Oh, I found out how to centre the image. So don’t worry about it.

  But I still don’t know how to get rid of all that space in between the header and navigation bar..

• 

  quietgal · Member · Sep 17, 2011 at 3:45 pm

  • Copy link

  @sacredpath

  Thanks very much for all your help but I think I’ve solved my final problem by inserting a border around my header which I kinda like now…:) So I’m leaving it as it is.

  Thanks again! You’ve been very helpful!

• 

  thesacredpath · Member · Sep 17, 2011 at 6:01 pm

  • Copy link

  You are welcome.