30 Custom CSS to Customize Genesis Child Theme

Genesis Framework is a wonderful theme. If you have basic knowledge of CSS and PHP, you can indeed make your Genesis child theme as one of the themes which many bloggers would crave to own the moment they visit your blog.


30 Custom CSS to Customize Genesis Child Theme


In this tutorial, we’ll learn to customise the physical appearances of the theme by using various Custom CSS. There is indeed not much to be done from your end. It’s just a matter of adding Custom CSS in accordance with their uses and your requirement.


This can be a beginner’s guide in customizing Genesis Framework Theme or Genesis Sample Theme adding Custom CSS. But be reminded that all the Custom CSS I am going to share with you must be added to Custom CSS.


#1 Add color Background to the Primary Menu

 

.nav-primary {
background-color: #3f485d;
}


Note: Click Here to select other background colors to suit your blog.


#2 Change font color of the Primary Menu items

 

.nav-primary a {
color: #3f485d;
}


Note: Click Here to select other font colors to suit your blog.


#3 Change background of menu on cursor hover

 

.nav-primary a:hover {
background-color: #3f485d;
}

Note: Click Here to select other background colors to suit your blog.


#4 Change font colour of menu on cursor hover

 

.nav-primary a:hover {
color: #3f485d;
}


Note: Click Here to select other colors to suit your blog.


#5 Remove underlining of menu on cursor Hover

 

.nav-primary a:hover {
text-decoration: none;
}


Note: text-decoration: none; removes text decoration.


#6 Hide display of tags given below every blog post

 

.entry-tags {
display:none;
}


#7 Hide Display of categories given below every post

 

.entry-categories {
display:none;
}


#8 Hide both tags & Categories displayed below post

 

.entry-categories, .entry-tags {
display:none;
}

#9 Underline ‘Read More’/‘continue reading’ link

 

.entry-content a.more-link {
text-decoration: underline;
}

#10 Remove underlining of hyperlinked sentences

 

a {
text-decoration: none;
}


Note: This will remove underlining of popular post, author link etc.


#11 Reduce unwanted space within two sidebar widgets

 

.widget-area .widget {
margin-bottom: 0rem;
}


Note: Change margin-bottom value to maintain minimum space.


#12 Change the default font size of blog post title

 

.entry-title { font-size: 28px;
}

Note: Change font-size value according to your need.


#13 Change font color of sidebar widget titles

 

.widget-title {
color: #FFFFFF;
}


Note: Click Here to choose other font colors that suit you.


#14 Add color background to sidebar widget titles

 

.widget-title {
background-color: #192439!important;
width: 100px;
height: 40px;
}


Note: Change suitable back-ground colors, width & height values.


#15 Change the default font size of menu items

 

.menu-primary a {
font-size: 30px;
}


Note: Change font-size value to suit your blog designs.


#16 Change the font color of visited menu items

 

.nav-primary .current-menu-item > a {
color: #8d2f1e;
}

Note: Click Here to change other font colors to suit your blog.


#17 Disable the feature of underling visited menu

 

.nav-primary .current-menu-item > a {
text-decoration: none;
}

Note: Text-decoration: underline; will underline menu.


#18 Change background color of the visited menu

 

.nav-primary .current-menu-item > a {
background-color: #3f485d;
}


Note: Click Here to change back-ground to other colors.


#19 Change the letter spacing among post title fonts

 

.entry-title {
line-height: 5;
}



Note: Change line-height value that is suitable to your blog.


#20 Disable display of post/page titles in entire blog

 

.entry-title {
display:none;
}


#21 Justify align Post excerpt on blog’s Home page

 

.home .entry-content {
text-align: justify;
}


Note: It’s left-aligned by default. Don’t add if you want left-align.


#22 Right align ‘read more’ or ‘continue reading’ link

 

.entry-content .more-link {
float: right;
}



Note: You can also change right into center. Left is default.


#23 Center align the primary navigation menu

 

.nav-primary{
text-align:center;
}


Note: You can also change center into right. Left is default.


#24 Right align the primary navigation menu

 
.nav-primary{
text-align:left;
}


Note: You can also change left into right or center. Left is default.


#25 Right align Header Menu/custom menu

 
.site-header .widget-area {
width: 600px;
}
.widget_nav_menu {
float: right;
}


 

#26 Hide underlining of header menu on hover




.site-header a:hover {
text-decoration: none;
}


 

#27 Change font colour of header menu on hover




.site-header a:hover {
color: #3a3869;
}


 

Note: Click Here to change font colour into others.


#28 Disable underlining of visited header menu




.site-header .current-menu-item > a {
text-decoration: none;
}


#29 Add background to header menu items on hover




.site-header a:hover {
color: white;
background-color: #474754;
}


 

Note: Color: white; is for font color and next is background color.


#30 Add background to header menu/custom menu




.site-header {
background-color: #3f485d;
}


 

Note: Click Here to change background colour to others.


Conclusion

On the top of adding those custom CSS and then changing appearances of your Genesis Child theme, you can take this customisation works one step farther by adding and activating some of the following plugins:

  • Genesis Simple Edits.
  • Genesis Simple Hooks.
  • Genesis Simple Menu.
  • Genesis Featured Image.

There are also other plugins that are made to ease Genesis Theme customization works. You can also read my tutorial on how to Display Featured Images in Genesis Child theme. You can also browse other resources related to Genesis Child Theme customization from Studiopress.

Comments
No comments
Post a Comment