Semi-Transparent Background & Effect on Text in Homepage Panes and Widget Areas

  • tdonatello

    #5477

    Greetings –

    I am a relative newbie, so please don’t judge the stupidity of my questions! 🙂 I’ve been using WordPress for awhile, but mostly just basic blogs – just now getting into designing websites and trying to do custom stuff with styling, etc. Most of it I am doing with plugins. Writing my own code? Not so much, but I am trying to learn!

    So that’s where I’m coming from. I’m using Graphene (obviously) and here is my site: http://www.diamond-derby.com If you could check it out I would be grateful.

    My questions/comments are as follows:

    1. Throughout the site, I am using a semi-transparent PNG image as what I believe is the content “wrapper” (container? sorry, I don’t know the jargon yet), so that the site’s background image can show through. I did this by going into the theme’s style.css file (yes, I know I shouldn’t be playing around with this but child themes actually scare me more than CSS right now…) and substituting the image for the background color specified by the theme.

    2. Then I noticed the button I created with a plugin in the sidebar on the right was bigger than the widget area (which was white). It looked dumb and I didn’t know how to adjust the dimensions of the widget, so I located the CSS for the sidebar wrapper and added the transparent PNG there too. As far as desired look and functionality goes, so far, so good.

    3. It looks like the homepage panes uses the same background, which is fine except you’ll notice the font is very faint. How do I get this to show up better?

    4. I put sponsor ad boxes in the action hook widget graphene_before_footer. This seems to be completely transparent by default. To blend into the main content wrapper, how do I add my semi-transparent PNG as background here too?

    5. And, I know it’s off topic, but within the graphene_before_footer widget area, how in the world can I get control over how the icons plop themselves in there? In other words, some of the smaller ones that are more rectangular I’d like to “stack” on top of one another so they will equal the size of one of the square ones. How would I go about doing that?

    Thanks so much for your help!!

    Cheers,

    Todd

    ronangelo

    #32049

    If you don’t want to have to create a child theme then you can just put all your

    css codes in graphene options -> display -> custom css

    1. You can also just remove every transparent.png you used and replace it with this code.

    This speeds up the site by not needing to transfer a png file.

    This also answers your questions no. 2 and 4

    #container {
    background: rgba(200, 200, 200, 0.7);
    }

    3. you can use a different background for the text.

    This changes the background for the titles and paragraphs.

    .homepage_pane {background: #FFF;}

    This only changes the background for the paragraphs.

    .homepage_pane > .post-excerpt {background: #FFF;}

    5. You can place the images inside a table, adding 2 small images on a single cell.

    Mod

    Kenneth John Odle

    #32050

    Two bits of advice that will take care of all your problems here:

    First, use the Firebug extension for the Firefox browser. (If you prefer Chrome, use the “Inspect Element” feature. If you prefer to use Opera, the parallel extension is called “Dragonfly”.) This will help you isolate the codes that you need to change, and you can even make changes on the fly to see how they look before adding them to your style sheet.

    Second, use a child theme. You say you don’t know CSS that well? Without a child theme, every change you’ve made to the theme’s style sheet will disappear at the next update. Graphene is in active development, meaning that updates are frequent. Yes, you can choose not to update, but then you miss out on new features as well as security patches.

    If you really want to learn CSS (and HTML, and PHP down the road)—and I get the feeling that you really do, or at least need to—then check out the resources listed here: https://forum.graphene-theme.com/graphene-support/beginners-resources-possible-sticky Those resources are where most of us learned this.

    Cheers,

    Ken

    tdonatello

    #32051

    Thanks so much gentlemen. Greatly appreciate the help. Thank you also for the resources on learning CSS.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.