Add custom style to Projection Grouping

Topics: Administration, Customizing Orchard, General, Troubleshooting, Writing modules
May 16, 2012 at 12:10 PM

Ok I want to remove the standard disc style on the ul element of the grouping list in a projection query.

repo

  1. Create a few pages
  2. Create a query to select all Page content type
  3. Add a new HTML list layout
  4. Add a new property such as created date time
  5. Select the property as the grouping
  6. Create a new projection and select the above query and layout

When you view the page you will see (depending on your css) the standard disc style bullets next each of the groupings.  I don't want to remove this style from all ul or for projection-page ul as the style is used for lists within the projection.  I want to target the ul for the grouping.  I have managed to do this successfully for the projection items by setting a style in the Html properties for the layout.

Any ideas?  There must be a way!  Perhaps I need to create my own layout?  Or extend the existing one?

Cheers,

Jeff 

Coordinator
May 16, 2012 at 5:42 PM

I think it should be done in the theme, not in the module. At least we could do it for The Theme Machine.

Coordinator
May 16, 2012 at 5:42 PM

Why don't you just set the list class and target it this way? It's under Html properties.

Jul 5, 2012 at 9:59 PM

Seemed to have missed your replies on this... sorry!

Ok so I have tried to use the list class in the Html properties to target the region, but it is the outer ul that I need to target to adjust the styles in my theme.  I have stripped down some html output to illustrate the problem

 

<div class="group" id="content">
    <div class="zone zone-content">
        <article class="content-item projection-page">
            <ul> <!-- Outer ul added for grouping... I want to target this to style it -->
                <li class="first">
                    <ul class="course-list"> <!-- List class set in Html properties -->
                        <li class="delivery-date-heading">September, 2012</li>
                    </ul>
                    <ul class="course-list"> <!-- List class set in Html properties -->
                        <li class="first">
                            <article class="content-item course-delivery">
                                <!-- ... content (including more ul) ... -->
                            </article>
                        </li>
                        <li class="last">
                            <article class="content-item course-delivery">
                                <!-- ... content (including more ul) ... -->
                            </article>
                        </li>
                    </ul>
                </li>
            </ul>
        </article>
    </div>
</div>

As a workaround I am targeting  .projection-page ul {} to remove the disc style and then .projection-page .content-item ul {} to add it back in for the content.

Coordinator
Jul 9, 2012 at 5:14 PM

When in property mode, you can specify a class for both list and elements: