Member Avatar for rwalkerfla

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

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

Edited by happygeek because: site link snipped
  • 3 Contributors
  • 3 Replies
  • 88 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by fcvolunteer

Dani AI

Generated

— Yes. That homepage change is entirely doable. It requires two things: swapping the PHP/HTML your theme uses for the front-page loop (so each item outputs title, larger featured image and excerpt instead of the small “square” markup), and updating the CSS that currently forces the square layout.

Practical steps:

  1. Work in a child theme and back up first.
  2. Find which template outputs the homepage (common files: front-page.php, home.php, or index.php) — the WordPress template hierarchy explains the lookup order (Template Hierarchy).
  3. In that file locate the loop that prints the square items. Replace the square markup with the same structure used by your single post template (or reuse a get_template_part if available). Use the_post_thumbnail('large') for a bigger image and the_excerpt() (or the_content() if you want full text). See the function reference if needed (the_post_thumbnail).
  4. Update CSS: remove fixed widths/floats on those items and either let them stack full-width or use a flexible layout (flexbox) for image+text side-by-side. The CSS-Tricks flexbox guide is a practical reference (A Guide to Flexbox).

Tools and gotchas:

  • Inspect the live DOM and the classes with browser devtools as suggested (modern alternatives to old Firebug are Firefox/Chrome devtools — see MDN Tools). That helps map a page element back to the theme file.
  • If the homepage is built by a plugin or theme option panel, edit it there instead of a template file. Always clear caches after changes.
    As noted, a live URL or theme name would let helpers point to the exact file, but the steps above cover the usual ways to convert those squares into full post-style items.

Recommended Answers

All 3 Replies

Member Avatar for teedoff

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.

Member Avatar for rwalkerfla

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

Member Avatar for fcvolunteer

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.