Changing skin colour

Please! I need your help! Is there any way of changing the backgroun colour, or delete it, leaving a border around?

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.

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!!

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??

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:

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

I hope that this helps.

The following CSS Tutorials might be of some help:

https://www.csstutorial.net/
https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-css
https://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: https://ccchildpages.ccplugins.co.uk/customising/

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

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!!

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 …