Horizontal page list in elemental theme

Permalink
Hi all

Is there a way to arrange pages in a page list horizontally or in several columns in the elemental theme or an override of this theme?

 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi tipweb,

What you are describing can be done using block templates. Block templates let you control the block output (including visual presentation).

Are you comfortable with CSS and basic PHP? Both are required to make the block templates.
tipweb replied on at Permalink Reply
Hi Mr Dilkington

Thanks. PHP is quite new to me and I did not yet use much CSS, but this should be no problem - beside that I don't want to use to much time with the website -. Can you give me some hints or a link to a tutorial or a forum diskussion?
Onother way to do a horizontal menu with links would be to use a table and directly some html. But I would prefere to use the concrete5 possibilities.

Regards
Matthias
MrKDilkington replied on at Permalink Reply
MrKDilkington
This is a tough situation if you don't know much CSS.

Do you have a picture of what you are trying to make?
tipweb replied on at Permalink Reply
Hi
Here you can find the website under construction. You see my first steps using concrete5 there.
http://www.neu.theaterimpaul.ch/theaterimpaul/team...
I think the page list needs to much room and I would prefere to have the pagelinks arranged horizontally.
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
Ok, I made a quickie block template for you. It will arrange the page list results horizontally in rows of three.

1. In your concrete5 5.7 install, navigate to application\blocks\
2. In the blocks folder, create a folder called "page_list"
3. In the page_list folder, create a folder called "templates"
4. Unzip the attached file into the templates folder.
- Your new path should look like this
application\blocks\page_list\templates\horizontal_three\view.php
5. While in Edit Mode, click on the page list block and choose "Design & Custom Template".
6. In the new menu, click the gear icon.
7. In the Custom Template dropdown, select Horizontal Three.
8. Save
tipweb replied on at Permalink Reply
Hi

Thank you very much. It works great!
Two things:
I first had to create the directory application/blocks under the directory with the site's name too.
The entries in the list are not really aligned with the content of the other blocks. I adjusted this by setting the horizontal padding to -15px. Could this be done in the view.php?

Kind regards an many thanks.
Matthias
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
Hi Matthias,

Can you take a screenshot and show where they don't line up? Also, where did you add the padding?

I attached a screenshot of the current page with outlines around all the elements. It might help you see how things are lining up.
tipweb replied on at Permalink Reply 1 Attachment
Hi
In the attachment, you see that all the blocks are aligned (black frame and red line), but in the page list, there is a margin on the left side.
Under 'design and custom template' -> 'margin and padding' I set the left margin to -15px to align the text in the page list with the text with the page name.

Could your addon be made available with a next concrete5 release?
tipweb replied on at Permalink Reply
Now, I have problems with alignment between pages. I upgraded to concrete 5.7.2.1. Suddenly I end up with some pages having smaller left margins than other pages. Ofter doing some edits and saving the pages, most of them now have smaller margins, but not all of them. Once I had the horizontal page list aligned with the other blocks, but after editing the other blocks, they got a smaller left margin and I had again the page list no longer aligned with this other blocks.
I fear, we have a bug here.
MrKDilkington replied on at Permalink Reply
MrKDilkington
I would recommend resetting all the padding and margins that you added. That way you can go back to the beginning.

The Elemental theme uses the Bootstrap3 grid framework. Each column gets 15px of padding-left and 15px of padding-right.