How to edit height of tagline in theme "forever"

  • Unknown's avatar
    sydneysstoryblog · Member ·

    Hello!

    I am delving into CSS customization for the first time and am having a hard time finding out how to adjust the height of my theme’s tagline. My blog is sydneysstory.com. You can see the section saying Fashion, Food, Travel, & Life is very tall. I’d like to condense the area so there isn’t so much white space between the two lines above and below the verbiage.

    I thought I found the code I needed by right clicking “Inspect Element” but I’m then unable to find the code I need to edit.

    Any help would be greatly appreciated!

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

  • Unknown's avatar
    designsimply · Member ·

    You were on the right track!

    The trick is to make sure you’ve right-clicked the correct element or select a different one in the HTML area in the web inspector. Once you’ve clicked on the correct element, you should be able to see all of the CSS for that element on the right. Copying and pasting just the parts of the CSS you need, with a small adjustment, into the CSS editor is the final step.

    Clicking around in the HTML is a good idea in this case, because the spacing above and below the tagline in the Forever theme come from a few different places. The space above the tagline comes from the top padding on the main content area. You can remove that space by adding this CSS to your Appearance → Custom Design → CSS editor:

    .home #main {
	padding-top: 0;
}

    The spacing below the tagline comes from bottom padding which has been added to the tagline itself, which has an ID value of “site-description” in this case, so this is how you would setup a rule to change that spacing:

    .home #site-description {
	padding-bottom: 30px;
}

    I added the “.home” part to the beginning of each selector so the spacing changes would be sure to only affect the home page.

  • Unknown's avatar
    sydneysstoryblog · Member ·

    Thank you so much!

    I had no problem adjusting the bottom portion (10px) but I can’t get the top margin to condense as much as I want. It’s currently set at 0 as you typed above but I want it to be spaced equally with the bottom. I believe -.5 should do the trick but nothing happens when I input -.5.

    I supposed a work around would be to go even smaller on the lower line but then somehow center the verbiage between the two border lines? As of now the space above the verbiage is larger than the space beneath it.

    Thanks!

  • Unknown's avatar
    designsimply · Member ·

    I believe -.5 should do the trick but nothing happens when I input -.5.

    To make them both match up exactly, try leaving the top padding for #main at zero and add another rule to adjust the spacing below the main menu (which adds some additional space that looks like the top part of the tagline but is really the bottom of the menu). Here is an example:

    .home #access {
	margin-bottom: 10px;
}
  • The topic ‘How to edit height of tagline in theme "forever"’ is closed to new replies.