WordPress.com

1. foogcorp
   Member
   May 16, 2012, 11:38 AM

   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 iamnotacrank.com.

2. foogcorp
   Member
   May 16, 2012, 11:42 AM

   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

3. designsimply
   Staff
   May 16, 2012, 6:57 PM

   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;
   }

4. designsimply
   Staff
   May 16, 2012, 7:02 PM

   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.

5. designsimply
   Staff
   May 16, 2012, 7:04 PM

   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.

6. designsimply
   Staff
   May 16, 2012, 7:05 PM

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

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

   Adjust the number if needed.

7. designsimply
   Staff
   May 16, 2012, 7:07 PM

   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/

8. designsimply
   Staff
   May 16, 2012, 7:22 PM

   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;
   }

9. designsimply
   Staff
   May 16, 2012, 7:23 PM

   7. Actively post things to the blog.

   Woooo!

10. foogcorp
    Member
    May 16, 2012, 7:33 PM

    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.

11. designsimply
    Staff
    May 16, 2012, 7:37 PM

    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.

Topic Closed

This topic has been closed to new replies.