How to format an auto list? Some pages in my site feature nicely formatted page auto lists and others are feature “ugly”, lists without formatting. How do I make a page auto list with the nicer formatting? Screen shots attached!
Hi Joseph,
You have to use CSS to format your auto lists. When configuring the template that contains the auto list widget, you can manually apply a CSS root class in the widget’s style properties, and then stylize the auto list widget through your CSS file. It appears that no CSS formatting is being applied to your auto list in your first example, whereas CSS is being applied in your second example.
How did you configure the auto list in your second example? When configuring the template that contains the auto list widget, did you manually apply a CSS root class in the widget style properties? If so, you can apply the same root class to the widget in the first example you provided, and that should apply the same formatting to both auto lists.
Let me know if this helps. If not, you can work with whoever designed your CSS and follow the steps I outlined above to manually apply a CSS root class to the widget in your first screenshot, and then stylize the auto list widget through your CSS file.
Nathaniel
The CSS root class was the trick. Thanks gentlemen for your help!
I’m not seeing a root class option in my widgets, in the Page Auto List, nor the breadcrumb widget. Where did they go? I’m on v.3.0
Hi Paul,
You can apply a class or classes to widgets within the “Style” tab. Clicking on a widget should cause a wrench icon to appear, which will enable you to add one or more classes to a particular widget (with the exception of an HTML widget). Mulitple classes can be separated by a space.
Ah, thanks! I was trying to do it on the layout tab under the widget properties…okay so now when i configure a widget I’ll have to configure some properties under the layout tab, and then others under the style tab. good to know.
didn’t it used to be with the other widget properties on the layout tab? or am I just crazy?
ack, see this is misleading. I went in and added my class to my breadcrumb widget, but it adds the class to the widget’s container div, not to what I consider the widget itself. In the case of the breadcrumb widget the actual breadcrumb object to me is the Unordered List, not its container div. therefore adding a class to the “widget” should add it to the unordered list itself, not its container object.,
Hi Joe,
Most likely, there is a CSS class that is being applied to the list that is formatted (second screenshot). You can confirm this by going to the template or page where the widget is inserted. Then, navigate to the “style” tab and click on the widget. You will a see a wrench icon in the upper right-hand corner of the widget. Clicking on the wrench will display the CSS class or classes that are attached to the widget.