SNIP

I want to keep my featured gallery running the slides like the latest 2 updates, but below it, instead of the style of recent post updates and older post updates that i have, which are those squares, i want to turn each one of those squares into something like on tmz.com how they have there homepage . you know with a full layout of the actual update with text, like here at this screen shot http://i54.tinypic.com/2z5st3t.png

Or i guess another way of looking at it, when you click on one of my post and it takes you to the post page, the exact look of the actual post, i want that design on the homepage. Another example would be over at thechive.com how they have there updates

Is it possible for me to change this?

Is there anyway i can make this happen somehow because im very lost on how to make it happen.

Thanks for all your help

Recommended Answers

All 3 Replies

You've given two examples of some ideas that you want for your site. Why not view the source code for each of those sites, find the elements that are used to code those ideas, and copy/recreate them for your site.

Firebug is a great tool for firefox. You can view a page, click a button that lets you select a specific element on that page, then it will show you the exact html and css for those elements.

teedoff, I appreciate your response. I am new to CSS and Wordpress and although I am proud of myself for my design being its the first major thing I have done, it took me tons of hours to complete. I have been told about Firebug but I clearly do not understand it at all. I think im expecting to see something that I'm not seeing. As far as looking at the source code for my site and the recent post area, would that be the code in the style.css in wordpress, or something else?

Here is what I have in style.css but I don't think this is what I'm looking for


/* 2.5 Recent Posts */
#recent-posts { margin: 0 -20px 10px 0; }
#recent-posts h3 { margin: 0 0 20px 0; }
#recent-posts .post { position: relative; float: left; width: 300px; height: 185px; margin: 0 20px 20px 0; background: #d4d4d4 }
#recent-posts .post .heading { width: 270px; padding: 15px; position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.8); }
#recent-posts .post .heading h2 { font-size: 18px; text-transform: uppercase; }
#recent-posts .post .heading h2 a { color: #fff; }
#recent-posts .meta { font-size: 11px; text-transform: uppercase; color: #66cc33; }
#recent-posts .meta a { font-weight: bold; }


/* 2.6 Older Posts */
#older-posts { margin: 0 -20px 30px 0; }
#older-posts h3 { margin: 0 0 20px 0; }
#older-posts li { float: left; width: 300px; margin: 0 20px -1px 0; padding: 10px 0; border-top: 1px solid #666666; border-bottom: 1px solid #666666; }
#older-posts li img { float: left; margin: 0 07px 0 0; }
#older-posts li .info { }
#older-posts li .info span { display: block; }
#older-posts li .info .meta-old { color: #666666; font-size: 11px; }
#older-posts li .info .title-old { font-weight: bold; font-size: 22px; line-height: 20px; }
#older-posts li .info .title-old a { color: #000; }
#older-posts li .info .title-old a:hover { color: #6f6f6f; text-decoration: none; }


Can you give me directions?

Thank you

Hi rwalkerfla,

Is it possible for you to provide a link to your site? I'd love to try and help but without looking at your current css it's kind of hard.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.