Styling a list in Freeway Pro

Author: Bart de Vreede
Last update: 03-05-2013

 

In HTML and and for that reason also in Freeway Pro a list item is something treated in a special way. If you do not style a list item, it will be generated and displayed in the standard (in my opinion ugly) way. For that reason, you can style a list, so it will match the appearance of your website.

This article shows you how you can style your lists in Freeway Pro.

Here is the standard way your list will be shown if you do not style it. As you can see this does not match the style of my website because it uses the Times New Roman font.

• Line 1
• Line 2
  • Line 3
  • Line 4

 

This website is using the OpenSans font and I would like my list to also use that font.

 

There are different ways you can style your lists in Freeway Pro. One will affect every list in your website project at once and the other one can be use on one page or even applied in different styles to different blocks with list items in one HTML item.

 

This one will change every list in your Freeway Pro project

 

• Go to your Style Palet
• Click on the wheel icon
• Choose Adjust Styles
• Make a new style by clicking on the plus in the lower left corner
• In the Tag field type li
• Choose the way you want to style your list
• Click Ok and every list item in your website project will change at once

 

 

 

This one can be applied to a list item on a single page

 

• Go to your Style Palet
• Click on the wheel icon
• Choose Adjust Styles
• Make a new style by clicking on the plus in the lower left corner
• Type nothing in the Tag field
• Type an name in the Name field (for example list)
• Choose the way you want to style your list
• Click Ok
• Select the indented list item you want to style and click on the .list in the Style Palet

 

 

 

EXTRA TIP!

Standard your indented list will get a filled bullet and your nested list (list within a list) will get an open bullet. You can even go further, and for example if you go two levels deep you will get a square filled bullet.

In this page you do not see bullets, but a small arrow. To achieve this, you need a Freeway Pro action called List Item Images that you can download here: http://www.freewayactions.com/product.php?id=010

 

 

>> click here to go back to the homepage

Article tags: Freeway Pro, list item, style, bullet, indent, nested, li style, List Item Images action, how to style a list in Freeway Pro

 

 

---