Jump to content
Sign in to follow this  
wudza

footer border Customizing

Recommended Posts

wudza

I try to add lower border corner like it shown on pic here: HUHSF.jpg I implemented this code, but there's no effect click url here:

/* ========Change lower border(horizontal ruler) color================ */
	hr, .fpost, .clip_box, .widget-title, #buddypress-page .item-list li, .metabar a, #morefoot .widget-title, #site #dsq-content h3, .post.fpost .entry, #soapbox .fboxinfo, #primary-nav #nav_row, .fpost.sticky {
	/*border: double;*//*this makes 2x border around the page body*/
	border-bottom-right-image: url('http://xn--80aaaaxa5azaveei3dwa3j.xn--p1ai/wp-content/uploads/2012/02/zavit_gr_footer.png') !important;
	border-color: #808000 !important;
	}

Share this post


Link to post
Share on other sites
Rob
May we have a link to your site?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
wudza
http://xn--80aaaaxa5azaveei3dwa3j.xn--p1ai/

Share this post


Link to post
Share on other sites
Danny
Hi Wudza, I give this a go and I couldn't get it to work unfortunately with border-image. You could create an image with the image you want already in place and the rest transparent, is the width of your site and then assign that image with CSS to your navigation and your footer. If you create the image, post a link here and Ill see if I can get it to work.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
catrina
I think it would be better if you uploaded the image to your Media Library so that it's immediately available on your site (in case it gets deleted on imgur). Also, I can't get the full image URL to use in the CSS since it's not provided by imgur.

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
wudza
here we go: http://xn--80aaaaxa5azaveei3dwa3j.xn--p1ai/wp-content/uploads/2012/02/footer_border_v1.jpg

Share this post


Link to post
Share on other sites
catrina
Please try this CSS: [code]div#column-main div.mcolumn {border-bottom-image: url('http://xn--80aaaaxa5azaveei3dwa3j.xn--p1ai/wp-content/uploads/2012/02/footer_border_v1.jpg');}[/code] By the way, for the top border you will need to flip the image vertically and horizontally in an image program so that the flourish is switched to the far left.

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
wudza
I added this code to pagelines-customize/style.css But, nothing changed (

Share this post


Link to post
Share on other sites
catrina
I believe the code isn't compatible with all browsers. I searched and there are no border image CSS properties that will let you only add a top border and a bottom border. For example, this is border image CSS that generally works with all browsers: http://www.w3schools.com/cssref/css3_pr_border-image.asp (there is no way to specify top and bottom)

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
wudza
Back on the road ) At least it shows it'self on the upper border))) Great thanx to catrina! but I can't fix the params I need to make it fully visible ( I've exeperimented from "30 30 round" to "1 1 round" -- but can't get full border image behind the header (( P.s. Also it shows the white background of border image (even if transperent background is saved on original pic) - is there the way to fix it?

Share this post


Link to post
Share on other sites
catrina
Have you trying to add round corners to the image around the header? Also, what browser are you using to view your site (I believe Internet Explorer doesn't support transparent PNGs)?

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
wudza
I use Safari (then also test in Firefox) [quote]Have you trying to add round corners to the image around the header[/quote] You mean to make them corners in an grafic editor program?

Share this post


Link to post
Share on other sites
catrina
I meant, using CSS to make the corners (since you were using the 30 30 round property - I assume you were using some kind of code).

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
wudza
Dear all Does any1 have an idea why the bottom border is smaller then upper (under menu) - url link [url="http://xn--80aaaaxa5azaveei3dwa3j.xn--p1ai"]>HERE<[/url] Is there any way to fix it (make them equal)?

Share this post


Link to post
Share on other sites
catrina
Please add this CSS to Custom Code > Custom CSS to make the bottom border as wide as the upper border: [code]div.entry_wrap {width: 846px;}[/code]

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
wudza
Hm, site view changed to that: [IMG]http://i.imgur.com/oxB81.jpg[/IMG] I've commented this code to return page to normal view Any other ideas ?

Share this post


Link to post
Share on other sites
Rob
You'll need to adjust the content area width. There's padding around it. If you use Firebug for Firefox, you'll see it's just slightly smaller than the branding area (where the menu is). http://www.getfirebug.com

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
wudza
Many thanks 2 [b]rangelone[/b] fixed css style code: [quote]/*
*/ .mcolumn-pad {padding-left: 0px !important; padding-right: 0px !important; } [/quote]

Share this post


Link to post
Share on other sites
Jenny
Glad @rangleone was able to help! if you consider this topic resolved, please "accept" an answer. Thanks!

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

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  

×