Title: Changing skin colour
Last modified: August 30, 2016

---

# Changing skin colour

 *  Resolved [CM Cicerone](https://wordpress.org/support/users/cm-cicerone/)
 * (@cm-cicerone)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-skin-colour/)
 * Thank you very much for your useful and easy-to-use plugin! I don’t know many
   things about CSS styling and I do not have idea of how to customise. I would 
   need to change the colour of the background to another green, (the theme green,#
   289400), the title colour to white, and also (if possible) “Read more” in white
   letters under green background for some other pages. How can I do it?
    I would
   really appreciate your help!! Many thanks!! (test.ciceronegranada.com)
 * [https://wordpress.org/plugins/cc-child-pages/](https://wordpress.org/plugins/cc-child-pages/)

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

 *  Thread Starter [CM Cicerone](https://wordpress.org/support/users/cm-cicerone/)
 * (@cm-cicerone)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-skin-colour/#post-6240280)
 * Please! I need your help! Is there any way of changing the backgroun colour, 
   or delete it, leaving a border around?
 *  Plugin Author [caterhamcomputing](https://wordpress.org/support/users/caterhamcomputing/)
 * (@caterhamcomputing)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-skin-colour/#post-6240294)
 * 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.
 *  Thread Starter [CM Cicerone](https://wordpress.org/support/users/cm-cicerone/)
 * (@cm-cicerone)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-skin-colour/#post-6240316)
 * So, how could I change the colour of the title? Would this be ok?
    .myclass-ccchildpages.
   ccchildpage { h3: #289400; } p.ccpages_more { background: white; color: #289400;}
   OR this?
 * .myclass-ccchildpages .ccchildpage {
    h3: #white; background: #289400; }
 * THnka your ver much!!
 *  Thread Starter [CM Cicerone](https://wordpress.org/support/users/cm-cicerone/)
 * (@cm-cicerone)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-skin-colour/#post-6240318)
 * Never mind. I solved it with your my_link_title_class code. Just one question
   more, before marking solved. How do I get the hover in the title?
    I’ve tried
   several options but none of them worked:
 * .my_link_title_class .my_link_title_class {
    color: #289400; hover: #144A00; }/////
 * .my_link_title_class .my_link_title_class :hover{
    color: #144A00; }
 * Any other??
 *  Plugin Author [caterhamcomputing](https://wordpress.org/support/users/caterhamcomputing/)
 * (@caterhamcomputing)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-skin-colour/#post-6240332)
 * 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/css/css_link.asp)
   
   [http://www.w3schools.com/cssref/sel_hover.asp](http://www.w3schools.com/cssref/sel_hover.asp)
   [http://www.w3schools.com/css/css_pseudo_classes.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/](http://www.csstutorial.net/)
    [https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-css](https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-css)
   [http://www.w3schools.com/css/css_intro.asp](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/](http://ccchildpages.ccplugins.co.uk/customising/)
 *  Plugin Author [caterhamcomputing](https://wordpress.org/support/users/caterhamcomputing/)
 * (@caterhamcomputing)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/changing-skin-colour/#post-6240351)
 * Hi.
 * I hope that the information I supplied was of some help in styling your pages.
 * As I haven’t heard back from you, I am marking this topic as resolved. However,
   if you still have problems do not hesitate to get in touch.
 * Kind regards
 * Tim Lomas
 *  Thread Starter [CM Cicerone](https://wordpress.org/support/users/cm-cicerone/)
 * (@cm-cicerone)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/changing-skin-colour/#post-6240384)
 * Thank you very much for all you valuable answeres. They really help, but I have
   two questions more now. I’de hada a look to the links you sent me, but still 
   need your help.
 * Is there any way to change the size of the title in an specific page, but not
   in all the rest?
 * And seconnd, I’ve tried to get white color for the fonts in the Read more link.
   I used this code, and everythink worked except from the font color… What did 
   I wrong? How can I do it. (Also tried with !important, but din’t work either)
 * .ccpages_more {
    border: 1px solid #289400; border-radius: 9px; padding: 5px;
   float: right; color: #ffffff; background-color: #289400; }
 * THanks a lot!! you do a great job!!
 *  Plugin Author [caterhamcomputing](https://wordpress.org/support/users/caterhamcomputing/)
 * (@caterhamcomputing)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/changing-skin-colour/#post-6240385)
 * The plugin wraps the details for each child page in various classes – including
   one that includes the ID of the page, for example if the ID of the page was 17
   you could CSS such as:
 *     ```
       .ccpage-id-17 h3 {
           font-size: 24pt;
           color: #ff66ff;
       }
       ```
   
 * (You may need to add `!important` to the CSS for this class to stop other definitions
   from over-riding them.)
 * To change the colour of the “Read more” text, you would need to apply the CSS
   to the link itself:
 *     ```
       .ccpages_more a {
           color: #ffffff;
           background-color: #289400;
           ....
       }
       ```
   
 * Again, you may or may not need to add `!important` …

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

The topic ‘Changing skin colour’ is closed to new replies.

 * ![](https://ps.w.org/cc-child-pages/assets/icon-256x256.png?rev=3451096)
 * [CC Child Pages](https://wordpress.org/plugins/cc-child-pages/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/cc-child-pages/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/cc-child-pages/)
 * [Active Topics](https://wordpress.org/support/plugin/cc-child-pages/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/cc-child-pages/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/cc-child-pages/reviews/)

## Tags

 * [colours](https://wordpress.org/support/topic-tag/colours/)

 * 8 replies
 * 2 participants
 * Last reply from: [caterhamcomputing](https://wordpress.org/support/users/caterhamcomputing/)
 * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/changing-skin-colour/#post-6240385)
 * Status: resolved