Symphony.

I am new with «Symphony.» and i like it pretty much, but need some help: I went through the beginners guide and managed to build my own greetings posts.

now i would like to display my posts in three columns (something like this: http://www.clutchmagonline.com/) important is, that is has to be responsive design, so when i open it on a mobile phone, the posts should appear in one column. for that, i want to use foundation 3 from zurb.

my problem is, i can display the blog in a narrow column, but i do not know how to make the posts float to each other.

my "greetings entry" in the home.xsl looks like this: http://xpathr.com/view/3360498/

does any one know how i get these three columns. is it about css, or is it the template, that i have to change?

Hi Nzagamba, the site you refer to is using a javascript script called masonry to assist in the rendering of the posts as you would like them to appear.

Generally you can use css to provide the float aspect of your layout. But please describe what your actual issue with applying this technique?

thanks moonoo, maybe i have to ask like this, i would like to style my first article other than the second and third. that would help me floating article2 to article 3, or having the first article big and article 2,3, and 4 small. my problem is, i don't know how to point to my articles in the css. which id? class? where do i define them?

You could use a method called modulo:

Say you want the first article to be different from the rest, you could do it with CSS but sometimes you may need to output more than just a different class for the first article.. i.e a video or more images associated with that article.

This thread "XSLT tips that will change your life" is a good place to start.

This allows you to conditionally attach or remove elements,attributes and values to your match in a template based on the rules you set in the modulo ruleset.

It is extremely flexible and fairly straight forward implement. Take a look at the examples in the link and I'm sure you'll begin to grasp the concept.

If you do feel you need more clarity, please feel free to ask some more here.