This post contains affiliate links, marked by an *

Customise Illdy without losing your mind.

Need a domain? Get a .design, .ink or .wiki domain for $5!*

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;
}

Like this post? Check out the resources I use for creating and managing my websites!

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 remember, I’m an artist, not a web developer. This is just my hobby 🙂

Subscribe to my newsletter below for more tips on DIY marketing and web management for creatives!

 Reading suggestions