WordPress Tricks

WordPress Theme: Bold Life by Jay Hafling CSS Style sheet Modification: Modify header,footer,fonts,sidebar and more using css

Theme  Bold Life by Jay Hafling

Today I will try to share you some more basic css editing of Bold Life theme by Jay Hafling It is another newly released wordpress.com theme and I hope you will also like it… Those who have css editing capability (for wordpress.org) or Custom design purchased from wordpress.com they will be able to use and try these following code.
Please do comments if you have faced any problem implementing this.

1. Remove space from top of the menu of Bold Life theme
#wrap {
margin-top: 8px;
}

2. Increase or decrease space between menus and Header Site Title of Bold Life by Jay Hafling

#nav, div.menu {
margin-bottom: 16px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}

3. If you want to change your site title’s font size and font family of theme Bold Life

h1.logo {
font-family: tahoma;
font-size: 67px;
line-height: 72px;
margin-bottom: 0;
margin-left: 140px;
margin-right: 0;
margin-top: 0;
padding-right: 120px;
}

4. If you want to change site title font color

h1.logo a, h1.logo a:visited, h1.logo a:hover {
color: green;
text-decoration: none;
}

5. If you want to left align your site title of Bold Life theme

h1.logo {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-right:0;
}

6. If you want to change site Description font color,font size and font family

h3.description {
color: blue;
font-family: cursive;
font-size: 20px;
font-style: italic;
}

7. If you want to change sticky post background color of Bold Life theme

.sticky .entry-inner {
background-color: lime;
background-image: none;
}

8. If you want to change blog post title font size,font family and color of theme Bold Life

h2.post-title a {
color: #292929;
font-family: times New Roman;
font-size: 1.2em;
text-decoration: none;
}

9. If you want to change Blog Post’s date font, font size,color of Bold Life by Jay Hafling

.post-date a {
color: red;
font-family: times New Roman;
font-size: 26px;
text-decoration: none;
}
.post-date span {
color: red;
display: block;
font-family: Georgia,”Times New Roman”,Times,serif;
font-size: 72px;
line-height: 72px;
margin: 0 auto;
text-align: center;
}

10. If you want to change right sidebar Widget’s title font size, font color and font family

#sidebar h2, #sidebar h3 {
color: green;
font-family: times New Roman;
font-size: 32px;
line-height: 48px;
margin: 0;
padding: 0;
}

11. If you want to change right sidebar’s widgets link color,font family and font size

div#sidebar li a {
color: blue;
font-family: times New Roman;
font-size: 15px;
}

12. If you want to change right sidebar’s widget’s link hover (mouse over) font color,font family and font size

div#sidebar li a:hover {
color: blue;
font-family: times New Roman;
font-size: 15px;
}

13. If you want to remove menus from the top
#nav, div.menu {
clear: both;
display: none;
}

14. If you want to change Navigation menus hover (mouse over) font color,font family,font size

#nav li:hover > a,
#nav ul ul:hover > a,
#nav a:focus,
div.menu li:hover > a,
div.menu ul ul:hover > a,
div.menu a:focus{color:#da0a0a;}

15. If you want to change sub menus hover background color

#nav ul ul li:hover > a,
#nav ul ul:hover > a,
#nav ul ul a:focus,
div.menu ul ul li:hover > a,
div.menu ul ul:hover > a,
div.menu ul ul a:focus{background:#e1debc;}

16. If you want to remove or hide Site Title, site description from the top

h1.logo {
display: none;
}
h3.description {
display: none;
}

17. If you dont want to show Posted In and tags in Home Page

.home .post-meta {
display: none;
}

18. If you want to change blog post title’s hover color

div.entry-inner h2.post-title a:hover {
color: blue;
}

19. If you want to change Home Page blog post’s background color

.entry-inner {
background: url(“images/content.jpg”) repeat scroll left top transparent;
border: 1px solid #F0EFE4;
padding: 22px 24px;
}

20.If you want to change Home Page’s blog posts font size, font type

.entry-inner {
font-family: times New Roman;
font-size: 17px;
padding: 22px 24px;
text-align: justify;
}

21. If you want to remove Post date (left side one) from the post

.post-date-wrapper {
display: none;

}

22. If you want to increase the Post section width by removing Post Date

.post-date-wrapper {
display: none;

}
.entry-wrapper, .wide-entry-wrapper, .page-entry-wrapper {
float: left;
margin-right: 0;
width: 710px;
}

23. If you want to change Comments Title’s Font color, size and font family

#comments-title{
clear: both;
color: red;
font-family: tahoma;
font-size: 24px;
line-height: 24px;
position: relative;
}

24. If you want to change Comment’s color, font size and font family

ol.commentlist, ol.commentlist li.comment, ol.commentlist li.pingback {
color: blue;
font-family: tahoma;
font-size: 18px;
}

25. If you want to change individual post’s meta tag

.post-meta {
display: none;
}

26. If you want to change individual Post title’s background color

h2.post-title {
background-color: yellow;

}

You can take my personal help in skype : om2000_cuet

16 thoughts on “WordPress Theme: Bold Life by Jay Hafling CSS Style sheet Modification: Modify header,footer,fonts,sidebar and more using css”

  1. I love this theme but the important “category” section is falling off the right side of the page. Is there any way to justify the contents left rather than center. – or move the right sidebar to the left.
    Tried deleting post date (#21 and 22) without achieving this effect.

    Any fix?
    Thank you

    Like

      1. Hi francinerose

        Would u mind to try the following code.. and let me know it is Ok or not..

        Aso.. would u mind to check there is any option or built in page template in Bold life theme to show sidebar in the left? though i have given u code..if u dont get it..try my code..

        /*** To make ur contents left aligned ****/
        .entry-inner {
        background: url(“images/content.jpg”) repeat scroll left top transparent;
        border: 1px solid #F0EFE4;
        padding: 22px 9px;
        }
        ul, ol {
        margin: 0 24px 24px 0;
        padding-left: 13px;
        }

        /*** Sidebar Left Content section Right***/

        .post-wrapper {
        float: right;
        margin-right: 10px;
        width: 710px;
        }

        Regards
        Om

        Like

  2. Thx that moved the sidebar to the left, but it removed the white “wallpaper” from the page section (was white now yellow like the background)
    Can I get white back in posts/pages?
    Also< i removed the post dates (#21), which moved the page closer to the sidebar in posts but not in pages.
    Sorry no left sidebar option in theme that I can find. Thanks again!

    Like

  3. Hi, is it possible to implement a header picture in the wordpress.org theme like it is possible in the wordpress.com version?

    Like

Leave a comment