Blog post list, with "box" formatting

Tagged: entry, featured posts, home, index, layout

This topic has 8 replies, 3 voices, and was last updated 9 years, 3 months ago by MiguelGuzman.

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

Author

Posts
January 4, 2015 at 8:02 am #14851
MiguelGuzman
Customer
Hi there,

I have two questions that are very related and possibly the answer to one can shed some light into the other, they’re both about displaying the blog’s latest posts with excerpts.

1) First, I’d like to show a “latest posts” page similar to this one:

http://demo.appfinite.net/epik/layouts/cs/

With a list of posts from the blog, formatted with the neat epik “boxes”.

I tried using the “portfolio” template, and what I get is the excerpts in a row, which is quite cool but not exactly what I want. As the web is not yet live, here’s a screenie:

http://i.imgur.com/aWdjh2H.jpg

What I want to do is a page like the previous one (http://demo.appfinite.net/epik/layouts/cs/) but with the image at 150×150 and an excerpt.

2) Second, I’d like to show something similar (but with less posts, like just the last 5), in the homepage, in the “Home Feature #1 (Left)”. I’ve set that widget width to 65% (and reduced the #2 width to 25%), displayed the “Genesis – Featured Posts” widget inside, and got something quite nice:

http://i.imgur.com/Sy2Dqej.jpg

But, hey, I don’t get the nice “boxes” here, which is what I wanted. So I don’t know if it’d be better to restyle the “Genesis – Featured Posts” to add the boxes (any tips?) or to include some other type of code. What do you think?

FWIF, my model of homepage is this one: http://www.bryantracy.com – it shows a short lists of blog posts below the fold, and then it has http://www.bryantracy.com/blog , with the proper blog index. I want to have something similar, but with epik’s look & feel.

Thanks in advance, and best regards,
January 4, 2015 at 9:09 am #14852
MiguelGuzman
Customer
OK, I found out that there’s a “Blog” template and that it comes from Genesis. I think that (if I can style it properly) this solves question #1 above.
January 4, 2015 at 12:16 pm #14853
MiguelGuzman
Customer
It’s a pity I can’t edit posts in this forum, because I basically have it figured out, at least the first part.

Got this nice boxed post entries for the blog page:

http://i.imgur.com/E63DlBu.jpg

So far so good. One thing that would be cool to do is include this on the homepage, so I could put some stuff above and below it.

I don’t know if it’d be easier to style the homepage like this, or to create a custom template based on genesis ‘blog’ and add some areas there.

From now on it’s kind of an open-ended question, any idea would be appreciated.

Best regards,
January 5, 2015 at 9:25 am #14856
Eric
Customer
I thought I replied to this yesterday, I guess I forgot to hit the “Submit” button.

Anyways, did you get everything figured out?

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
January 5, 2015 at 3:45 pm #14859
MiguelGuzman
Customer
Thanks for your kind response Eric.

Actually, I’ve gone live with the site and there’s something that’s puzzling me. Maybe you can give me a clue.

Site blog page, cute neat boxes with shadows:

http://www.exito-personal.com/blog

Site homepage, no boxes, no shadows:

http://www.exito-personal.com

The thing is that *both* should be the *same* page, the “/blog” page which is empty except for the usage of the genesis “Blog” template.

I suppose what happens is that by virtue of being the homepage, the classes are slightly different and thus my css matches one but not the other.

BTW, somehow the blog pages don’t work. You click on “2”, “3”, “Next Page” etc and it shows the first page again. This happens just in the homepage. Weird…
January 8, 2015 at 10:32 pm #14882
Eric
Customer
Look in your css around line 2303 and either remove or comment out this code –
```
.home .entry {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background: none;
}
```
That should add it back.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
January 12, 2015 at 6:47 pm #14897
PrintsCharming
Customer
How did you do this? I would like to have condensed blog posts as well but cannot for the life of me seem to figure out how to do this??

http://susansez.com/?page_id=468
January 17, 2015 at 5:38 am #14928
MiguelGuzman
Customer
Thansk a lot Eric, I managed to use the info you provided to add back the box styling in my own custom.css.

That is, I added code instead of removing it (to keep my own css apart, and not modify epik’s css).

This is the code I added:
```
/* Stylize the home with the box items */
.home .entry {
	box-shadow: 		0 3px 6px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:	0 3px 6px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:     0 3px 6px rgba(0, 0, 0, 0.2);
	background: #fff;
}
```
January 17, 2015 at 5:45 am #14929
MiguelGuzman
Customer
PrintsCharming:

Hey, I have stylished the blog entries with several changes that I keep in my own css. I won’t paste all the changes here, because I’m not 100% satisfied with the end result, I think I’ll keep tweaking it.

But you can check all the changes I’ve done, here:

http://exitopersonal.exitoblogs.com/wp-content/themes/epik/custom.css

Some stuff you might want to check:

1) This removes the entry footer, with the category and tags, since I deem this is not useful for my readers, and saves space:
```
.entry-footer {
	display: none;
}
```
2) This one makes the entry meta show up besides the image instead of below:
```
/* Entry meta is shown at the side of the featured image 
(removes "clear: both;" that makes it show below) */
.entry-meta {
	clear: none;
}
```
I’m still tweaking the layout until I get one I’m 100% comfortable with.

I hope this is useful for you. See you around!
Author

Posts

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

You must be logged in to reply to this topic.