3 column footer

I had a quick look at theme and realized it doesn;t support footer widgets

If you don;t want to create a child theme and add all the custom php code and then edit theme files and add custom css; you may also need to add media queries to css BUT you can go the plugin way YAY ??

I think this plugin would work for you

https://www.ads-software.com/plugins/podamibe-simple-footer-widget-area/

Oh! My! My! This is so cool. I just installed it and gave a try. Maybe this might work! ?? Thank you so much.

You’re welcome buddy; have a good day/night ??

PS: there’re plenty of plugins in WordPress’s repository

This surely did make the footer widgets, but the width of the columns does not follow the current theme footer column width. It is too small — well half of it. I will try out with the Customize CSS.

Actually there’s a brilliant plugin for CSS customization:

https://www.ads-software.com/plugins/yellow-pencil-visual-theme-customizer/

• This reply was modified 7 years, 7 months ago by Saurabh Saneja.

@neitham Rebalance comes with a two-column footer widget area, no plugin is needed.

Here’s a screenshot:

Let me know if this works for your needs.

Hello Kathryn,

Thanks for the response. I was wondering if there is a tweak around so that there can be three columns footer instead of two – as there are no ‘sidebars’ to accommodate more widgets but two in the footer ‘widget’.

Overall, I really like the theme. I was looking around this kind of theme for a long time.

I also found out that even when I hide the tags in the homepage (Refer: Allaboutbasic.com, they are still being displayed in the archive pages. How do I go about not being displayed in the home and archive pages but still be displayed in the single posts?

Much regards.

• This reply was modified 7 years, 7 months ago by neitham.

Hello @saurabhsaneja
Looks interesting again! Will give it a try!
Warm regards.

I was wondering if there is a tweak around so that there can be three columns footer instead of two – as there are no ‘sidebars’ to accommodate more widgets but two in the footer ‘widget’.

Give this a try:

/* Widen the widget area and remove the float */
#secondary {
    float: none;
    width: 100%;
}

/* Hide the footer credit - note that this is only allowed on self-hosted sites or WordPress.com sites with the Business plan */
.site-info {
  display: none; 
}

/* Change the width of each widget */
.widget {
    width: calc(33% - 30px);
}

I also found out that even when I hide the tags in the homepage (Refer: Allaboutbasic.com, they are still being displayed in the archive pages.

That site looks to be running Enterprise on WordPress.com, not Rebalance on a self-hosted site. That said, if you’d like to hide tags in Enterprise on category, tag, and date archive pages, this should do the trick:

.category .post-meta .tags, .tag .post-meta .tags, .archive .post-meta .tags {
  display: none;
}

If you need further help with CSS tweaks on WordPress.com, please post the WordPress.com CSS Customization forum here:

https://en.forums.wordpress.com/forum/css-customization

On another note – I noticed that you provide CSS tutorials for customizing themes – that’s very cool! I also noticed that a lot of your tutorials use !important thoughout your CSS. This is not a good CSS practice, for multiple reasons. For example, it disturbs the normal CSS cascade and can make it impossible to override elements further down in your CSS, or via plugins, for example. You can learn more here:
https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/

If you find yourself reaching for !important it means that you should be targeting a more specific element with your custom CSS. I mean “specific” in CSS terms. !important is rarely necessary, generally only to override inline CSS in a theme, such as CSS that’s added to an element dynamically via JavaScript. For example, a CSS class added only at a certain screen size, or as the user scrolls up or down.

You can use a browser inspector to locate the correct element to target, without needing !important. Here’s a good tutorial on using browser inspectors.

Actually let’s improve the CSS I gave you and put the columns in a media query, so they don’t get too narrow on smaller mobile screens.

Replace this:

/* Change the width of each widget */
.widget {
  width: calc(33% - 30px);
}

With this:

/* Change the width of each widget */
@media screen and (min-width: 881px) {
  .widget {
    width: calc(33% - 30px);
  }
}

That restricts the three-column display to screens 881px wide and greater.

Thanks. I am with one eye right now. Hihi. Will try out your suggestions.

Hope your eye gets better soon!

What I mean was, I was sleepy. ??

Backing up my template first and trying out the Yellow Pencil lest something goes wrong. Trying to create a sidebar on the single post page.

@zoonini

Oh I didn’t see your reply. Going through now. ??

Hello @zoonini

This code works perfect! I won’t be needing any plugin for the three footer widget. It also easily complies with the theme (as in the widget width). Many thanks. ??

/* Widen the widget area and remove the float */
#secondary {
    float: none;
    width: 100%;
}

/* Hide the footer credit - note that this is only allowed on self-hosted sites or WordPress.com sites with the Business plan */
.site-info {
  display: none; 
}

/* Change the width of each widget */
@media screen and (min-width: 881px) {
  .widget {
    width: calc(33% - 30px);
  }
}

FYI, Allaboutbasic.com is not run by me. I googled and found the tips from that site to change some of the Rebalance CSS. ??

• This reply was modified 7 years, 7 months ago by neitham.