The Rebalance Theme by Automattic Customization: Modify the style, header, footer, menu, content section and more

the Rebalance Theme by Automattic 3 column theme

The Rebalance Theme by Automattic is a new 3 column theme. You can check the Rebalance theme demo here. Previously I shared Rowling theme Modifications which is a 2 column site. But I showed how to make it 3 columns too ( in the Rowling theme’s comments section).

So if you are searching to do blog in 3 column site you can check Rebalance theme or Rowling theme. Here I have shared the Rebalance theme modifications using which you give your Rebalance theme a new look.
You can use my shared code and ask question in the comments section.

Or can take my personal help.

1. If you want to change the site title’s color,font family

.site-title a {
color: darkred !important;
position: relative;
text-decoration: none;
font-size: 48px;
font-family: times new roman;
}

2. If you dont want to show social icons at the top use this code

.social-navigation {
display: none !important;
}

3. If you want to remove or reduce space at the top and bottom of the site title

.site-heading {

padding-top: 10px !important;
padding-bottom: 10px !important;
}

4. If you want to show the title center

.site-branding .site-title {
display: block !important;
text-align: center !important;
}

the Rebalance Theme by Automattic site title modification

5. If you want to change Site description font color, font size and font family

.site-description {
color: #000 !important;
font-family: “Libre Baskerville”, Georgia, serif !important;
font-size: 16px !important;
}

6. If you dont want to show site description

.site-description {
display:none !important;
}

7. If you want the Top Menu bar to be span in full width

.main-navigation {
width: 100%;
}

the Rebalance Theme by Automattic top menu and site description modification

8. If you want to change top navigation menu font color, font family and size

.main-navigation ul > li a {
color: darkred;
font-family: cursive;
font-size: 14px !important;
}

*** if you want to change the hover menu color
.main-navigation ul > li a {
color: blue !important;
}

9. If you want to change the drop down border color when u hover the menu with child
.menu-item-has-children .sub-menu, .menu-item-has-children .children {
background: #FFF;
border: 2px solid darkred !important;
}
li.menu-item-has-children:hover{
border-color: darkred !important;
}

10. If you want to change the Home page blog grid hover background color

#infinite-wrap .post:hover {
background: olive !important;
}

*** incase you need to change the content or text color while u change the hover background color use this

#infinite-wrap .post:hover * {
color: black !important;
}

the Rebalance Theme by Automattic homepage post modification

11. If you want to change the Home page blog posts title font color size and font family

.home .entry-title a {
color: darkred;
font-family: cursive;
font-size: 17px !important;
}

12. If you want to remove the tags showing at the bottom of homepage posts

.home .entry-meta {
display: none !important;
}

13. If you want to change the homepage posts footer tags color, size and font family

.home .entry-meta a {
color: #F35029;
display: inline-block;
font-family: cursive;
font-size: 17px !important;
}

14. To change homepage blog posts excerpt font-family, color and size

.home .card .entry-content {
font-size: 18px !important;
font-family: cursive !important;
color: darkred !important;
}

the Rebalance Theme by Automattic homepage post content modification

15. If you want to change homepage bottom “Older Post” button background color to

#infinite-handle button {
background: darkred !important;
color: white !important;
border-color: darkred !important;
}
*** if you want to change “Older Post” button hover background and font color use this code

#infinite-handle button:hover {
background: black !important;
border-color: black !important;
color: white !important;
}
the Rebalance Theme by Automattic older post button modification

16. If you don’t want to show Featured post section at the home page

#feature {
display: none !important;
}

17. In single post page if you want to make the single post title to be centered instead of right aligned

.single .hentry .entry-title {
margin-left: auto !important;
text-align: center !important;
}

18. If you don’t want to show the Prev and Next post navigation (post navigation) below the single post title
.single .navigation.post-navigation {
display: none;
}

19. If you don’t want to show the Post author, date , category (post meta) below the single post title use this code

.single .entry-meta {
display: none;
}

20. If you want to change the Entry Meta (category, date and author) font color, size and font family
.single .entry-meta a {
color: black !important;
font-size: 16px;
font-family: times new roman;
}
the Rebalance Theme by Automattic single post title modification

21. If you want to make the single post content to be full width

.single .hentry .entry-content {
float: right;
margin-bottom: 20px;
width: 100% !important;
float: none !important;
font-family: cursive;
color: black !important;
}
the Rebalance Theme by Automattic single post content modification

22. If you dont want to show Related Posts at the bottom of single post page
.single #jp-relatedposts {
display: none !important;
}


If you have any issue feel free to ask me question here in comments section

OR


Pay me some, I will help you for CSS Issue Personally CLICK HERE….

108 Responses to The Rebalance Theme by Automattic Customization: Modify the style, header, footer, menu, content section and more

  1. Hello there! Thank you for the useful tips. Could you please help me on how to make 4 columns in this theme? I want make it look like the original Imbalance 2 theme (https://theme.wordpress.com/retired/imbalance2/). So I’m changing fonts and everything. But I can’t find the code for # of columns in layout. Please help and give a hint.

    Like

  2. Up Guards and at 'em! says:

    I have found that the text and images are aligned to the right of the page of each post with this theme. Also that image captions are large and aligned to the left of the image. Is it possible to align the posts in the centre of the page? I’m very new to this so it could be something simple!

    Like

    • HI
      please share me your site URL to check
      Om

      Like

      • HI
        is that single post page you are talking about?
        please let me know
        Om

        Like

      • Up Guards and at 'em! says:

        The home page is fine, but when you click a thumbnail to view a post, the post is displayed aligned to the right. It is the same with all posts. I think it is because the captions are large and aligned to the left of each picture. If you have a quick look you should be able to see. thanks

        Liked by 1 person

      • Thanks
        you can try this

        *** to make the image caption to show below the image use this

        .post .wp-caption.aligncenter .wp-caption-text, .post .wp-caption.alignnone .wp-caption-text {
        margin: 0;
        position: relative !important;
        text-align: right;
        top: auto !important;
        right: auto !important;
        width: auto !important;
        text-align: center !important;
        margin-top: 12px;
        }

        *** to make the single post to show full width
        .single .hentry .entry-content {
        float: right;
        margin-bottom: 20px;
        width: auto !important;
        }

        To show the images centered ( which are makred Aligncenter)

        .aligncenter {
        margin-left: auto !important;
        margin-right: auto !important;
        }

        ** TO remove the top featured image border
        .single .post-hero-image {
        border: none !important;
        }

        please let me know if that works for you

        Om

        Like

  3. Up Guards and at 'em! says:

    Hi Om

    I’m an absolute novice when it comes to code so I’m not able to make the changes. I don’t want to take up any more of your time. I will keep trying

    Thanks!

    Like

  4. Hi Randy
    sorry for the late reply
    do u need help till?
    please let me know
    OM

    Like

  5. Is it possible to take out the Featured Image from the top of the actual post? I want to use Featured Images on the Home page, but for the box with it at the top of each post to not be there. Thank you so much!!

    Like

  6. Diego says:

    Hi,

    Thank you for sharing your knowledge.

    Is it possible to arrange the menu in more than 3 columns? (Like, for example, having 6 columns and no rows)

    Thank you in advance.

    Like

    • HI Diego
      share me the site url you are working
      i will check and let u know from home
      Om

      Like

      • Diego
        in that rebalance theme u r using.. u used one single menu? and it is showing in 3 column with rows?

        or u used 3 different menus?

        please let me know

        Om

        Like

      • Hi Om,

        I think I’m using 1 menu and 12 different links on it, and it automatically rearranges into those 3 columns.

        **

        Just to be clear, because I do not know if I totally understood what you asked me about having 1 or more menus.

        – When I get to the main customization page in wordpress manager, it shows me a list of different elements I can work with…

        Colors>
        Fonts>

        Menu>

        – When clicking on Menu, it shows me this:

        Menu 1>
        Menu 2>

        – When clicking on Menu 2, it shows me this:

        Entrada 2
        Entrada 3
        Entrada 4

        Entrada 13

        (If I click on one of those named as “Entrada #”, it lets me to change things such as Attributes, CSS, XFN, etc)

        **

        Thank you for your help.

        Like

      • Diego
        To make your Rebalance theme menu to show in a single line try to use this code
        .main-navigation ul > li {

        float: left !important;
        }
        .main-navigation div > ul {
        width: 33% !important;
        float: left !important;
        }
        .main-navigation {

        width: 100% !important;
        }

        PLease let me know if it works
        OM

        Like

  7. Hello,

    Many thanks for all your great tips.

    Is there any way to get rid of the black line on top?

    Also how can I align the menue in a single line and center it?

    Many thanks

    Valentina

    Like

    • HI Valentina
      to remove the black line from the header of rebalance theme try this

      .site-heading {
      display: none;
      }

      To show menus in a single line try this

      div.menu-main-menu-container ul.nav-menu {
      width: auto !important;
      max-width: auto !important;
      }
      ul.nav-menu li {
      float: left !important;
      }

      Regards
      Om

      Like

  8. Hello,

    one more and most important question – how can I space the three columns of the main menue, in order to align each of them with the three posts underneath?

    Many thanks

    Valentina

    Like

    • HI Valentina
      ok to align the menus in Rebalance theme try this
      .nav-menu.nav-menu-0 {
      margin-right: 10%;
      }
      .nav-menu.nav-menu-1 {
      width: 24% !important;
      margin-right: 9% !important;
      }

      .nav-menu.nav-menu-2 {
      width: 22% !important;
      }

      Regards
      Om

      Like

  9. Hello, many thanks. One mroe question: is there a way to move the social media menu at the bottom of the site?

    Many thanks

    Like

  10. Deborah Newell says:

    I just switched to this theme. I really like it, but for some reason the line at the bottom of the menu header has disappeared from My Blog page. How can I get this back or add it? The page is www,deborahnewell.com

    Like

  11. Deborah Newell says:

    Yes! Thank you!!!!!!!!!! It worked!

    Like

  12. Deborah Newell says:

    One other question….is there any way to make the body of the page just a bit wider? I guess I should say 4 columns instead of 3?

    Like

    • Hi Deborah,
      for Rebalance theme 4 column blog posts .. you can try this
      .blog .site-main {
      padding: 50px 1% !important;
      }
      .blog .card, .blog .grid-sizer {
      width: calc(24.58%);
      position: relative !important;
      float: left !important;
      top: auto !important;
      left: auto !important;
      height: 420px;
      }

      Like

  13. Deborah Newell says:

    You are so helpful! Thank you!

    Like

  14. Deborah Newell says:

    One last question….is there a way to set the number of posts on the blog page or does it stay at ten?

    Like

  15. Deborah Newell says:

    Thank you. Now I just noticed there are two lines at the bottom of my blog page that go into the categories…..Ahhhhh…! Help?

    Like

  16. Deborah Newell says:

    Hello, Om….I do have one more question. If you look on the main menu you will see several different categories I have added in there for the blogs. If you click on it you will see there is a title Category: xxxxx. Is there a way to make that title font a bit bigger?

    Like

  17. Deborah Newell says:

    It worked and it looks great! Thank you again!
    Deborah

    Like

  18. Hello,

    is there a way to have two menu per column, rather than three? Ideally I would like to have three columns with two menu each.

    Many thanks

    Valentina

    Like

    • HI Valentina
      there is a trick which i am thinking to solve your issue

      so..do the following

      1. Add the menu “Writing” again below the same “Writing” menu and i will check the rest
      please let me know

      Om

      Like

  19. Hello Om,

    Thank you so much for your answer. I think I’ll hold off on this as still defining the content of the blog.

    One more question please, is it possible to show the category underneath the title of each blog entry on the front page?

    Many thanks

    Valentina

    Like

  20. dorkistan says:

    Great theme!

    I’m trying to make the caption for a post’s featured image appear as other captions do. I managed to make the caption appear, but I can’t seem to get it styled.

    See here: http://www.dorkistan.com/the-questions-three-four/

    You’re awesome for answering questions like this!

    Like

    • Hi
      would u mind to try this code please?

      #featured-image-caption {
      margin: 0;
      position: relative;
      text-align: center !important;
      top: auto !important;
      right: auto !important;
      width: 100% !important;
      display: block;
      background: lightgrey;
      }
      .single .post-hero-image {
      margin-bottom: 8px;
      }

      let me know what you think
      Om

      Like

  21. Deborah Newell says:

    In the Rebalance theme and using the Portfolio Page Template, is there a way to rename the Page from Portfolio to something else? I’d like it to read Press/Events. If so, how? Thanks.

    Like

  22. lucindatee says:

    hi!! thankyou so much – I want to use code 21 as all of my blog posts are appearing on the left, but I don’t actually know where to add the code… Thank you!

    Like

  23. Hi,

    Your comments and code on rebalance have been very useful. Thanks for that! I am rather new to wordpress and I am facing issues with this theme. The top menu is not showing up on my site and neither is the site title. So is there anything that needs to be activated to make these two show up? Am looking forward to your tips on this. Could you please direct me on this? I am sending you a link of my site to your email for your reference. Thanks in advance!

    Like

  24. jprimav says:

    HI,
    thanks a lot for your post, extremely helpful.
    do you know how to do the following:
    1) remove all the stuff below my posts (“published by”, “view all posts by..”, “proudly powered by wordpress”)
    2) left-align the comment box
    thanks a lot!
    jacopo

    Like

    • Hi Jacopo
      to remove “Published by” and “View all posts” from the bottom of ur posts try this css code

      .entry-author {
      display:none !important;
      }

      For left alignment of comments box, try this code

      .comments-area {
      padding-left: 48px !important;
      }

      To remove proudly powered by wordpress..try this code

      .site-info {
      display: none !important;
      }

      ** these codes are based on ur mentioned site http://slow-data.com/torpignattara/

      please let me know if it helps
      Om

      Like

      • Jacopo says:

        Hi, it worked perfectly, thanks a lot.
        two more things:
        1) left-align the recent-post section appearing in the footer of each post?
        2) with CSS is it possible to change the default format of links (blue, underlined) to something else (e.g. blue, bold and no-underlined)
        thanks a million!
        jacopo

        Like

      • HI,
        for left align section try this code
        #secondary {
        float: left !important;
        width: 100% !important;
        }
        for link issue…
        .entry-content a, .comment-content a {
        color: darkred !important;
        text-decoration: none !important;
        font-weight: bold !important;
        }

        Om

        Like

  25. Joe Ruzzi says:

    Where do I find the custom CSS settings in the theme settings please?

    I’m trying to change the way my friends site looks, especially the primary menu so that it spans across the page and would also like to be able to edit the title, or have the title above the picture if that is possible.

    Cheers,
    Les

    Like

  26. jprimav says:

    Thank you so much, your answers are quick and correct: huge help!
    Do you know how to remove:
    1) the grey line appearing just below the titles of my posts?
    2) the black line below my home menu
    thanks a million,
    jacopo

    Like

    • HI Jacopo
      thanks
      Regarding the line appearing below the title

      ** if you are talking about the line which is showing when u put ur mouse cursor over the title..then try this code

      .home .entry-title a {
      border: none !important;
      }

      Regarding your 2nd issue
      ** sorry didnt understand which Home Menu u r referring?
      Om

      Like

      • jprimav says:

        Hi,

        I solved it. That grey line was still there because I used to have a featured image that I disabled. Adding you code

        ** TO remove the top featured image border
        .single .post-hero-image {
        border: none !important;
        }

        removed that ugly grey line 🙂

        thanks!
        jacopo

        Like

      • Thats great Jacopo 🙂

        OM

        Like

  27. jprimav says:

    Hi,

    I have a problem with captions. If you check this post of mine you will that captions for my images all render very bad, not below the image, but on the left where they can be only partially seen. Any idea what is going wrong?

    http://slow-data.com/associazioni-bipartisan-e-informali-tra-parlamentari-un-bene-o-un-male/

    Thanks a lot,
    Jacopo

    Like

  28. jprimav says:

    Hi,
    I was checking my website from mobile and noticed that the font is rather different.
    I guess this is an automatic formatting to fit mobiles better but sometimes is quite ugly.
    do you know how to manage that?
    Thanks,
    Jacopo

    Like

  29. jprimav says:

    Hi,

    I like the automatic format of the front page with blog posts feauterd images and exerpts. Is it possible to replicate this layout for a portfolio? I want to add a portfolio link to the menu so that it will look like the front page, but with portfolio’s projetcs instead of blog posts.

    Now I have this
    http://slow-data.com/
    and this
    http://slow-data.com/portfolio/

    Thanks,
    Jacopo

    Like

  30. snootyjudy says:

    thank you for this i used several of your codes and they worked perfectly!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: