If you wish to use your own CSS to style the output of the shortcode, here are the basics (I hope to put together a more detailed guide at a later date – when time allows).
Here is an example of the HTML output by the shortcode:
<div class="ccchildpages threecol simple ccclearfix">
<div class="ccchildpage ccfirst ccodd ccpage-count-1 ccpage-id-17 ccpage-sub-page-1">
<h3>Sub Page 1</h3>
<p class="ccpages_excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis laoreet quam eget porttitor. Proin nisi magna, ullamcorper nec lacus vel, malesuada malesuada erat. Nullam ut finibus nisi. Nullam leo justo, elementum sit amet posuere sit amet, congue quis metus. Maecenas ultrices est porttitor dolor fringilla commodo. Morbi ut cursus mi. Praesent interdum erat arcu....
</p>
<p class="ccpages_more">
<a href="https://ccchildpages.ccplugins.co.uk/sample-page/sub-page-1/" title="Read more ...">Read more ...</a>
</p>
</div>
<div class="ccchildpage cceven ccpage-count-2 ccpage-id-19 ccpage-sub-page-2">
<h3>Sub Page 2</h3>
<p class="ccpages_excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis laoreet quam eget porttitor. Proin nisi magna, ullamcorper nec lacus vel, malesuada malesuada erat. Nullam ut finibus nisi. Nullam leo justo, elementum sit amet posuere sit amet, congue quis metus. Maecenas ultrices est porttitor dolor fringilla commodo. Morbi ut cursus mi. Praesent interdum erat arcu....
</p>
<p class="ccpages_more">
<a href="https://ccchildpages.ccplugins.co.uk/sample-page/sub-page-2/" title="Read more ...">Read more ...</a>
</p>
</div>
<div class="ccchildpage cclast ccodd ccpage-count-3 ccpage-id-21 ccpage-sub-page-3">
<h3>Sub Page 3</h3>
<p class="ccpages_excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis laoreet quam eget porttitor. Proin nisi magna, ullamcorper nec lacus vel, malesuada malesuada erat. Nullam ut finibus nisi. Nullam leo justo, elementum sit amet posuere sit amet, congue quis metus. Maecenas ultrices est porttitor dolor fringilla commodo. Morbi ut cursus mi. Praesent interdum erat arcu....
</p>
<p class="ccpages_more">
<a href="https://ccchildpages.ccplugins.co.uk/sample-page/sub-page-3/" title="Read more ...">Read more ...</a>
</p>
</div>
<div class="ccchildpage ccfirst cceven ccpage-count-4 ccpage-id-24 ccpage-sub-page-4">
<h3>Sub Page 4</h3>
<p class="ccpages_excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis laoreet quam eget porttitor. Proin nisi magna, ullamcorper nec lacus vel, malesuada malesuada erat. Nullam ut finibus nisi. Nullam leo justo, elementum sit amet posuere sit amet, congue quis metus. Maecenas ultrices est porttitor dolor fringilla commodo. Morbi ut cursus mi. Praesent interdum erat arcu....
</p>
<p class="ccpages_more">
<a href="https://ccchildpages.ccplugins.co.uk/sample-page/sub-page-4/" title="Read more ...">Read more ...</a>
</p>
</div>
</div>The entire output is wrapped up in a div with a class of `ccchildpages` which is used to identify the div elements contained within.
You will see from the above that another class is specified for this outer div which defines how the child pages should be displayed:
- `onecol` = 1 column
- `twocol` = 2 columns
- `threecol` = 3 columns
- `fourcol` = 4 columns
A class of `ccclearfix` is also assigned to this outer div, and is used to clear the CSS floats used in the layout.
Unless you have specified a custom class for the shortcode, a class relating to the “skin” used will be added to the outer div. This will be set to one of the following: `simple` (the default, applied if nothing else is specified), `ccred`, `ccblue` or `ccgreen`.
Within this div, there will be 1 div for each child page – each with the class of `ccchildpage`.
Other classes that get applied to these child page divs are:
- `ccfirst` which is applied to the first child page in a row (e.g. for 3 columns, it will be applied to the first, fourth, seventh, etc. child pages)
- `cclast` which is applied to the last child page in a row (e.g. for 3 columns, it will be applied to the third, sixth, ninth, etc. child pages)
- `ccodd` which is applied to every other child page starting from the first
- `cceven` which is applied to every other child page starting from the second
- `ccpage-count-[n]` where `[n]` is the current count of the number of pages output, starting from 1 (e.g. `ccpage-count-4`)
- `ccpage-id-[n]` where `[n]` is ID of the page (e.g. `ccpage-id-24`)
- `ccpage-[slug]` where `[slug]` is the slug for the page (e.g. `ccpage-sub-page-4`)
Within each of these divs you may find (depending on the shortcode usage) the following elements:
- A heading of type `<h3>` – the Page Title
- A paragraph `<p>` with the class `ccpages_excerpt` – the excerpt for the page
- A paragraph `<p>` with the class `ccpages_more` – the “Read more…” link
Hopefully, this will help you to apply custom CSS to make the shortcode fit seamlessly into your site.