Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Author Topic: How to customize home page  (Read 272 times)

BS0D

  • Newbie
  • *
  • Karma: 0
  • Posts: 18
How to customize home page
« on: January 05, 2013, 07:39:15 PM »

Hi everyone,

I was wondering if you knew a way that I could customize the layout of a page, which I would use as the homepage for my site.

I would simply like to display the latest articles but modify the layout so the articles are displayed side by side (2 columns), but I don't know what function to call to display the latest articles (not just the titles, but also the content preview...).

How can I achieve that?

Thanks for you help!
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: How to customize home page
« Reply #1 on: January 06, 2013, 03:52:40 AM »

Sure, you can do a variation of how I have it set up on the front page of my site (frdk.com). My setup uses a jQuery-dependent tabs script for the functionality but the basic structure can be the same. You do need this mod to begin with, to pull in the content. In my setup I use the following construct in index.php, so the mod php file is included at the top of index.php.

The basic HTML layout looks like this:

Code: [Select]
<div id="block1"><?php myposts(0,9,0); ?></div>
<div id="block2"><?php myposts(9,9,0); ?></div>
<div class="clearing"> </div>

This will pull the 9 latest articles into block 1 and the 9 preceeding articles into block 2 (because my setup is based on a three-column grid). Set the limits according to your own needs.

To use this setup in the sNews admin area, again include the myposts mod php file at the top of index.php, then in the textarea of the page you're using as the home page, do something like this (the [func]...[/func] tags are required).

Code: [Select]
<div id="left_column">[func]myposts:|:start,limit,category[/func]</div>
<div id="right_column">[func]myposts:|:next_start,limit,category[/func]</div>
<div class="clearing"> </div><!-- Clears floats -->

Sample styles for column divs, put in your CSS file:

Code: [Select]
#left_column {float:left; display:block; width:45%; margin-right:.75em;}
#right_column {float_left; display:block; width:45%; margin-left:.75em;}
.clearing {clear:both; display:block; margin:0; padding:0; font-size:1px; line-height:0; zoom:normal; /*zoom is invalid code according to W3C but IE needs it, so...*/}

Please note that the CSS code is an example, you'll need to figure out for yourself what works in your particular design. Also note that the code for myposts is taken directly from my custom version which is modified to work with my layout, in other words you may need to work a <ul></ul>, or other form of container, into the mix for your article content.
Logged

BS0D

  • Newbie
  • *
  • Karma: 0
  • Posts: 18
Re: How to customize home page
« Reply #2 on: January 12, 2013, 01:08:56 AM »

Hi FredK,

Thanks for the awesome reply :)
I did make my own HTML5 + CSS3 theme as well (I really like your design by the way ;)) and I'd been wondering about customizing the home page for a while.

I'll have a look at that and I'm good to go!

Thanks again
« Last Edit: January 12, 2013, 01:10:27 AM by BS0D »
Logged