Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

CSS Help for TwentyTen (Name, Tag, Header Image, Transparency)

  1. mindworksnorthwest
    Member

    Hi folks,

    So, I am a CSS novice, and I could use some (simple, I'm an idiot type of) help if someone is willing to give me some pointers.

    I'm using the Twenty-Ten theme on a wordpress hosted site. I'm trying to do several things to customize the look for my site.

    1) I would like to remove the name and tag line from the top of my site's page, but not loose the benefit of
    2) I would like to move the header image up to the top of the page (it provides my site name and tagline)
    3) I would like to change the background color content box
    4) I would like to make the content box be transparent, but the content in the box to be opaque.

    I've looked and looked via google, and just can't find anything to remove the tagline, move the header image, or change the colors and transparency setting in the context box. So, I'm pleading for help here.

    I'm not sure if it matters, but I'm running on a hosted wordpress site (mindworksnorthwest.wordpress.com), and have no idea how to modify anything other than the CSS (I've seen references to modifying various .php files, but don't know how to even access those).

    Thanks in advance,
    Brennan

    The blog I need help with is mindworksnorthwest.wordpress.com.

  2. mindworksnorthwest
    Member

    Oops... realized I didn't finish my sentence in point 1... I would like to remove these but not loose the benefit of the tagging it provides to Search Engines.

  3. thesacredpath
    Member

    1 & 2:

    #site-title, #site-description {
display: none;
}

    3. Two options.

    Option A: You have to enter the color in RGB and the 0.5 at the end is the opacity. The closer to 1 you get, the less transparent the color will be. There is a big caveat with this though. IE6, 7 and 8 do not recognize RGB declarations (all other browsers have since the stone age):

    #wrapper {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
}

    Option B: The foolproof way is to create an image with background transparency and then set the opacity or transparency of the overlying color. You would want to make the image about perhaps 10px x 10px and save it as a PNG with background transparency, upload it to your media library and add it to the background declaration as below:

    #wrapper {
background: url("URL of image") repeat scroll 0 0 transparent;
}

  4. mindworksnorthwest
    Member

    thesacredpath,

    You, sir, are a gentleman and a scholar. Thank you. Two other questions, if I could. Is it possible to change the location of where the header image is being placed? I would like to move it up further on the page so that it's right at the top of the page.

    Also, is it possible to change the menu bar around? For example, making it transparent as well? What about changing the fonts in the menu?

    Thank you, thank you, thank you!!

    Brennan

  5. timethief
    Member

    Just saying ... there is a navigation bar to be considered at the very top of the page. Every wordpress.com user will have that gray navigation bar.

  6. health4biz
    Member

    Thanks for the good information. I was struggling with some of the very same issues.

  7. thesacredpath
    Member

    This will do that and the admin bar will automatically push everything down if the visitor is logged into wordpress.

    #wrapper {
margin-top: 0;
}

#header {
padding: 0;
}

  8. thesacredpath
    Member

    After making the above changes, make sure and test both logged in and logged out to make sure the admin bar does not overlap and that when logged out everything moves to the top.

  9. fliscorno
    Member

    Hi. I'm moving my blog from a self hosted installation to a wordpress.com installation. I can modify the CSS.

    My question is: I'd like to have a set of icons above the branding image in the header, where each image would be a link (e.g. links for facebook, tweeter, ...). Can that be done only using CSS?

    I was trying to the "content" property, but it's not working. Something like:

    #branding img:before {
    content: url(smiley.gif);
    }

    The gif is not displayed and, even if it was, the link would still be missing.

    Any idea?

  10. thesacredpath
    Member

    The only thing we can really do here is to put the image links into a text widget and then reposition it up into that area. The catch is that you have to use position absolute, and that means that the icons are going to be in a different location vertically depending on whether you are logged in (the grey admin bar at the top) or logged out (no admin bar).

  11. fliscorno
    Member

    That's a very good idea. I'll try it. Thanks a lot.

  12. thesacredpath
    Member

    You are welcome.

  13. duto
    Member

    @TT and TSP:

    You are very helpful for beginners like me.
    GBU...

  14. fliscorno
    Member

    @thesacredpath

    Could you please help me on the following?

    I placed a widget at the first position in the side bar. The absolute positioning isn't interesting because the horizontal position depends a lot on the browser width (I could live with the vertical floating due being signed in or nor in wordpress.com).

    It can be seen here:

    http://aventadores.wordpress.com/

    So I was trying to use relative position with negative offset for the top. Since it's the first widget, it could work, I though. But no. The div I'm using is

    <div style="position:relative;height:32px;width:400px;z-index:999;top:-320px;left:-40px;">
    ;">
    xxxxxxx
    </div>

    With this style, the div content's just disappear. I've place a hight z-index to make sure it's on top of everything.

    Any suggestion?

    Thanks
    Jorge

  15. thesacredpath
    Member

    I can come close, using position absolute, but there are two issues.

    1. The icons will be aligned differently vertically depending on whether someone is logged in or logged out.

    2. It would require that we "stick" the left side of #wrapper (so that it is a fixed distance from the left browser window border.

    @hallluke might be able to take care of this and resolve these two issues. He is a CSS guru.

  16. hallluke
    Member

    You want the widget aligned to the right of the header section? Try removing the inline CSS from the tag in your text widget and adding the following declarations to the bottom of your custom CSS.

    #wrapper {position:relative;}
#text-7 {position:absolute; top:15px; right:15px;}

  17. thesacredpath
    Member

    Committing to memory... writing... writing... writing... write complete.

  18. fliscorno
    Member

    Simpleness is beauty :-) Thanks a ton @hallluke and @thesacredpath

  19. fliscorno
    Member

    @hallluke

    If I understand correctly, this works because text-7 is the container div of widget with the icons and wrapper is the container div of text-7. Therefore, we are absolute positioning text-7 in its container.

    Wonderful!

  20. fliscorno
    Member

    I found out that wordpress.com parses the CSS we give to it. And it looks it is cutting off this:

    #text-8 {position:absolute; top:15px; right:15px;}

  21. fliscorno
    Member

    Sorry, submitted too early.

    I found out that wordpress.com parses the CSS we give to it. And it looks it is cutting off this:

    #text-8 {position:absolute; top:15px; right:15px;}

    Inspecting the CSS for the element where the CSS should appear (the widget with the icons), I can see the the positioning isn't showing up.

    Any idea why?

    http://aventar.eu

  22. hallluke
    Member

    If you have a conflicting declaration in your custom CSS it may be taking precedence over the code you just pasted. Try adding in another id selector at the beginning or appending !important to the rule:

    #primary #text-8 {position:absolute!important; top:15px; right:15px;}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags