Customize Footer on Basis Theme with CSS

  • Unknown's avatar
    saraelisa11 · Member ·

    Hi,

    I want to make the footer widgets of my website both shorter (it takes up the better part of the screen now!) as well as a different color, to set it apart from the rest of the site.

    I have been playing around with different selectors in the CSS customizer but cannot seem to find the one that makes my footer respond – can someone help??

    Thanks,
    Sara

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designdolphin · Member ·

    Try these:

    footer#footer {

}

.footer-widgets {

}
  • Unknown's avatar
    saraelisa11 · Member ·

    #footer .footer-widgets { height: 80px } did the trick! Thanks.

    Now – any idea how I can remove the extra space from between the footer widgets? I have the address widget and then a text widget underneath with a link, and I’d like to move up the text widget to I can add another one underneath – do you know how I can do this? Again, I can probably use the padding property but I don’t know which selector to use!

  • Unknown's avatar
    designdolphin · Member ·

    This should do the trick, correct? 

    #footer .footer-widgets {
    float: left;
    height: 80px;
}
.footer-widgets-left {
    float: none;
}
  • Unknown's avatar
    saraelisa11 · Member ·

    Hmm.. this just moved all of the right footer a little bit to the left. I need the top widget of the right footer to stay in place and the bottom widget of the right footer to move up a bit!

    Thanks again for your help :)

  • Unknown's avatar
    designdolphin · Member ·

    O.k. we misunderstood each other. I read that you wanted to have them next to each other, my bad. So we’ll correct that. :-)

    So, the selector you are looking for is this then? 

    .widget.footer-widget.widget_contact_info {
    margin-bottom: 0;
}

    You can adapt the margin to the height you wish.

    The contact widget has the following id and class:
    <div class="widget footer-widget widget_contact_info" id="widget_contact_info-4">

    and the collaborate widget has the following id and class:
    `<div class=”widget footer-widget widget_text” id=”text-7″>’

    Widgets usually for themes on wordpress.com, in my humble experience, have a common identifier and a unique identifier. One can use those to change things.

    Does that fix the problem?

  • Unknown's avatar
    saraelisa11 · Member ·

    Designdolphin, you are a hero :)

    Since I am clearly new at CSS (but learning quickly now! ;-)), if I put a second text widget, how can I distinguish. The unique identifier is text-7 vs text-9, both being widget_text, so I tried:

    .widget.footer.widget.widget_text.text-7 { margin-bottom: 0; }

    And I also tried the same but with .text-9 { margin-top: 0; } but nothing!

    I’m sure you can do this in 2 seconds but I like playing and trying things out, they just never seem to work for me. So, there is now a gap which is too large in between ‘Collaborate’ and ‘Subscribe’ – I even tried putting a negative margin on the one that was already working, but nothing happened. What am I doing wrong?

  • Unknown's avatar
    designdolphin · Member ·

    The id is written as # and a class is written as .

    So it would be #text-9 and .footer-widget for example.

    So using the negative margin example: 

    #text-9 {
    margin-top: -27px;
}

    Or alternatively one could put the two buttons in the same widget, if that is an option, and give that a class and id for example. So, we get:

    Button text
    Button text

    And then style from there.

    So: 

    .footer-widget-button {

}

.collaborate-button {

}

.subscribe-button  {

}

    If you use the Firefox browser there is an extension that is called Firebug. It’s really handy to see HTML and CSS code, and try out things for the layout.

    If you need a lot of work done you’re best off finding a designer to help you out. Althought the site looks like you’re doing a great job with it.

  • Unknown's avatar
    designdolphin · Member ·

    Unfortunately the post changed the button code, and turned it into the links… Replace :bracket: with < and > in the example below. Hope it still makes some sense. 

    :bracket: a class="collaborate-button  footer-widget-button" :bracket: button text :bracket:

:bracket: a class="subscribe-button footer-widget-button" :bracket: button text :bracket:
  • Unknown's avatar
    saraelisa11 · Member ·

    That makes perfect sense! I love the explanation. I am combining my fiddling (which has worked pretty well up to this point, minus the footer annoyance!) with some expertise of friends, and I think it’s doing pretty well. We’re getting there!

    Thanks again for all your help!

  • The topic ‘Customize Footer on Basis Theme with CSS’ is closed to new replies.