Position background color sidebar
-
I added code for the background color for pages and I want the same positioning for the side bar. The code was posted on Oct 17, 2013, 2:45 PM under topic heading: Background color positioning. Is it possible to modify the code for the sidebar?
The blog I need help with is: (visible only to logged in users)
-
Are you talking about setting a minimum height for the sidebar so that the color continues down past the extent of the widgets?
You can set a minimum height, as we did in .page .site-content, which would keep the color in the sidebar and content going to the bottom on pages that were shorter than the 499px we used. The problem with this is, if the content happens to be longer than the sidebar, or the 499px set, there is going to be white space below the sidebar. If the sidebar gets longer than 499, but the content is shorter, then there will be a gap below the content.
What might be better would be to make a background image for .site which includes the grey on the left and the lavender on the right. That could then be positioned to start at the top of the content and sidebar, and would always extend the full height of .site, no matter if the sidebar and content were of different lengths.
The lavender area is about 275px in width, and the grey area is about 585px in width and the overall width of the image would have to be 975px. The image would only have to be about 10px in height and then we could repeat it in the Y direction (down).
-
-
It would look like the following. You would create the image, upload it to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks in the background declaration below.
.site { background: url("URL_OF_IMAGE") repeat-y scroll 430px center transparent; }You would then remove the following rules from your CSS.
.post { background: none repeat scroll 0 0 #DCE3E6; } .page .site-content { background: none repeat scroll 0 0 #DCE3E6; min-height: 499px; }And you would remove the background color declaration from the following rule leaving just the padding and width declarations.
#secondary { padding: 0.333em 2.5em 0 1em; width: 28.2051%; } -
As we have it designed right now there is white space in between the sidebar and the .page .site-content, is it possible to create the image with white space that separates the lavender and gray area?
-
Yes, you just have to create the image with that white space between. I gave this above.
The lavender area is about 275px in width, and the grey area is about 585px in width and the overall width of the image would have to be 975px. The image would only have to be about 10px in height and then we could repeat it in the Y direction (down).
-
I’m having problems getting this fix to work. To replace URL_OF_IMAGE with the image’s URL should I use the URL located in Dashboard’s Media save section, or the Shortlink from “Get Shortlink” in the Edit Media section?
-
Use the absolute URL for the image, which if you are in the image edit section for that image in the media library, would be in the grey field on the right.
-
Yes, that is the URL I replaced the placeholder text with, and the image replacement does not work. How can I find out what the problem is?
-
Hi there!
How does it look now?
I made a few tweaks to your css to get the look you were going for.
I replaced the .site code and replaced it with this code:
#main { background: url('http://lisarhode.files.wordpress.com/2013/10/backgroundcolorline.png') repeat-y scroll 0px center transparent; min-height: 410px }Is this the look you were going for? If not, let me know. I’d be happy to help!
-
Fabulous, thank you. For some reason it is not flush on the rates page. Do you know what the cause of this is?
-
Looks like that page is a little bit taller than some of the other pages.
Try changing the min-height from 410px to 435px.
That should fix it!
Let me know if you need anything else!
-
Yes, that fixed it, thanks.
I am having a similar problem with the comment box on the contact page. I added the contact feature from the WP provided option on the Edit Page. Is the contact box editable? -
What do you mean by is the contact box editable?
Are you looking to remove or add fields?
-
Yes, the comment text area is larger than the background. I believe this is the code that defines it:
[contact-field label='Comment' type='textarea' required='1'/][/contact-form]
Can the comment input box be made wider or shorter? -
I entered the code and it did not change the contact form. Did I put it in the correct place in the custom CSS?
-
Yes, it was placed in the right place, but it wasn’t the right code ;)
I’ve modified it to be correct:
#contact-form-comment-g52-comment{
height: 50px;
} -
Great thanks! I thought size of the comment box was misaligning the background, but even with the resized box, which is the design I am going for, the background does not align with the bottom. Is there a fix for this?
-
You can continue to adjust the min-height until it’s tall enough to stretch.
Unfortunately, this theme wasn’t designed exactly to do this, so that’s why it’s been a little hassle to get everything perfectly configured.
Hope this helps!
- The topic ‘Position background color sidebar’ is closed to new replies.
WordPress.com Forums 