WordPress Tricks

Create website for photographers, artists, and graphic designers using The Rebalance Theme by Automattic :Documentation, Support and customization

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.

You can take my personal help in skype : om2000_cuet

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

You can take my personal help in skype : om2000_cuet

248 thoughts on “Create website for photographers, artists, and graphic designers using The Rebalance Theme by Automattic :Documentation, Support and customization”

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

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

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

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

      1. You are SO wonderful for being this helpful!! However, I’m not super knowledgeable on coding. I have done some before with my personal blog, and that has always worked for me. I tried going to “text” and clicking “code” which then pulled up and then I copied and pasted what you gave me (I also tried the above mentioned about the border around the featured image & the text/photo alignment) and I couldn't get any of them to work. They just did nothing. Am I putting in the code in the wrong spot or what am I doing wrong? Again, thank you so much!!

        Like

      2. HI
        as you are using wordpress.com free site..you need to purchase Custom Design option from wordpress.com
        if u purchase that, then you will be able to put the code i shared there under APPearance–> CUstomize

        OM

        Like

      3. Thanks again for all of your help- every code you give in this post (that I used) worked!! I do have a quick question/problem though. If you go to my site- http://ashandcobridalblog.com you will see on the home page that the excerpt from the first post (Liz and Kenny) indents the first word, but none of my other posts do this? I’ve tried playing around with the placement, but still no luck! It’s something minor, but going to drive me nuts. Let me know if you’ve got any thoughts. Thanks a lot!

        Like

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

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

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

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

      1. Hi there,

        I’ve been trying to get rid of the black line, but with the code below all the heading (including the title disappears – is there a way to just get rid of the line but not the heading?
        .site-heading {
        display: none;
        }

        Many thanks!

        Valentina

        Like

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

      1. There is no update for that in wordpress.com
        you have to purchase your own hosting (like hostgator, bluehost) etc for that… so…only for social icons..that may be costly
        Om

        Like

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

      1. No I haven’t changed a thing. Is it showing on the My Blog page? That’s the one I was having a problem with.

        Like

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

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

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

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

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

    1. HI Deborah
      i think better to remove the categories from blog page?

      .blog #secondary {
      display: none !important;
      }

      *** If you want to show the categories..better you use category widget to the footer?
      Also for Older post button position fix

      .blog #infinite-handle {
      position: relative !important;

      }

      please let me know what you think..

      Om

      Like

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

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

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

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

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

    1. HI Deborah
      are u using wordpress.com or your own hosted site?
      what you are saying..can be done…but it will need theme files modifications…
      but there are plugins for created Custom Taxonomy etc which you can check also

      Om

      Like

    1. Hi lucindatee
      as you are using wordpress.com free site..you need to purchase custom/advance design customization ( to add your css) from wordpress.com

      then u can add my provided code under Appearance > Customization

      please let me know if u have any doubt

      Om

      Like

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

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

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

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

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

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

    1. Hi Les
      if you are using wordpress.com then you will need to purchase Custom Design update from them
      otherwise
      if you have your own hosting and domain you can use “Simple CUstom Css” plugins to use my provided css codes
      OM

      Like

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

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

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

    1. Hi Jacopo
      please try this
      figcaption.wp-caption-text {
      display: block !important;
      position: relative !important;
      right: auto !important;
      width: 100% !important;
      }

      please let me know if it is ok?

      Om

      Like

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

      1. yes i do indeed. anyway the cursive i get on desktop is nice while the one on mobile is quite different. I guess I have to find a font which looks nice on both device or there is way to set different font according to device?

        Like

      2. well, nevermind. I removed the cursive from my css and after all now it looks good both on desktop and mobile. Thanks a lot!!

        Like

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

    1. Hi Bhavna
      as you are using wordpress.com and using personal plan so you can’t implement additional counter
      to check the plans, go to your dashboard > Plans > Plans
      🙂

      you will get the details there

      Om

      Like

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

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

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

      1. Hi Marina
        sorry for the late response
        to show the meta in the left instead of center….try this code

        .single .entry-header .entry-meta {
        float: left !important;

        }

        let me know if it helps

        Om

        Like

      2. And also I would like to know why is the social menu not showing up the Pinterest logo but all the other social media icons are ok.?

        Like

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

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

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

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

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

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

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

      1. Hi Om,
        Thanks for taking time. Well, I got solution to my query by referring support forums at wordpress.

        Like

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

      1. Hi thanks for the reply. when mobile view is enabled, it looks like a default wordpress mobile site. theme is not getting applied. Could you suggest a similar theme if possible. appreciate your help.

        Like

      2. Thanks for the help. I moved to quadra but still have the same issues when viewed on mobile. Will try to troubleshoot later when I have time. Do you have a portfolio or profile in of yours in english? Please share the same. Thanks.

        Like

      1. it will require to modify theme file..only css cant help for that properly
        and in wordpress.com you can modify theme file only in business plan

        Om

        Like

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

      1. Thanks, is still pretty small though… the heigh looks the same as before.

        Also, I’ve upgraded to premium, is there a way I can move the menu next to the logo?

        Many thanks!

        Like

      2. the logo image you shared is small..thats the problem, if you use big image..it should be bigger
        instead of business plan, i think the menu beside logo cant be done
        Om

        Like

      1. Hi,
        I think i got a solution for Humberger mobile menu icon for Rebalance theme
        try this code

        .menu-toggle::after {

        content: “– — –“;
        width: 22px !important;
        line-height: 4px;
        font-weight: bold !important;
        color: black !important;
        text-indent: 0px !important;
        display: block;
        position: relative;
        text-align: center;
        float: none !important;
        vertical-align: middle !important;
        margin-top: 0px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        top: -12px;

        }
        .menu-toggle {

        width: 30px !important;

        text-indent: -99999999999999999999999999999px !important;
        padding: 0px !important;
        background: transparent !important;
        height: 27px !important;

        }
        .menu-toggle.toggled-on {

        margin-bottom: 12px !important;

        }
        .menu-toggle.toggled-on::after {

        top: -6px !important;

        }

        Let me know if it helps

        Om

        Liked by 1 person

    1. HI
      the code i shared, seems one code didnt work properly. For which the burger symbol ( square with 3 line inside) is not showing.

      please put this code at the bottom of all code

      .menu-toggle::after {
      content: “– — –”;
      }

      Like

      1. Thank you for helping. The attached screenshot shows the like button is enabled. Though I don’t use the post editor. Instead, I post HTML via email. I don’t use featured images. Instead, I embed links to images in my HTML.

        On September 7, 2018 6:57:08 AM All About Basic wrote: > allaboutbasic commented: “Hi Dave > i prefer you check the Post editor to check if Like is disabled (unticked) > for that post or not > Om”

        Like

  24. Hi

    You detail above how to style blog posts so they are full width – but could you show the CSS for styling static page content as full width?

    Like

  25. Hi Om!
    Really cool and informative webpage/article about the rebalance template. I just wanted to know if you have any idea on how to resize the logo. Any help would be greatly appreciated.
    Thank you!

    Like

      1. I’m currently trying different options so there is no page (yet) but it is with the rebalance template.

        Like

  26. Hi, this is so helpful. Can you please help me on how I can make the footer widgets go horizontal rather than vertical? For example the instagram widget. And I also want to make an image on the footer look larger but when I change it to “actual size” (even though it’s a large file) it’s still the same size. Thank you!

    Like

  27. Hi, Can you let me know how to resize the featured image on posts please? They are huge and wanted to resize if possible. Thank you. I am quite a novice so something either I can amend in the additional CSS box or a screen shot like with your footer “Powered by…….” point 21 would be really useful.

    Like

Leave a reply to allaboutbasic Cancel reply