Jump to content
Sign in to follow this  
anlinares

Solid Color or Image Border between canvas and background

Recommended Posts

anlinares

Hello! I am very new to wordpress and platform pro. Starting out with a basic blog for my mom to try to learn. Struggling a bit but hoping there is a learning curve! I am trying to figure out how to get a border on the sides between the canvas and the background. Maybe baby steps someone can show me how to put a basic colored line but I'd actually really like to place an image as the border. For instance, ribbon.png or ricrac.png You can check out the site as is at www.ittakesagrandma.com Trying to get a border between the polka dot and white canvas. Thanks for your help!!

Share this post


Link to post
Share on other sites
cshoffmann

Here's how to put a colored border: .canvas #page-canvas { border: 10px #hexcolor solid; } or .canvas #page-canvas { border-left: 10px #hexcolor solid; border-right: 10px #hexcolor solid; } Drop one of those codes into your PP Settings>Custom Code CSS Rules and change the size of the border by changing the 10px to whatever you desire and you can change the color by picking the appropriate hex value on your color desired. Also, you may choose dashed or dotted instead of solid. Here's a screenshot of the first one: http://screencast.com/t/jGHcVBNv4 Here's an article on using images for borders: http://www.css3.info/preview/border-image/ Here's a site for Colors in Hex Values: http://www.theodora.com/html_colors.html

Share this post


Link to post
Share on other sites
anlinares

Thank you, Shaun! The second option for the plain border was exactly what I needed. I was playing around with the css trying to get the image border to work. Tried it a couple of different ways and thought I was on the right track but it doesn't seem to be working. Can you tell me what I'm doing wrong? border-image: url(http://www.ittakesagrandma.com/images/border3.png'>http://www.ittakesagrandma.com/images/border3.png) 30 30 30 30 repeat; I'm now trying to use this image b/c from what I gather from trying to find out how to make this image it will split the image I use into 8 sectors. http://www.ittakesagrandma.com/images/border3.png'>http://www.ittakesagrandma.com/images/border3.png I played with using these images because all I really want to do is have the border along the left and right side, not top or bottom. http://www.ittakesagrandma.com/images/border2.png http://www.ittakesagrandma.com/images/border.png Any advice? I really appreciate your help!

Share this post


Link to post
Share on other sites
catrina

To add an image border to only the left and right sides, you can try this code instead:

border-left-image: url(http://www.ittakesagrandma.com/images/border3.png) 30 30 30 30 repeat;
	border-right-image: url(http://www.ittakesagrandma.com/images/border3.png) 30 30 30 30 repeat;


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
anlinares

Thank you, Catrina. Still isn't working. Can't figure out what I'm doing wrong. I've tried all 3 versions of the border, with and without the number parameters, and in Firefox and Safari. Any suggestions?

Share this post


Link to post
Share on other sites
timlinson

Seems that the border size must be specified. Also, -moz and -webkit are still needed to accomodate firefox/safari/chrome/etc. It's quite wordy and you may want to tweak the settings, but this works from my end: ` .canvas #page-canvas { border-left: 20px; border-right: 20px; -moz-border-image: url(http://www.ittakesagrandma.com/images/border3.png'>http://www.ittakesagrandma.com/images/border3.png'>http://www.ittakesagrandma.com/images/border3.png'>http://www.ittakesagrandma.com/images/border3.png) 20 20 20 20 round round; -webkit-border-image: url(http://www.ittakesagrandma.com/images/border3.png'>http://www.ittakesagrandma.com/images/border3.png'>http://www.ittakesagrandma.com/images/border3.png'>http://www.ittakesagrandma.com/images/border3.png) 20 round round; border-image: url(http://www.ittakesagrandma.com/images/border3.png'>http://www.ittakesagrandma.com/images/border3.png'>http://www.ittakesagrandma.com/images/border3.png'>http://www.ittakesagrandma.com/images/border3.png) 20 20 20 20 round round; } `

Share this post


Link to post
Share on other sites
anlinares

Wow! Not sure what all that code means but it worked. Thanks so much to everyone for the help!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×