caterhamcomputing

The excerpt is the standard excerpt as generated by WordPress, which does not retain formatting (basically because when truncating to a set number of characters you are more than likely to lose the closing HTML tags and generate invalid HTML.

The plugin adds the excerpt meta-box to Pages (it is usually available for Posts), so you can write a custom excerpt to be displayed.

Using the Rich Text Excerpts plugin (https://ww.wp.xz.cn/plugins/rich-text-excerpts/) or a similar plugin, you can create formatted excerpts. (N.B. I’ve not used this plugin with the latest version of WordPress.)

You can set the parameter truncate_excerpt="false" for the CC Child Pages shortcode to avoid truncating theHTML. Note that if the number of words in the excerpt is greater than that specified in words (the default being 55), the excerpt will still be shortened and the formatting lost … so you may want to also specify something like words=100 to avoid this unless absolutely necessary.

You would need to use something like:

a.my_link_title_class:hover {
    color: #144A00;
}

… note that the hover pseudo-class comes immediately after the class for the element – there is no space. To style all of the possible states for the link (link, visited, hover, active) you’d probably want to have several declarations:

a.my_link_title_class:link {
    color: #289400;
}
a.my_link_title_class:visited {
    color: #289400;
}
a.my_link_title_class:hover {
    color: #144A00;
}
a.my_link_title_class:active {
    color: #289400;
}

… of course, you might want to have different colours for different states … or even different background colours.

Have a look at the following for more information about styling links with CSS:

http://www.w3schools.com/css/css_link.asp
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3schools.com/css/css_pseudo_classes.asp

I hope that this helps.

The following CSS Tutorials might be of some help:

http://www.csstutorial.net/
https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-css
http://www.w3schools.com/css/css_intro.asp

… and there are many more equally good sites if you check Google for “Introduction to CSS” or similar …

For the structure of the code generated by the plugin, check out the Customisation page on the plugin web site: http://ccchildpages.ccplugins.co.uk/customising/

I am marking this topic as resolved, as I have not heard back from you.

I am hoping that my previous instructions were of some help … I have since tested the CSS, and it works as expected.

If you feel that I have not fully answered your query, please do let me know.

Hi.

Sorry I haven’t been around to answer sooner.

The easiest option would be to specify your own class for styling when using the shortcode, e.g.:

[child_pages cols=”2″ class=”myclass-ccchildpages”]

You can then apply custom CSS to style the output, e.g.:

.myclass-ccchildpages .ccchildpage {
    border: 1px solid #ccc; /* substitute your preferred colour for #ccc */
    background: #fff; /* substitute your preferred colour for #fff, or remove background declaration altogether ... */
}

Note that the class specified in the shortcode always precedes the class for the CC Child Pages element that you wish to style. Other classes which may be of interest are:

.ccodd – odd numbered child pages in the list (first, third, fifth, etc.)
.cceven – even numbered child pages in the list (second, fourth, sixth, etc.)
.ccpages_excerpt – the excerpt text
.ccpages_more – the Read more message

… this is applied to the paragraph containing the read more link, to target the link itself use: .myclass-ccchildpages .ccpages_more a

The heading is specified as an H3 element, so to target that you would specify: .myclass-ccchildpages h3

I hope that this helps.

Hi.

I’m not really sure what you are asking?

I can see that you have used the shortcode on the Books page (http://www.wpsweet1.com/charms/books/) to show it’s child pages.

If you wanted to display these same child pages on the front page (or any other page) you would need to set the id parameter to the id of the parent page (http://www.wpsweet1.com/charms/books/).

The shortcode would be placed wherever you want the child pages displayed.

I think that you are suggesting using the plugin within one of the existing columns on your front page … if this is so, I would strongly suggest setting the cols parameter to 1 to avoid the columns being too squashed and becoming unreadable on smaller screens.

The plugin is not directly capable of displaying other information or adding PayPal buttons – it was designed purely to allow child pages to be listed.

However, if you use set the parameter truncate_excerpt="false" you will be able to enter your own HTML as the excerpt for each page without it being truncated by the plugin – it would probably be easiest to use the “Rich Text Excerpts” plugin to allow you to edit the excerpt using the standard WordPress editor.

You might find that some kind of shopping cart or product catalogue plugin is more appropriate to use for this scenario.

Hi.

Sorry to have taken a while to get back to you on this.

The plugin does not set how word wrapping is handled as this is the kind of design decision that should be handled by the theme itself for consistency.

However, you can easily add some custom CSS to change how words are wrapped from the settings page (Settings -> CC Child Pages).

Try adding the following CSS:

.ccchildpage,
.ccchildpage * {
	word-wrap: normal !important;
	-ms-word-break: normal !important;

	-webkit-hyphens: none !important;
	-moz-hyphens: none !important;
	hyphens: none !important;
}

Hopefully this should help … although I haven’t had time to test it myself yet, so please do let me know whether it works for you or not.

If you can post a link to the page where you have the problem, I can have a look to see if there is anything more specific that I can suggest.

Thank you for using CC Child Pages.

[ Signature moderated ]

Hi.

I’ve just uploaded a new version of the plugin which (hopefully) further improves integration with the Video Thumbnails plugin.

This should ensure that your thumbnails are not squashed up anymore.

[ Signature moderated ]