Customise Illdy without losing your mind.

I was a total WordPress novice when I decided to make the leap and switch this site over from Weebly to WordPress. Honestly, I had no idea what I was doing, and fumbled around until I found a theme I loved – Illdy.

It was free, which was amazing, as it gave me the best-looking website I’d ever owned; but of course there were some things that I needed to tweak as I grew more confident with code.

Here are some of the css code snippets I’ve used to customise Illdy for my website.

Adapting to Illdy updates

I’ve dreaded each update to the Illdy theme, because there’s always some major change to cope with. This means there’s new codes and changes to add to this post, so bear with me as I add them soon. And yes, I actually created a child theme for Illdy to prevent the changes, but somehow I couldn’t get my child theme to respond fully to all the changes I’d made… so I had to stick to the developer’s theme.

 

But then, the last update made my site look horrendous, and I went running back to my child theme. It’s meant that some of my links won’t change to the right colour, but I’m trying to work on more important things at the moment… in the grand scheme of things, a few yellow hover links don’t make a difference.

Hey, I’m still a novice; I just do my  best.

The CSS codes to change Illdy, and what they do.

Change colour of links

.markup-format a {
    color: red;
}

Remove link underline

.markup-format a {
 text-decoration: none;
}

Remove yellow dots from jumbotron

#header .bottom-header span.span-dot {
display: none;
}

Change contact form background colour

#contact-us {
background-color: #ffffff 
!important;
}

Change contact form name, email and subject background and border colours

 
#contact-us .section-content .wpcf7-form p .wpcf7-text {
background-color: #ffffff;border: 1px solid #baa9a9;
}

Change contact form message box background and border colours

#contact-us .section-content .wpcf7-form textarea {
background: #ffffff !important;border: 1px solid #baa9a9;
}



Change colour of the first jumbotron button

#header .bottom-header .header-button-one{    
line-height: 63px;    background: #e83904;    border: none;
}

Change hover colour of the first jumbotron button

#header .bottom-header .header-button-one:hover{    
background: #1a2226
}

Change colour of the second jumbotron button

#header .bottom-header .header-button-two {    
background: #1a2226;
}

Change hover colour of the second jumbotron button

#header .bottom-header .header-button-two:hover {    
background: #e83904;
}

Change colour of widget lines

.widget .widget-title:before {
background-color: #e83904;
}

Change hover colour of social share widget

.widget ul li:before {
color: #e83904;
}

Change colour of “read more” link under blog preview

#latest-news .section-content .post .post-button {
color: #e83904;
}

Change colour of “read blog” button

#latest-news .latest-news-button {    
background: #e83904;
}

Change colour of “read more” button on blog page

#blog .blog-post .blog-post-button { background-color: #e83904 !important; }

Change colour of author icon on blog post

#blog .blog-post .blog-post-meta .post-meta-author .fa {    
color: #e83904;
}

Change colour of author text on blog post

#blog .blog-post .blog-post-meta .post-meta-author {    
color: #888;
}

Change colour of date published icon on blog post

#blog .blog-post .blog-post-meta .post-meta-time .fa, #blog .blog-post .blog-post-meta .post-meta-categories .fa {    
color: #e83904;
}

Change colour of comments icon on blog post

#blog .blog-post .blog-post-meta .post-meta-comments .fa {    
color: #e83904;
}



Remove/change padding on home page

body.home.page section.content-area {    
padding-top: 0;
}
body.home.page section.content-area {    
padding-bottom: 0;
}
body.page .post-inner-content {    
padding-bottom: 0;
}
body.page .post-inner-content {    
padding-top: 0;
}

Remove/change padding on about section

#about, #static-page-content {     
padding: 10px 0 0px 0;
}

Remove/change padding on latest news/blog section

#latest-news, #static-page-content { 
padding: 0px 0 0px 0; 
}

Remove/change padding on contact us section

#contact-us, #static-page-content { 
padding: 0px 0 0px 1; 
}

Remove title from blog titles and page titles

#header .bottom-header h1 {
display:none;
}

Change display size for mobile devices

@media only screen and (max-width: 768px) {
#header {
background-attachment: initial !important;
}
}
@media only screen and (max-width: 480px){
#header .bottom-header h2 { 
font-size: 30px; line-height: 1.2; 
}
.top-header img { 
width: 250px; 
}
#header .bottom-header { 
padding-top: 50px; padding-bottom: 50px; 
}
}

Hide date published

.blog-post .blog-post-meta .post-meta-time { 
display: none;
}

Hide author

.blog-post .blog-post-meta .post-meta-author { 
display: none;
}

Hide comments

.blog-post .blog-post-meta .post-meta-comments { 
display: none;
}



Change Mailchimp subscribe button text colour

input#mc-embedded-subscribe.button { 
color: #ffffff 
}

Change Mailchimp subscribe button colour

input#mc-embedded-subscribe.button { 
background: #e83904;
}

Change contact form submit button text colour

input.wpcf7-form-control.wpcf7-submit  { 
color: #ffffff 
}

Change contact form submit button colour

input.wpcf7-form-control.wpcf7-submit { 
background: #e83904;
}

Change widget text colour

.widget a {
    color: #e83904;
}

Remove page titles

#blog .blog-post .blog-post-title { display: none;
}

The end.

So there you have it – all the codes I’ve used to change aspects of this WordPress theme. I hope it’s been of some use to you, and if there are any codes that don’t work as they should, let me know… and remember, I’m an artist, not a web developer. This is just my hobby 🙂

 Reading suggestions


If you’ve found this post useful, why not share some love by liking my Facebook page here? Thanks a bunch!

Like it? Share it.Pin on PinterestShare on FacebookShare on Google+Tweet about this on TwitterShare on StumbleUpon

12 thoughts to “How To Customise Colorlib’s Illdy WordPress Theme

  • ebee

    Hi. I’ve found you Illdy post invaluable! so thank you. I was wondering if you could help me out a little. I’ve setup and customised the Illdy template however, I cannot seem to change the blog sidebar widgets from grey to black. I copied, pasted and altered the code you provide above, however nothing happened. I’m using the “recent posts”, “search” and “text” widgets. Do you have any suggestions?
    Thank you!

    Reply
    • Lee

      Hey there, I’ve used this to change the colour:

      .widget a {
      color: #000000;
      }

      I’ll add it to the post as well 🙂

      Reply
      • ebee

        Thanks so much! I’ll try it out. 🙂

        Reply
  • seekinganswers

    Thanks for posting this, and thanks to you I was able to remove the date and author on blog posts. The other problem I’m having and not listed, is how to remove the page titles like HOME and so forth. I’ve searched through numerous colorlib forums on the css code to add, but none of it has worked,

    Reply
    • Lee

      I’ve just done it this way: #blog .blog-post .blog-post-title { display: none;
      }

      Try it and let me know if it works, I’ll add it to the post 🙂

      Reply
  • seekinganswers

    Thanks for the speedy reply. Unfortunately the code did not remove the page titles. If you have any more suggestions please let me know.

    Reply
  • agelinogruniona

    hi, wich the file we have to change? where are the css of illdy? and where can i change the size of h1, title of the front page? thanxs!

    Reply
    • Lee

      The CSS settings can be accessed through going to your WordPress admin panel, then scrolling down to “Appearance”, then selecting “Edit CSS”. You should be able to find those header settings in the typography section of the “Customise” section (under “Appearance”).

      Reply
  • recruitc

    Hi,

    I just went through your post and really appreciate all the codes for this.
    Can I ask you one more question that I didn’t see covered in your blog.

    It’s about the header for additional pages.
    I have uploaded an image that somehow doesn’t show properly on the page.
    It’s not interactive.

    And there is a title on each page that I’d like to delete but when I do, the title on the main page is gone as well.

    Do you have any idea what I can do to change that?

    Thank you so much for responding in advance.

    Reply
    • Lee

      Hi there, I had a quick look and I must admit that I’m a bit stumped by your title problem. I’ve taken the titles away on my pages using the codes in the post, but it hasn’t affected the front page. All I can suggest is to copy all your css into a text editor, start from scratch and re-introduce the code that’s likely to work and see what it affects – that’s how I tackle a problem. The header image seems to be a recurring problem for lots of people but Colorlib have a few threads dedicated to it on their support forum. Sorry I can’t help with that!

      Reply
  • fatfree

    Hi thanks for the codes, i wish you could also add some codes to change background colours on pages. Thank you once more

    Reply
  • jenniferjaeger123

    Hi, I tried using your code, but it’s not working the way I hoped! I’m trying to remove dead space between the logo and the content. Not sure what to do and my site isn’t live. I do have a screenshot.

    Reply

Leave your thoughts!