Sticky Footer to Blask Theme
-
Hi,
The site im having issue with is: http://www.ballpitmag.com. I would like to add a 100% width footer at the very base of the home page) Please refer to this example: http://jsfiddle.net/2ZhpH/1568.
I am only able to add a “footer” under the main area using the WordPress’ html editor. A simple deduction would be that I am only able to edit the Main Content Area (as shown in the jsfiddle link) and not the entire wrapper using the editor. I would like to have my footer span across the entire width of the site. Is this possible? Please let me know what you guys think.
The blog I need help with is: (visible only to logged in users)
-
-
Hi @ballpitmag, the site footer div in Blask is within and at the bottom of the content div, which is not full width since the header is to the left of it, so although we can do a position fixed on it, we can’t get it to go full width, only the width of the content area. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS to see the effect.
.site-footer { width: 100%; position: fixed; bottom: 0; background-color: #cc0000; height: 50px; margin-bottom: 0; display: block; } #page { position: relative; } -
Hi @thesacredpath!
Thank you for taking the time to reply. I understand that there are limitations to editing the theme but I do hope I can find a solution using CSS or some other creative way!
Have a look at this page: ballpitmag.com/15254-2. I have used the following:
.Footer_outer {
position: fixed
width: 100%;
right: 0;
bottom: 0;
left: 0;
height: 150px;
padding: 1rem;
background-color: #efefef;
}This footer spans the entire width, though it only works for the view-able area. It seems that the combination of “position: fixed; left: 0; right 0;” allows the “footer” to be layered over the entire site even though the html is placed in the main content area. With the removal of “position: fixed” alone, it goes back to being the width of the main content area.
Idea 1
A simplistic deduction is that “position: fixed” or “position: absolute” seems to help it display full width. Is there some way we could make use of this and have it displayed at the very bottom of any page that I place the html footer?Idea 2
Perhaps there could be some sort of coloured block placed in the header section (sidebar) to visually lengthen the footer placed in the main content area – mimicking full width.Idea 3
I would imagine the height of the header (sidebar) and main content area is set to auto/100%. Is there a way to adjust the CSS such that the content uses “margin-bottom: -150px”. The “footer” would some how be inserted in this space creating the effect of being full width.Idea 4
If the above ideas are not possible, is there a way to add content to the footer section that you showed above?I am new to html/css so please feel free to correct me if I am wrong about how it works. If anyone has had the same issue, please feel free to share with me any creative work-around!
-
I need to go to bed (re the left and right at zero (0)).
That will work. Position fixed floats the element free and it follows the web page whereas position fixed will keep it in place in relationship to the window/screen viewed on. Use the code you have above.
-
The code above only works for a full width “footer” in the visible screen area rather than the entire page.
If it helps to understand what I am trying to do, your website (the-sacred-path.com) has a dark footer area. I hope to be able to create that using my current theme.
Are any of the ideas presented above doable with the limitations of wordpress / CSS?
-
Is there also anything I can do with z-index? Like perhaps have the “position: fixed” footer only appear when scrolled to the bottom?
-
-
- The topic ‘Sticky Footer to Blask Theme’ is closed to new replies.
WordPress.com Forums 