Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Spectrum spacing and title issues

  1. enchantedisland
    Member

    re: http://www.enchantedislandblog.com

    What I've done so far:
    - placed company logo/lettering graphic as background.
    - used a picture set in custom header location.

    To present an example, I've entered the word "enchanted" in the title field. This enables the correct layout/spacing from the top of the page (ie, main nav is positioned well, as is the "transparent" page, for the most part), but obviously "enchanted" overlaps the logo (background).

    When I remove the written title ("enchanted") these items (page/nav) shift up to the top of the window.

    - Can I affect the correct spacing from top of page via padding with CSS? But then I wouldn't have a title (for search, for example).
    - Or can I maintain a title yet not have it show via "transparent" or "none" in CSS?
    - Along these lines, how can I reduce the padding top/bottom on the header (picture set)?
    (not certain where these items are. Just learning CSS editing and have purchased the editor).

    Thank you!

    The blog I need help with is enchantedislandblog.com.

  2. hallluke
    Member

    #logo {visibility:hidden;}

    This code will hide the text blog title without affecting the spacing and seems to fix your issue.

  3. enchantedisland
    Member

    Totally! The title still exists but is hidden. That's great!

    One other issue: how can I reduce spacing/padding on both top and bottom of customizable header (series of pictures)?

    Thank you!

  4. timethief
    Member

    @enchantedisland
    Please be sure that your blog title is enetered and your optional tagline have been entered on this page and do not remove them. > Settings > General
    If they do not appear there then the spider bots will not index your blog content and it will not appear in search engine results.

  5. enchantedisland
    Member

    @timethief
    Thank you for verifying what I thought was the case. I went back to the settings and typed in the whole name of the park, Enchanted Island Amusement Park, for the Blog Title.

    Regarding the Tagline, I'm wanting to try changing the color/size a little. I've been looking through the "original stylesheet" yet am not seeing the code related to that. As well as the padding issue....

    Thank you again.

    @timethief et al...
    p.s., would you making a suggestion as to where I might best learn these basics? I like the ability to make real time changes in w3schools but I'm wanting to get a better idea of where the items I'm addressing are--where to find them in the orig stylesheet, for example--and then how to affect the desired change. Any quick direction/suggestions would be greatly appreciated!

  6. hallluke
    Member

    For real time modifications of CSS and HTML get yourself Firefox and the Firebug add-on, it's what I use more or less constantly. This code will remove the padding from your original title which will shift the main content upwards and show you how to modify the tagline:

    #header #logo h1 {padding:0;}
#site-description h2 {font-size:1em; color:#f00;}

  7. enchantedisland
    Member

    Thanks @hallluke!

    Did some experimenting and am able to bring some desired mods to it. Good stuff! I appreciate it!

    Thanks again for the suggestions re Firefox. Will get that.

  8. ccaaangelica
    Member

    How can I change the default color (green) of the tag to red?
    I don´t know how to use the CSS. Is there a way to change the color at the appearance page?

  9. timethief
    Member

    How can I change the default color (green) of the tag to red?

    I think you mean the green background color block behind post titles supplied by the theme. You have to have the annually renewable CSS upgrade to change it.

  10. thesacredpath
    Member

    The ribbon behind the post and page titles is made up of three images. Two single images, and one from an image sprite (one file with multiple images accessed by location within the file). Same holds true for the ribbon behind the widget titles.

    So, you would have to recreate two images to the exact dimensions of the original in the color you want, and then you would have to edit and change the color of the section in the image sprite for the other part of the ribbon (requires some higher end photoshop skills). Then you would upload all those and replace the file URLs in the CSS in the appropriate places.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags