CSS Format Issues

  • Resolved jim_cliff11

    (@jim_cliff11)


    11 years, 1 month ago

    I’m trying to format the display of the child page listing using the existing CSS stylesheet and the following shortcode:

    [child_pages id="36" cols="3" more="View Products" link_titles="true" thumbs="true" link_thumbs="true" thumbs="small" words="15" skin="green" hide_excerpt="true"]

    I’ve managed to adjust the colour scheme by editing the green skin code in the CSS, however I’m struggling with the following:

    1. How do I specify the font size and strength for the title, excerpt and more information link separately?

    2. Sub page titles with multiple words are not wrapping. Instead the word is broken up between two lines which doesn’t look ideal.

    You can see the page at:
    http://www.astburymowers.co.uk/?page_id=36

    I appreciate your help in advance.
    This plugin is spot on for what I’m trying to achieve through my site. Absolutely excellent work!

    https://wordpress.org/plugins/cc-child-pages/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author caterhamcomputing

    (@caterhamcomputing)

    11 years, 1 month ago

    Hi. Glad that you are finding the plugin useful.

    To answer the 2 points you raise:

    1. You can specify CSS for individual elements as follows:

    Title:

    .ccchildpage h3 {
    ...
}

    Excerpt:

    .ccpages_excerpt {
    ...
}

    More link:

    .ccpages_more {
    ...
}

    2. Looking at the code for your page, it looks as if the shortcode is surrounding by <pre></pre> tags … this may have happened if you copied the shortcode from a web page and pasted it into the Visual Editor – it is safer to paste into the Text mode.

    The <pre> tag is almost certainly causing the wrapping problems that you mention.

    Thread Starter jim_cliff11

    (@jim_cliff11)

    11 years, 1 month ago

    Awesome!

    You are a legend my friend.
    Both of your solutions were correct. I got rather into the CSS and made a few more alterations.

    Excellent plugin 10/10.

    Thanks again

    Plugin Author caterhamcomputing

    (@caterhamcomputing)

    11 years, 1 month ago

    Glad that sorted your issues. The site is looking good.

    One final point:

    You mention that you edited the green skin CSS code … if you mean this literally, please be aware that the CSS file will get overwritten when the plugin is updated. The best way to apply custom CSS is via your theme (if it provides a way to do this from the dashboard) or using a plugin such as Simple Custom CSS (https://wordpress.org/plugins/simple-custom-css/) or WP Add Custom CSS (https://wordpress.org/plugins/wp-add-custom-css/).

    It is on my to-do list to provide a way of entering Custom CSS to the plugin.

    When adding custom CSS, you may find that you need to increase the priority of your changes in order for them to be picked up … you can do so by adding !important to your CSS code. For example:

    .ccchildpage h3 {
    color: red !important;
}

    I would suggest only adding !important in circumstances where the standard declaration is not effective.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS Format Issues’ is closed to new replies.