Need help? Check out our Support site, then


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

  1. 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. 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. 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. 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. 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. Thanks for the good information. I was struggling with some of the very same issues.

  7. 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. 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. 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. 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. That's a very good idea. I'll try it. Thanks a lot.

  12. You are welcome.

  13. @TT and TSP:

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

  14. @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. 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. 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. Committing to memory... writing... writing... writing... write complete.

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

  19. @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. 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. 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. 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