WordPress.com

1. ssbutterfly
   Member
   Jan 24, 2012, 5:30 AM

   Howdy. I'm just looking for a little clarification on how to modify individual elements of my blog site. http://literarygadabout.wordpress.com.

   This topic has been addressed in a previous forum http://bit.ly/yO0WJX (now closed to comments), which provided a great starting point. Now I'm hoping to refine everything.

   Specifically, I'd like to make the text boxes clean and professional looking (easy to read, nice spaces between each element so the background shows through, using a slightly transparent text box background as opposed to white which still allows the text to pop).

   The sidebar looks pretty rough (too much white space and an awkwardly placed Twitter widget) and throughout the site there are seemingly random text boxes that do not have the white background applied to them with the existing CSS I've added (for example, "Notify me of follow up comments via email" at the bottom of a post).

   The trouble is, I don't know what these elements are "called" (what to put in the selector component) in order to begin experimenting with proper declaration values and properties for each of them.

   If I can just get a basic list of each of the names of the elements on my page, with a few specific suggestions for helping to clean up the overall look of my site by adjusting all the random white text space, that would be a huge game-changer for me. At this point, I'm embarrassed to even post anything new to the site until it looks better ;/

   Whoever takes the time to respond to this, just know that I very much appreciate you. I WILL learn this CSS one day...I just need a little guidance to get me going. Thank you :)

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

2. thesacredpath
   Staff
   Jan 24, 2012, 8:49 AM

   When you say text boxes, are you talking about the posts as well as the "breadcrumbs" and "recent news" bar and the sidebar?

   For maximum cross-browser compatibility, I suggest creating a PNG image with the level of transparency you want about 5px x 5px and then setting that as a repeating background for the elements. There are issues with using CSS opacity (it applies to nested divs as well so the text would take on that opacity) and using RGB Alpha is a pain as well since Internet Explorer requires its own convoluted filters and the filters aren't even consistent from one version of IE to the next, so you end up having to have at least 2 of them.

   This will fix the width issue with the twitter widget although staff really need to fix this on their end.

   .widget_twitter {
   width: 93.5%;
   }

   I would suggest getting the Firebug add-on for Firefox which will allow you to quickly find the various CSS selectors for the page elements and it even allows you to try out CSS modifications and changes in real-time. Safari (if you are on Mac) also has the web inspector which will allow the same things although it isn't as straight forward as Firefox in my opinion. I believe Chrome also has this ability as does IE9.

3. ssbutterfly
   Member
   Jan 24, 2012, 8:32 PM

   Hey thanks, buddy. Excellent advice..... AGAIN! I appreciate your expertise and time. The blog is looking more presentable now. I'll keep tinkering!

4. thesacredpath
   Staff
   Jan 24, 2012, 9:42 PM

   You are welcome.

Topic Closed

This topic has been closed to new replies.