Booklite- Widget/Footer problem with graphics, positioning, & dividers

newrootllc · Member · Oct 12, 2016 at 12:58 am
Copy link

Add topic to favorites
I am struggling with my footer. Any assistance would be appreciated.
In booklite, I must use widgets to have a footer. I’d like to see my logo centered at the bottom of every page but I cannot seem to make it happen with a widget, in a way that looks good.
I tired adding a search bar in the footer as well, but it is a small box that only takes about 1/3 of the page width. The widgets are positioned oddly when using more than one, they don’t stack or look good together.

I added both my logo and the search box to the bottom of the page, http://www.newrootllc.com, hoping that someone can see what I am working with and help me find a work-around.
If at all possible, I’d just like to add a footer than allows for graphics and text, without the use of widgets. How can I use CSS to override the current template?

Thank you!!

The blog I need help with is: (visible only to logged in users)
siobhyb · Member · Oct 12, 2016 at 11:00 am
Copy link
Hi @newrootllc,

I can see that a large height and width has been set for the logo under the settings for the Image Widget. If you set a smaller height and width, the image would take up less space and will automatically centre itself at the bottom of your page.

To change the widget’s settings: Navigate to the Widgets panel of the WordPress.com Customizer and then select Footer One. From there, click on the Image Widget to see its settings and edit them.

As for the search bar: Would you like to increase the width of the bar or centre it on the page? You could centre it with the following custom CSS:
```
.widget-area:first-child {
    text-align: center;
}
```
Let me know if the above helps you to achieve what you’re after!
newrootllc · Member · Oct 12, 2016 at 5:31 pm
Copy link
I changed the height and width of the logo, and it does look better, but it didn’t quite do what I wanted it to do… It doesn’t center the image under the template graphics that are above it. :( I’ll try CSS similar to what you gave me for the search bar for the image widget and see if it will center.

As far as the search bar goes, I would like it to either stretch the width of the page OR align right. I’ll try that custom code for aligning it right rather than center. Thank you for generating that for me!

There are two graphics (I think they’re dividers) after the page content ends and before the widgets start. When I remove the widgets, one of the graphics disappears, which is kind of why I was trying to add a footer without using widgets. Can I remove the divider graphic associated with the widgets somehow?

Is there a way to make a footer without using widgets? I’d like to be able to have a footer that I can add an address or logo to without having to use CSS. Is that possible? The widgets, when added, do make a footer, but they are sort of like big bulky blocks that don’t fit together perfectly. It would be a huge relief if I could just have a footer similar to a word document. Is that even possible?

Thanks so much for your help!
siobhyb · Member · Oct 13, 2016 at 2:03 pm
Copy link
Hi @newrootllc,

I changed the height and width of the logo, and it does look better, but it didn’t quite do what I wanted it to do… It doesn’t center the image under the template graphics that are above it. :( I’ll try CSS similar to what you gave me for the search bar for the image widget and see if it will center.

The logo is showing as centred to me. The tree within the actual logo itself is slightly off centre, to the left, but the actual logo is centred. I created the following screenshot to highlight the centred logo in the footer:

If you’re aiming to get the image of the tree within the logo centred then the image itself will need to be updated.
siobhyb · Member · Oct 13, 2016 at 2:03 pm
Copy link
As far as the search bar goes, I would like it to either stretch the width of the page OR align right. I’ll try that custom code for aligning it right rather than center. Thank you for generating that for me!

Increasing the width of the form is an option too! :) The following CSS will increase the width of the bar so that it takes up the full width of the screen:
```
#searchform .field, #searchform .submit {
    float: left;
}

#searchform .field {
    width: 80%;
}

#searchform .submit {
    width: 17%;
}
```
siobhyb · Member · Oct 13, 2016 at 2:04 pm
Copy link
There are two graphics (I think they’re dividers) after the page content ends and before the widgets start. When I remove the widgets, one of the graphics disappears, which is kind of why I was trying to add a footer without using widgets. Can I remove the divider graphic associated with the widgets somehow?

You can hide the divider that’s associated with the widgets by using the following custom CSS snippet:
```
#secondary {
    background-image: none;
}
```
siobhyb · Member · Oct 13, 2016 at 2:06 pm
Copy link
Is there a way to make a footer without using widgets? I’d like to be able to have a footer that I can add an address or logo to without having to use CSS. Is that possible? The widgets, when added, do make a footer, but they are sort of like big bulky blocks that don’t fit together perfectly. It would be a huge relief if I could just have a footer similar to a word document. Is that even possible?

Your logo and address can only be added to the footer via widgets, but we can definitely make use of CSS to get it looking as you wish it to.

No items found.