Side Bar Width
-
Hi,
I am trying to make my sidebar wider so that my logo and links can shift to the right and appear to be more centered on the page (similar to the layout of this website: http://www.fnarchitecture.com/).
The current CSS I have set up is this:
.main-navigation li {
border-top: none;
margin: 0 65%;
width: 440 px;
}.site-main {
width: 440 px;
}Shouldn’t this work? I have tried everything, but it always seems like the sidebar dimensions hit a limit and won’t get any bigger!
The blog I need help with is: (visible only to logged in users)
-
Hi, first off, can you remove this from your custom CSS.
.site-info { display: none; }You are not allowed to hide the WordPress.com and theme footer credits per our Terms of Service (#11). See the Frequently Asked Questions on the Custom Design support page for more information.
You are allowed to restyle the footer credits to better fit with your design as long as they remain readable. If you would like to do that and need help with it, we would be happy to help.
Remove all the custom CSS you now have and replace it with the following and see what you think. You may want to copy out all your CSS and save it in a plain text file for reference.
#page { margin-left: auto; margin-right: auto; max-width: 960px; position: relative; } .site-header { position: initial; max-width: 28%; width: 100%; } .site-content { float: right; margin-left: 0; max-width: 70%; position: absolute; right: 0; top: 0; width: 100%; } .site-logo-link { margin-left: -50px; overflow: hidden; } .main-navigation li { border-top: none; } .main-navigation a { padding: 0.1em 0; } .site-info, .site-info a { color: #ccc; }In the last rule above, I took the liberty of making the theme and WordPress footer credits at the bottom lighter.
-
Actually, use the following instead. I made a couple minor additions for clearance on smaller screens/windows.
#page { margin-left: auto; margin-right: auto; max-width: 960px; position: relative; } .site-header { position: initial; max-width: 28%; width: 100%; } .site-content { float: right; margin-left: 0; max-width: 70%; position: absolute; right: 0; top: 0; width: 100%; } .site-logo-link { margin-left: -30px; overflow: hidden; } .main-navigation li { border-top: none; } .main-navigation a { padding: 0.1em 0; } .site-info, .site-info a { color: #ccc; } .main-navigation { padding-left: 20px; } -
Thanks for your help thesacredpath. I think maybe you didn’t understand what I’m looking to do though…
I am looking to push the sidebar further to the right. Your revisions seem to have only pushed it back to the left?
I want both the side bar and the content area to sit closer to the center. Does that make sense?
-
Hi, I understood, but what I am trying to do is to keep your site working on small tablets and phones, and getting all this to look the way you want it on your computer, and also accommodating your visitors on smaller devices is a bit of a challenge.
Replace the .site-header rule I had given with this.
‘.site-header {
max-width: 28%;
position: relative;
width: 220px;
padding-right: 0;
margin-left: 20px;
}`
and then add this at the very bottom of your custom CSS.@media screen and (max-width: 767px) { .main-navigation { padding-left: 0; width: 150px; } } -
Awesome! Thats perfect. Thank you!!!
Just for the sake of my understanding, is it possible to shift the main page slightly left or right? I figured out which aspect to manipulate to do this with the side-bar (it is shifted 20px left of your settings), but wasn’t able to figure it out for the content on the static page.
Thanks again!
-
You have to be a bit careful in shifting things so that they aren’t pushed outside of the main overall container as that would mean some stuff would be hidden outside a window/screen border (smaller devices).
You can add a margin-right declaration to .site-content. As it sets, the right margin is 40px, so you could try 60 or so and see what you think.
-
Hmmm, like this:
.site-content {
float: right;
margin-left: 0;
margin-right: 60px;
max-width: 70%;
position: absolute;
right: 0;
top: 0;
width: 100%;
}It doesn’t seem to shift when I modify the margin-right declaration, but I believe I set it up correctly?
-
Hi, yes you have it set up correctly. When I comment out the margin-right line you have, the content shifts 20px to the right, back to where it was originally. This will only shift the content closer to the sidebar, it doesn’t shift everything to the left.
-
Ah! Ok, it seems that I was going the wrong way – I was making the margins wider rather than smaller.
Regarding the “main overall container,” are you referring to the overall site, or the .site-content selector? I ask because I am currently trying to create a new page (using custom HTML) to replace the gallery function I have set up. I would like the gallery as a whole to take up more room horizontally on the screen (so the images could be bigger). They will also have to take up more room vertically I imagine as well (you may have to scroll down on the page to see everything)…I guess my question is, what is containing the site content to this width and height? And can I control this easily without shifting the content outside of the window/screen border as you mentioned in your previous post?
-
The width of the content area is set in .site-content and the width of the header/sidebar is set in .site-header . Those two are both contained within #page. To increase the width of .site-content, you also have to increase #page . Once you determine how much wider you would like things, we can work on the CSS to make that happen. We may actually be redoing what we have already and changing the way we do it. I won’t know until you decide how much wider you want things.
-
Hmmm, ok. It seems like it is a bit more complicated that I thought. Are you looking for a number in pixels? Like for me to say, I would like the site content to be 80px wider, for example?
Perhaps I also need to get my front page content closer to what I want. I currently have this: http://annascherman.com/gallery-test/
(I am hoping to make this the front page, rather than what I have currently set as the front page). I want the elements of the grid to overlap each other, as they do in the example page I sent, but haven’t figured out the coding yet. Do you know the best forum for me to ask for help with the html coding? -
Eventually we may have to probably adjust widths.
On the HTML, what the site you referenced has done is to put the images into an unordered list and then set it to two columns with CSS. They have then formatted the list so that it does not have bullets or any left indent. If you use your web inspector on that site, you can see how they have done it. It is actually a pretty ingenious way to do things. Not the only way, but a good way.
If you wish to give the above a try and get something for me to work with, we can work out the CSS and such.
-
Ah, ok! For some reason, when I used the web inspector, I couldn’t figure that out, but I have also been reading a lot on HTML since then, so maybe I just didn’t have the same breadth of understanding.
I am going to give this a try…one question before I do that is unclear to me. Am I able to adjust the CSS on any given page on my website? Currently, I was testing this on a page not set up to be the site’s front-page. It seems like my only options to modify it are the “visual” tab or the “HTML” tab…or is the CSS formatted somehow within the HTML?
Thanks again for your help! I am learning a lot!
-
Well, I got it! I did not use CSS to create the two columns, but the HTML code: <div style=”float: left; width: 50%;”>
It seems to work! See here: http://www.annascherman.com
A couple of things I am still struggling with:
A) I want the page to have a title (for my own organization), but I don’t want that title to appear at the top as it is now. Is there a way to get rid of this? I tried:
<h1 class=”entry-title” style=”display: none;”>Front Page: Gallery</h1>
But its not working.
B) Is there a better way to control the spacing between images? Especially between the columns. I would like all of the white borders to be equal, and very minimal.
C) I definitely want the content to be significantly wider. I still want the static front-page and side bar to appear centered, just to take up more room across the page…is this an easy fix to the CSS you already provided me?Thank you!!
-
Hi, with the way you have done this, I’m not sure I can get a satisfactory result for you. Let me work on this a bit and see what I can come up with for you.
-
-
Gaaaahhhh! I had a response all done and the system timed out on me.
We are going to have to use some CSS to control and adjust things. First off, turn your opening UL tags in your page to this
<ul class="my-ul">
Then add this to your custom CSS and we can go from there..my-ul { list-style-type: none; margin: 0; } .my-ul img { width: 100% !important; height: auto !important; padding-right: 0; margin-bottom: 5px; padding-right: 5px; } -
Quick question regarding CSS in general…
It seems like, using wordpress.com, the only way to apply CSS is to the theme itself, correct? It can’t be applied specifically to individual pages?
I realize this is a “beginner question” but I wanted to be sure that it could not be added in the html tab of an individual page. I don’t know how it works with other platforms as a comparison but, reading things on the internet, it seems like html and CSS are typically applied in the same place?
I’m going to try this as soon as I have a chance! I’ll let you know how it goes.
-
Sure, we can apply CSS to specific pages. If you view the source for a page and look in the opening body selector, you will see something similar to this
<body class="home page page-id-328...
page-id-328 is the unique CSS body class for that particular page. Each page will have a different one. We can use that to tell the browsers to only apply certain CSS to that specific page, like this, using the previous CSS as an example..page-id-328 .my-ul { list-style-type: none; margin: 0; } .page-id-328 .my-ul img { width: 100% !important; height: auto !important; padding-right: 0; margin-bottom: 5px; padding-right: 5px; }
- The topic ‘Side Bar Width’ is closed to new replies.
WordPress.com Forums 