Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

custom tumblr tags to create theme options for border color and border image

custom tumblr tags to create theme options for border color and border image

Problem

I'm making a little tumblr theme and I'm hoping to create a customizable option for the user where they can either choose a border-top color and/or border-image ( and upload their own to the tumblr CDN ). I've got it to work with either/or, but not both.

In other words, I'd like for the default theme to come with a

border-top: #somecolor;

but they have the option to do

border-image: url('funtime.png');

The code should make it clear what I'm trying to do; it's just not working for some reason. Maybe a pro could help me out?



body {
    border-top: 64px solid {color:top border};
    border-image: url('{image:top border}') 25% 25% 25% 25% repeat; 
}

I don't really know what else to do to get this to work. This way just gives the a blank space waiting to be occupied by an uploaded image. I take away the image option and the color works and vice versa.

Problem courtesy of: davidpm4

Solution

You can't have both sadly, its either color or image. Example: http://jsbin.com/kobicodu/1/edit

As border-image was the last property declared and has a valid image it overrides the shorthand border-top color.

More info: http://css-tricks.com/understanding-Border-image/

Solution courtesy of: mikedidthis

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

custom tumblr tags to create theme options for border color and border image

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×