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).

Here I have shared the Rebalance theme modifications using which you give your Rebalance theme a new look.

Download Rebalance theme by Automattic.

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

23 . To change “Proudly powered by WordPress Theme …”  and to use your own copyright, company info and year

Answer: Go to dashboard, then Appearance > Editor (theme editor). Follow the screenshot below ( you have to edit the red bordered area)

Proudly powered by WordPress theme edit and use your own copyright and company info
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….

228 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

      • Alison Naturale says:

        Hi,

        I only have access to editing the CSS, but I was trying this 4 column solution you gave here. I have it set to show the full post, so is there a way to have the posts flow together like the normal Imbalance theme, as opposed to having a set height?

        And do you know the CSS to crop the featured image to a certain dimension? I was looking around but haven’t found it yet.

        Thank you!!!!

        Like

      • Hi Alison
        please share me your site URL to check
        Om

        Like

      • Hi,

        Thanks for the reply! My site is: https://alisonstest.wordpress.com/ (just placeholder content for now while I figure this out).

        My question was if the 4 col layout you suggested could flow tog instead of having a set height, since I want to show the whole post on each page. Not sure if this can be done with just CSS, but thought I would ask…

        The second question (and maybe more feasible!) would be if there is a way to set it to crop the featured images to all display at the same height on the home page. I can set the img height in the CSS, but it just scales it as opposed to cropping it, and I would still like them to appear full size on the post page if possible.

        Thanks!

        Like

      • Hi Alison
        your site is not showing ( private mode activated)

        Om

        Like

      • alisonnaturale says:

        My apologies, I just changed the setting. Thanks for taking a look!

        Like

      • to show full post,
        would you mind to check Appearance > Customize > Content Option> Blog display –Full post

        let me know if it helps

        Om

        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

  31. Good day, I use the Rebalance theme and have tried to instal a plugin to create a slider where my current front page picture features … failed to do so however, maybe the theme does not support that change?

    Like

  32. I guess I need to have someone sit down with me on my laptop with greater competence than I have to accomplish that … Thanks for your help!

    Like

  33. Bhavana says:

    Hi! Thanks for sharing all these tips. I’m using rebalance theme personal .

    1- I want to know can we add like/ comment counter below post excerpt on home page.

    2-What will be the changes in website if I upgrade to premium ?

    Like

  34. deathinavo says:

    Hi there, I’m having a problem with the alignment of my wordpress using rebalance theme (deathinavo.wordpress.com). If you look at the individual blogs its off centre, skewed to the right on “desktop” but on mobile and tablet apps is fine. How do i change this?

    Like

  35. bruns says:

    Hello. Do you have this REBALANCE THEME avaliable fot BLOGGER/BLOGSPOT? PLEASE SAY YES

    Like

  36. Hi! Is there a way to put the Prev/Next button at the bottom of your single post while still removing it from above?

    Like

  37. Kim Z. says:

    Hi! Thank you so much for this. I am currently using the Rebalance theme but it’s not customizable since I am using .com and not .org. Bookmarking this post for my future reference once I migrate to .org. 😀

    Like

  38. Marina says:

    Hi, Thanks for helping out! All your codes were so helpful, but I have one Problem, which I couldn’t solve yet. I want to show the Post author, date , category (post meta) below the single post title on the left side (not centered). I tried it with

    .single .entry-meta {
    text-align: left !important;
    }

    but it didn’t work.

    Like

  39. alisonnaturale says:

    Yeah, that is checked and the full posts are coming up, I was just wondering if there was a way to make your 4 col solution that didn’t have a fixed height, since they are all different lengths. But if that’s too complicated to do w just CSS, don’t worry about it.

    I would like to know if you have any tips on cropping the featured images to the same size using CSS, if you have a minute!

    Like

    • HI
      as you are using wordpress.com, so only css can be used (except business plan)
      and only using css the image height can be changed..but that will not look good… images will be squeezed…
      so that will not be a good idea as i know

      Like

  40. alisonnaturale says:

    OK thanks! Just thought I’d ask.

    Like

  41. madalinabaroncea2019presedinte says:

    Hi, I have a Free plan and I want to make changes in css. It’s possible?

    Like

  42. staceyfer says:

    hi 🙂 could anyone let me know how to change the hover colour on the title and menu buttons? Its currently set to red! thank you 🙂

    Like

  43. eikofuck says:

    .site-heading {
    display: none;
    }

    removes the line plus title.
    i would like to remove the lines only.

    Like

  44. eikofuck says:

    could you help me with the rest of the line too?

    Like

    • ok
      to remove lines in the post

      header.entry-header {
      border: none !important;
      }

      to remove line in the footer

      .site-footer {
      border: none !important;
      }

      let me know if it helps

      Om

      Like

      • Hi, I’ve been trying to remove lines from post and the footer, but it’s not working… would you help?

        Many thanks!

        Like

      • HI Valentina
        would you mind to tell which lines you are referring?
        please let me know
        Om

        Like

      • Hi, thanks for your message. They are the black lines in the header when you open a post, and in the footer both when on homepage and in theist, hope it make sense

        thanks

        Like

      • Hi Valentina
        to remove footer Next Previous border and gap

        nav.navigation.post-navigation {
        border: none !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        }

        *** To reduce gap and border in Footer author
        div.entry-author.author-avatar-show {
        border: none !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        }
        ** To reduce gap in footer comments and remove border
        #comments {

        border: none !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;

        }
        ** To remove border in footer
        #colophon {

        border: none !important;

        }
        #secondary {

        border: none !important;

        }

        To Remove border from top and to reduce gap

        #main {

        border: none !important;
        padding-top: 0px !important;

        }

        hope that will help
        Om

        Liked by 1 person

      • Thanks so much! That’s super useful!

        Like

      • Sorry one more questions, how can I get rid of both lines in the other pages?

        Many thanks!

        Like

      • sorry, which pages you are referring?

        Like

      • The other pages (not posts), Residency and About
        and the category: Art, Crafts etc

        Thanks

        Like

      • For Pages, to reduce top gap and removing border
        .page article {
        padding-top: 0px !important;
        border: none !important;
        }

        For your category page, try this

        .archive .page-header {
        border: none !important;
        padding-top: 0px !important;
        }

        *** for the footer comments section border, i shared you the code before (in previous comment)

        Om

        Like

      • Thanks so much fro your help!

        Like

  45. dipz says:

    Hello Om,
    At first, I would like to appreciate your efforts for a clean and to the point customization guides.
    Well, I want my main menu in a single line, I tried the css you gave here in couple of comment replies, it does in single raw, but spacing between menu items are not proper. I have ‘home’ + 3 categories in menu, if I do it in single raw, two groups of two items each are displayed with a larger gap in between groups. How do I manage it to display properly gaped?

    My site is on private hosting with wordpress installed, and currently under maintenance mode.

    Like

  46. Sale Birdie says:

    Hi, Any idea why my rebalance site is not responsive when viewed on mobile. Although it looks responsive in edit mode in WordPress. I have a free plan and no plugins. Appreciate your reply. Thanks.

    Like

  47. sumitdhimanphotography says:

    how to align footer widget in a row in this theme

    Like

  48. Hi, Is there a way to alight menu with the header or logo?

    Many thanks

    Like

  49. Hi there, is there a way to make the site logo bigger? I’m currently struggling to upload a logo with a size that is big enough as all sizes seem like too small… currently uploaded a 2000px logo but still looking very small. Many thanks!

    Like

  50. Hi there, is there a way to change how the menu looks like in the mobile site?

    Thanks a lot!

    Valentina

    Like

  51. Also is there a way to group all menu in one icon like in mobile theme but for desktop version?
    Many thanks

    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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

%d bloggers like this: