Need help? Check out our Support site, then


Change colour from white transparent.

  1. Hi guys and gals. I'm new to wordpress and have little knowlege of CSS coding at the moment. I'm putting together the site http://www.randtmusic.co.uk and so far so good. I would however like to remove the white box the text sits in and change it so it semi transparent, so it looks a bit nicer than the harsh white. Can you help me. I'm using the Twenty Ten 1.0 by the WordPress team so help needed as to where I would input the CSS code. Many thanks for any help.

  2. You have to add something like this to #wrapper

    filter:alpha(opacity=60);
     opacity:0.6;

    The first line is to take care of IE, which is stupid and doesn't understand opacity. The second line takes care of all other browsers. What you will notice though is that it will make everything in the wrapper transparent including the post text and the header and the menu.

    What might be best would be to use a light gray for the background color instead.

  3. d4mi4nr
    Your site is:
    Proudly powered by WordPress.
    which means that you pay to host your site, and are using WordPress software from
    wp.ORG
    This forum is technical support for
    wp.COM
    Free hosting on a multi-user platform.

    Here is the wp.ORG help forum:
    http://wordpress.org/support/
    The differences between .ORG and .COM:
    http://en.support.wordpress.com/com-vs-org/

    There is no official CSS support here, though there are 2 or 4 volunteers who drop by off and on. I don't know if CSS varies between the two wordpress platforms or not.

  4. Oops, missed that. I need sleep.

  5. Cheers for letting me know. Its a friend whose hosting so I'll ask him if he knows. Thanks again.

  6. Hi Richard,
    not on topic, but is there a way to make this clock background transparent in explorer via the CSS code you wrote?
    Panos has a similar clock (same different settings), so I suppose he would have played with that. I don't have a computer that can use Explorer so I can't experiment to see results:

    [gigya src="http://www.widgipedia.com/widgets/martinkorner/Time--Date-Widget-776-8192_134217728.widget" width="145" height="25" flashvars="colourScheme=0&UTCtime=-4& autoChange=user" quality="high" allowScriptAccess="always" wmode="transparent" ]

  7. @tess, it looks like you are using a table for the stuff in that widget, correct? First off in case something goes wrong, copy and paste all that text widget code into a plain text file before trying this. I'm not sure how the text widget will respond to the filter declaration. It may strip the filter and leave the opacity.

    You can try making the td tag at the beginning of that cell look like this:

    <td style="background-color: rgb(28, 33, 54); filter: alpha(opacity=80); opacity: 0.8; padding-top: 0.5em;">

    When I used Firebug and added the filter and opacity declarations to the HTML for your page, it

  8. @Tess: You probably need to change wmode="transparent" to wmode="opaque" and add bgcolor="..." to the shortcode, but I can't check it in Explorer now.

  9. Thank you both.

    @Richard,

    When I used Firebug and added the filter and opacity declarations to the HTML for your page, it

    ??? That's a cliff-hanger!

    @Panos,
    So maybe this will get rid the white rectangle around the clock.

    Here's hoping one way or the other will work! I can't get to the library until Friday—there are always too many people waiting to use the computers by the time I get off work…

  10. I'll soon know, because I'm working on my gigya series of posts.

    As for the opacity filter, nothing to do with the problem in Explorer: it will only make the bg and the clock paler.

  11. excellent.

  12. I want to change the white centered background colour to transparent is that possible?

  13. The filter property is IE only and will get stripped out by the WP software.

  14. @devblog,

    It survives if you don't switch to the Visual Editor. I don't know what it looks like in IE.

    <div style="background-color:rgb(28,33,54);filter:alpha(opacity=80);opacity:0.8;padding-top:.5em;width:145px;">[gigya src="http://www.widgipedia.com/widgets/martinkorner/Time--Date-Widget-776-8192_134217728.widget" width="145" height="25" flashvars="colourScheme=0&UTCtime=-4& autoChange=user" quality="high" allowScriptAccess="always" wmode="transparent" ]</div>

Topic Closed

This topic has been closed to new replies.

About this Topic