layout changes in manifest theme

• 

  foogcorp · Member · May 16, 2012 at 11:38 am

  • Copy link
  • Add topic to favorites

  I’m a sucker for the impulse buy, and the CSS customization was like a candy bar by the cash register. Unfortunately, it appears that I am an idiot when it comes to CSS. I searched the forums but couldn’t quite find answers to the following things I would like to do in the manifest theme:

  1. Get rid of the grey line above the “About” link on top of my header image.

  2. Use a longer version of my header image (the width is the same).

  3. Pad the header image with a bit more top and bottom whitespace. Specifically, I would like the “About” link and the tag line under the image to be a bit farther from it.

  4. Slightly increase the font size of the tag line.

  5. Remove the “by username” that appears under the post title when I look at an individual post. (fortunately, it does not seem to appear on the main page), though damned if I know whether that is a result of my tinkering or just the way the standard theme displays the main page)

  6. Replace the date at the top of a post (main page) with the bottom-of-post style “published” date that appears on the individual post view.

  7. Actively post things to the blog.

  Now, I’m not holding my breath on that last one, but if I could get help on even a few of my issues, I will be a mighty happy camper. The blog can be found at http://www.iamnotacrank.com . Yep. I bought the domain. Another impulse buy, of course.

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

• 

  foogcorp · Member · May 16, 2012 at 11:42 am

  • Copy link

  Well, that’s embarrasing!

  How do I expect to be able to use CSS when I can’t even post a simply URL in the forums. Lemme try again: http://www.iamnotacrank.com

• 

  designsimply · Member · May 16, 2012 at 6:57 pm

  • Copy link

  1. Get rid of the grey line above the “About” link on top of my header image.

  #main-nav {
  	border: none;
  }

  If you need to change the background color to white, add a background color rule inside the #main-nav block:

  #main-nav {
  	background: #fff;
  }

• 

  designsimply · Member · May 16, 2012 at 7:02 pm

  • Copy link

  2. Use a longer version of my header image (the width is the same).

  #header-image a img {
  	display: none;
  }
  #header-image {
  	display: block;
  	margin: 0 auto;
  	background: url(http://s.wordpress.org/about/images/logo-blue/blue-xl.png) no-repeat;
  	width: 250px;
  	height: 250px;
  }

  Change the url() value to an image link from your media library. Change the width value to the width of your image. Change the height value to the height of your image.

• 

  designsimply · Member · May 16, 2012 at 7:04 pm

  • Copy link

  3. Pad the header image with a bit more top and bottom whitespace. Specifically, I would like the “About” link and the tag line under the image to be a bit farther from it.

  In the #header-image block from example 2, change the margin line to this:

  margin: 20px auto;

  Change the 20px value to adjust the top and bottom spacing around the header image.

• 

  designsimply · Member · May 16, 2012 at 7:05 pm

  • Copy link

  4. Slightly increase the font size of the tag line.

  #site-description {
  	font-size: 1.5em;
  }

  Adjust the number if needed.

• 

  designsimply · Member · May 16, 2012 at 7:07 pm

  • Copy link

  5. Remove the “by username” that appears under the post title when I look at an individual post. (fortunately, it does not seem to appear on the main page), though damned if I know whether that is a result of my tinkering or just the way the standard theme displays the main page)

  .post-content h4.author {
  	display: none;
  }

  It’s the theme, you’ll notice the Manifest demo site works the same way if you check it out at http://manifestdemo.wordpress.com/

• 

  designsimply · Member · May 16, 2012 at 7:22 pm

  • Copy link

  6. Replace the date at the top of a post (main page) with the bottom-of-post style “published” date that appears on the individual post view.

  This will change the styling of the date above posts on the Manifest home page and archives pages to match the style of the date as shown on single posts:

  .home h5,
  .archive h5 {
  	font-family: inherit;
  	border: none;
  	margin-bottom: 0;
  	font-size: 1.3em;
  }
  .home h5 abbr,
  .archive h5 abbr {
  	margin: 0;
  	padding: 0;
  	top: 0;
  }
  .home .post-date:before,
  .archive .post-date:before {
  	content: "PUBLISHED: ";
  	color: #999;
  }
  .home .post-date a,
  .home .post-date a:hover,
  .archive .post-date a,
  .archive .post-date a:hover {
  	color: #666;
  }

• 

  designsimply · Member · May 16, 2012 at 7:23 pm

  • Copy link

  7. Actively post things to the blog.

  Woooo!

• 

  foogcorp · Member · May 16, 2012 at 7:33 pm

  • Copy link

  Great stuff! You guys are truly well-named and my happiness is receiving an upgrade. I can’t thank you enough. I am now at a point where I feel my impulse buy of the custom design upgrade was well worth it. My sense of positive reinforcement may ultimately be a bad thing for my shopping habits in general, but it bodes well for my blogging!

  If I could be so bold as to ask one more quick question, after which I will go do some learning and tinkering on my own:

  Is it possible to stop displaying the “About” link above the header image entirely? I think I’d rather just put it on a widget or somewhere else on the page.

• 

  designsimply · Member · May 16, 2012 at 7:37 pm

  • Copy link

  Is it possible to stop displaying the “About” link above the header image entirely? I think I’d rather just put it on a widget or somewhere else on the page.

  Sure. You can hide the top navigation in Manifest like this:

  #main-nav {
  	display: none;
  }

  Note that Manifest only has options for widgets in the footer—you could add a custom menu there using Appearance → Menus for the menu setup and the custom menu widget to add it to one of Manifest’s footer widget areas.