Different CSS, and number of entries, on home page

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
Christine
Regular
Posts: 53
Joined: Thu Mar 26, 2009 12:50 am

Different CSS, and number of entries, on home page

Post by Christine » Mon Feb 11, 2019 10:41 am

I'm trying to customise the Clean Blog template to make a loose magazine-style layout. I want to have a different look on the home page than subsequent pages. Specifically, the home page would have 7 post previews, with the most recent larger than the others. On the following pages, I'd have 9 evenly sized previews.

I can achieve the look I want on the home page using article:first-of-type in my CSS file, but I don't know how to use it only on that page and not following pages. Is there a way to do this? Would I have to call a separate CSS file just for the home page, and if so, how would I do so?

Also, how would I display 7 entries on the home page, and 9 entries on the other pages?

User avatar
yellowled
Regular
Posts: 7007
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Different CSS, and number of entries, on home page

Post by yellowled » Mon Feb 11, 2019 2:19 pm

Christine wrote:
Mon Feb 11, 2019 10:41 am
Specifically, the home page would have 7 post previews, with the most recent larger than the others. On the following pages, I'd have 9 evenly sized previews.
I'm not entirely sure if this is possible in s9y at all. If it is, it requires a customized index page, which requires you to create a copy of clean-blog and modify that (we call that "forking the theme") because clean-blog is part of the s9y core. Thus, your changes to clean-blog would be overwritten in case of an update.

Why not just set the number of posts (you can do that in the backend in configuration) to a number of entries teasers that's the same for any page? (I also suspect that a different number of entries would mess with archives, but that's just a vague theory.)
Christine wrote:
Mon Feb 11, 2019 10:41 am
I can achieve the look I want on the home page using article:first-of-type in my CSS file, but I don't know how to use it only on that page and not following pages. Is there a way to do this? Would I have to call a separate CSS file just for the home page, and if so, how would I do so?
Usually, you would add a class to <body>, but only on the index page. So, in your index.tpl you'd use

Code: Select all

<body{if $view == "start" && $staticpage_pagetitle == ''} class="home"{/if}>
and then prefix all your home-specific styles .home

This is, of course, also something which would require you to fork clean-blog to your own custom theme. If you need help with that, I can explain that later.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Christine
Regular
Posts: 53
Joined: Thu Mar 26, 2009 12:50 am

Re: Different CSS, and number of entries, on home page

Post by Christine » Wed Feb 13, 2019 11:02 am

yellowled wrote:
Mon Feb 11, 2019 2:19 pm
Why not just set the number of posts (you can do that in the backend in configuration) to a number of entries teasers that's the same for any page? (I also suspect that a different number of entries would mess with archives, but that's just a vague theory.)
The main reason was to make the newest or a featured post prominent and large on the first page, which wouldn't really make sense on subsequent pages. But I could probably do a workaround where it's the same number of posts, but arranged differently. Thanks for the tip on the archives; that would be a pain.
yellowled wrote:
Mon Feb 11, 2019 2:19 pm
and then prefix all your home-specific styles .home
Brilliant! I didn't think of that, but that's perfect. Thanks :)
yellowled wrote:
Mon Feb 11, 2019 2:19 pm
If you need help with that, I can explain that later.
I copied the template folder to a new one called clean-blog_mod, and changed the name in info.txt to Clean Blog Mod. Is there anything else I need to do?

I have another question, but let me know if it's better suited to another section of the forum. I'd like my readers to be able to switch between two themes - the new one I'm working on, and the old (current) one. I know there's the dropdown theme switch plugin, but I'd like to have a simple button or link that lets you change to the other theme. Is this possible?

User avatar
yellowled
Regular
Posts: 7007
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Different CSS, and number of entries, on home page

Post by yellowled » Fri Feb 15, 2019 4:39 pm

Christine wrote:
Wed Feb 13, 2019 11:02 am
I copied the template folder to a new one called clean-blog_mod, and changed the name in info.txt to Clean Blog Mod. Is there anything else I need to do?
Nope, that's it. Great! :)
Christine wrote:
Wed Feb 13, 2019 11:02 am
I know there's the dropdown theme switch plugin, but I'd like to have a simple button or link that lets you change to the other theme. Is this possible?
I'm not at all familiar with the theme switcher, but I assume it is. Try asking this again in the plugins forum, maybe the other guys can help you out.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: Different CSS, and number of entries, on home page

Post by Don Chambers » Fri Feb 22, 2019 5:37 pm

I would like to point out that much of how your site appears using Clean Blog will not work if your visitors switch themes because the Clean Blog uses theme-specific options that will not be passed to another theme via a style switcher.

Post Reply