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

  • Author
    Posts
  • #582478

    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.

    #582592

    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.

    #582684

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

    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

    #582698

    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.

    #582699

    health4biz
    Member

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

    #582706

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

    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.

    #582739

    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?

    #582743

    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).

    #582745

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

    #582746

    You are welcome.

    #582750

    duto
    Member

    @TT and TSP:

    You are very helpful for beginners like me.
    GBU…

    #582911

    @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

    #582917

    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.

    #582925

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

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

    #582929

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

    #582930

    @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!

    #582979

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

The topic ‘CSS Help for TwentyTen (Name, Tag, Header Image, Transparency)’ is closed to new replies.