Footer When Sidebar is Present

hudsonchemicals · Member · Dec 22, 2015 at 6:02 am
Copy link

Add topic to favorites
Hello! I’m hoping there’s a way to center the footer under the left aligned post and/or page content when the sidebar is present. It looks great centered when the page is full (no sidebar), but off when sidebar is visible. Is this possible?

The blog I need help with is: (visible only to logged in users)
kathrynwp · Staff · Dec 22, 2015 at 11:03 pm
Copy link
Could you try adding this to your custom CSS:
```
#site-generator {
  margin-left: 77px;
}
```
That should shift the footer over to the centre.
hudsonchemicals · Member · Dec 23, 2015 at 3:42 am
Copy link
Reconfigured it a bit, but I think it’ll work. I centered it under the content. It’s pretty much aligned left, on a full page, but that seems to fit the theme’s cool offset look. If there’s a way to alter its location, depending on the page or post identity, I’d like to add that. Otherwise, I dig it. Thank you, Kathryn!
kathrynwp · Staff · Dec 23, 2015 at 2:48 pm
Copy link
Ah, I think I understand better what you were trying to do in terms of centering – I thought you were trying to better center it across the whole page width, but I see now what you did, that makes sense.

If there’s a way to alter its location, depending on the page or post identity, I’d like to add that.

You can definitely target CSS based on the page, post or template being used – I can help with that. For example, if you’d like to apply the CSS only to pages using the default template, you would do this:
```
.page-template-default #site-generator {
     margin-right: 206px;
}
```
Let me know if that does the trick. I spot-checked your site but couldn’t find a page without a right sidebar. :)
hudsonchemicals · Member · Dec 23, 2015 at 3:03 pm
Copy link
I had to remove what I had done, based on what it did to the mobile view. Is there a way to limit the style sheet to the desktop view, and leave the mobile as the default? It centers nice on mobile, as is. The pages without the sidebar are safety related. The Safety First sign top image’s linked page, and any products Material Safety Data Sheets. I did make the full page use pretty specific. Sorry, I forgot to mention that. :)
kathrynwp · Staff · Dec 23, 2015 at 6:20 pm
Copy link
Is there a way to limit the style sheet to the desktop view, and leave the mobile as the default?

For sure – you can do that by wrapping the CSS declaration in something called a media query to restrict it to a certain screen size. For example, to limit it to screens over 880px wide (the theme’s desktop “breakpoint”):
```
@media screen and (min-width: 880px) {
  .page-template-default #site-generator {
     margin-right: 206px;
  }
}
```
hudsonchemicals · Member · Dec 24, 2015 at 3:45 pm
Copy link
Ah! I have that code, in part, from another CSS customization. Could’ve put that together, just didn’t realize I had the pieces. :) Thank you!!! Happy Holidays!!!
hudsonchemicals · Member · Dec 24, 2015 at 3:48 pm
Copy link
Looks great!!
kathrynwp · Staff · Dec 24, 2015 at 4:10 pm
Copy link
Excellent – glad you’re set! Have a lovely holiday as well!
hudsonchemicals · Member · Dec 24, 2015 at 6:30 pm
Copy link
Hey, Kathryn. I see that the CSS code isn’t affecting the site generator info on posts. I tried a duplication of the last code, with “post” in place of “page”, but nope. Lol..Here’s an example, at the following page’s bottom: http://hudsonchemicals.com/2015/11/17/extremely-powerful/
kathrynwp · Staff · Dec 24, 2015 at 6:36 pm
Copy link
Good point! You’re very close, but the class for single posts is single-post — this should do it:
```
@media screen and (min-width: 880px) {
  .page-template-default #site-generator,  .single-post #site-generator {
     margin-right: 206px;
  }
}
```
The comma between the two selectors applies the same margin to both.
hudsonchemicals · Member · Dec 24, 2015 at 6:43 pm
Copy link
That did it! Thanks..I should be good, now. :D
hudsonchemicals · Member · Dec 24, 2015 at 6:48 pm
Copy link
If I knew all of the defining verbiage, I probably wouldn’t bother you guys so much! I appreciate your patience, with my many questions.
kathrynwp · Staff · Dec 24, 2015 at 6:55 pm
Copy link
No worries, we’re here to help!

If you’re interested in learning more about CSS and how to target the right elements to tweak them, here are some of my favourite resources:

An Intro to CSS: Finding CSS Selectors

An Intro to CSS, or How to Make Things Look Like You Like

Intro to CSS: Previewing Changes with the Matched Rule Pane

http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://thewc.co/articles/view/web-inspector-tutorial

https://cssworkshop.wordpress.com/
hudsonchemicals · Member · Dec 24, 2015 at 6:55 pm
Copy link
OMG don’t hate me..I just found it’s still offset on search results, category archives and other instances where the sidebar shows up.
hudsonchemicals · Member · Dec 24, 2015 at 6:58 pm
Copy link
I will definitely look into those resources. If you could help me right this last one though, I would appreciate it.
hudsonchemicals · Member · Dec 24, 2015 at 7:04 pm
Copy link
Is there a way to make it so that any time the sidebar is visible, the site generator info shifts over?
kathrynwp · Staff · Dec 24, 2015 at 7:06 pm
Copy link
I have another idea. :)

Why don’t we set the right margin to 206px everywhere – and then reset it to 0 just for pages with the full-width template applied.
```
@media screen and (min-width: 880px) {
  #site-generator {
     margin-right: 206px;
  }
  .page-template-full-width-page #site-generator {
     margin-right: 0;
  }
}
```
hudsonchemicals · Member · Dec 24, 2015 at 7:44 pm
Copy link
There it is!! That’s it, exactly. We got it! Thank you!!! :D
kathrynwp · Staff · Dec 24, 2015 at 8:16 pm
Copy link
You’re welcome. :)

No items found.