CSS for adding a custom footer with text below footer widgets in Broadsheet

hohcatholic · Member · Dec 13, 2014 at 7:45 pm
Copy link

Add topic to favorites
Hello!
I’m looking to add a footer that can display text and/or images on all pages of the site below where the current footer widgets are. The footer needs to be centered and lower on the page than where the current footer widgets are.
The blog I need help with is http://www.stbenedictavon.net

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 13, 2014 at 9:53 pm
Copy link
Hi there, you can add text above or below the existing footer credits by using a :before or :after pseudo selector. To add the text before, the CSS would look like this:
```
.footer-wrap:before {
    content: "This is my added text";
    display: block;
    margin-bottom: 10px;
    color: #cc0000;
    font-weight: bold;
    text-align: center;
}
```
I included some other styling declarations, which you can use or edit as you desire, or you can delete them. The three you would want to keep would be the display and text align. To put the text after the existing credits, change the before to after and then change the margin-bottom to margin-top.

To add an image, you can add that image as a background to the footer-wrap div and then adjust the top or bottom padding as needed so that the image would show above or below the existing credits. The following would be the basics for adding the image above the credits.
```
.footer-wrap {
    background: url("URL_OF_IMAGE") no-repeat scroll top center transparent;
    padding-top: 50px;
}
```
You would have to adjust the top padding as needed to get the spacing right on the image. Upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with the URL of your new image.
hohcatholic · Member · Dec 13, 2014 at 11:07 pm
Copy link
Those are great! One more thing, if I wanted to add a couple additional lines of text below the first one, what would that CSS look like?
hohcatholic · Member · Dec 13, 2014 at 11:08 pm
Copy link
Oh, and am I able to put clickable links in there as well?
thesacredpath · Member · Dec 14, 2014 at 12:00 am
Copy link
Adding multiple lines is not possible with the pseudo selectors. You can’t stack them. Also, you can’t add links in CSS. CSS is a document used by the browsers to style and position elements in a web site. It cannot be used to add functionality, such as linked text or images.

On many themes, you can relocate and style a text widget to the bottom of the site in the footer area, but that only works well if there is an overall container div around all the content, and on Broadsheet, the only overall container doesn’t contain the footer area.
hohcatholic · Member · Dec 14, 2014 at 12:09 am
Copy link
Okay. No worries. Thanks for the help!
thesacredpath · Member · Dec 14, 2014 at 12:11 am
Copy link
You are welcome.

No items found.