Jump to content
Sign in to follow this  
joel

Border around Feature

Recommended Posts

joel

Trying to get a border or even better a drop shadow on the features So Far I've tried the following and none seem to do anything. I've been using firebug but still stumped #feature {border: 2px solid #CCCCCC } -------------------------------------------- .fmedia {border: 2px solid #CCCCCC } -------------------------------------------- #feature { moz-box-shadow: 0px 0px 10px 2px #000000; webkit-box-shadow: 0px 0px 10px 2px #000000; box-shadow: 0px 0px 10px 2px #F7bc00; } --------------------------------------------

Share this post


Link to post
Share on other sites
Rob
This might help you by putting a grey shadow on the bottom and right sides: [code].fset_height, #feature_slider .text-bottom .fmedia .dcol-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { border-bottom: 2px solid #CCCCCC; border-right: 2px solid #CCCCCC; height: 300px; }[/code] You can add border-top and border-left of course, but what happens is that you get a border above the shaded text area overlaying the image and that's rather ugly. I'm pretty sure you could replace the color with an image to create a fuzzier border.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
joel
Thanks but that didn't work for some reason. I'm putting it into the "custom code" --> "custom css" part of the pagelines feature settings.

Share this post


Link to post
Share on other sites
Rob
Yes, it should be in Custom Code > CSS Rules. It worked using Firebug (http://www.getfirebug.com) which helped identify the particular CSS elements to change and provides the means to test. However, there's always the risk that conflicting CSS may prevent the tested CSS from working in reality. Do you have Firebug?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
joel
Yes but it tells me the code is the area in bold below
[b]
[/b]

Share this post


Link to post
Share on other sites
Rob
Okay, try the method I proposed, with border-right, border-bottom in the dcol-pad. You can see the code for it in my earlier snippet. [code]#feature_slider .dcol-pad[/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
joel
Okay, I must be close but something must be missing I've tried this: #feature_slider .dcol-pad { border-bottom: 2px solid #CCCCCC; border-right: 2px solid #CCCCCC; height: 300px; } and #feature_slider .text-bottom .fmedia .dcol-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { border-bottom: 2px solid #CCCCCC; border-right: 2px solid #CCCCCC; height: 300px; } and #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { border-bottom: 2px solid #CCCCCC; border-right: 2px solid #CCCCCC; height: 300px; } and #feature_slider .text-none .fmedia .dcol-pad { border-bottom: 2px solid #CCCCCC; border-right: 2px solid #CCCCCC; height: 300px;

Share this post


Link to post
Share on other sites
Rob
Any of them working? I'm just wondering if it wouldn't work better to affix a background image to #feature instead of affixing a color, then adding some padding.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
joel
none of them worked :-( I don't know why, wish I did. The image I have is the background image. What would the padding do. I'm just looking for something to frame the feature in so that the feature has some form of border and not just the feature itself.

Share this post


Link to post
Share on other sites
joel
I'm also building this for someone to manage so want to make it as simple as possible for them.

Share this post


Link to post
Share on other sites
Jenny
[code]#feature-area { border: 2px solid #CCCCCC; }[/code] works fine ;)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
pehja
@simple_mama I was trying to put the same code to boxes. And I have tried every code I could find on this forum. But non of the works. Do you know why ? Should it not apply to boxes as well as feature or whatever :-)

Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites
Rob
Try this for boxes (just an example): [code]element.style { border: 1px solid #C00000; display: inline; float: left; margin-right: 10px; padding-right: 2%; width: 30%; }[/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pehja
Thanks @rangelon, but nothing happend

Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites
Danny
Hi Peter, Please do not hijack posts, it causes confusing and doesn't help users searching for answers to their questions, if the answers are in topics discussion a completely different error. Create a new topic and we can assist you.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
pehja
@Danny I dont think this was to hijack anything. But if you wish i will create a new border topic. I find it more usefull to get more help in 1 thread rather than searching in hundrades.. But then again this isn??t my forum so I respect your request.

Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

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  

×