border-right-image support

aimango · Member · Jan 17, 2012 at 7:41 pm
Copy link

Add topic to favorites
I am trying to create a separator between the content and the sidebar, but am not sure how to approach it. border-right-image seemed like the right way to go, but I do not think this tag is supported in WordPress.

Input greatly appreciated, thanks!
thesacredpath · Member · Jan 17, 2012 at 10:10 pm
Copy link
If this is the site you are talking about, http://aimango.wordpress.com/ ? If so, try this. You can edit the width and the hex color code.
```
#sidebar {
border-left: 2px solid #CC0000;
padding-left: 20px;
}
```
aimango · Member · Jan 18, 2012 at 4:53 am
Copy link
Ok seems to work, but I am wondering if it is possible to use an image as the border instead. Also, is it possible to customize the border height?

Thanks.
thesacredpath · Member · Jan 18, 2012 at 5:03 am
Copy link
The border will run the full height of the sidebar and the height of the sidebar is determined by the widgets that are installed in it.

If you use an image, it has to be a repeating image so that as the sidebar shortens and lengthens due to widget changes, additions and deletions the image can fill.

What are you wanting to do to the height of the border?
aimango · Member · Jan 18, 2012 at 6:19 am
Copy link
Oh, I wanted to make the height shorter than the default as given by the widgets.
Can you please explain how I would use an image as a border?

Thanks so much!
thesacredpath · Member · Jan 18, 2012 at 6:29 am
Copy link
First off you would have to make an image that would be quite narrow otherwise you would have to rework the basics of the entire theme to accommodated the vertical image.

If you just want it say, 500px tall, then make it that tall and it can be inserted as a background in the sidebar at the left side. The thing is, it is probably going to require a bit of rework of the widths for the various elements of the content area to make room for the image.

You need to create the image and then upload it to the media library in your dashboard and post the URL of that image here.

How wide were you wanting to go with the image?
aimango · Member · Jan 18, 2012 at 7:35 am
Copy link
Okay, I havent finalized what my image will be, but here’s the uploaded file:
http://aimango.files.wordpress.com/2012/01/border.png

It’s 12px wide.
thesacredpath · Member · Jan 18, 2012 at 7:38 am
Copy link
Alright, let me play with that a little and see what I can do.
thesacredpath · Member · Jan 18, 2012 at 7:50 am
Copy link
See what you thing of this. I had to take 20px off the width of the side
```
#sidebar {
background: url("http://aimango.files.wordpress.com/2012/01/border.png") no-repeat scroll left top transparent;
padding-left: 34px;
width: 280px;
}
```
If you don’t use a different background color in the image, you might want to make the it a PNG with a transparent background. If you want to shift the image down, we can do that as well.

No items found.