PageLines Support

wudza

I try to add lower border corner like it shown on pic here:

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; 
}

rangelone

May we have a link to your site?

wudza

http://xn--80aaaaxa5azaveei3dwa3j.xn--p1ai/

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.

wudza

2 Danny

Done:

http://imgur.com/gvLpd

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.

wudza

here we go:

http://xn--80aaaaxa5azaveei3dwa3j.xn--p1ai/wp-content/uploads/2012/02/footer_border_v1.jpg

catrina

Please try this CSS:

div#column-main div.mcolumn {border-bottom-image: url('http://xn--80aaaaxa5azaveei3dwa3j.xn--p1ai/wp-content/uploads/2012/02/footer_border_v1.jpg');}

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.

wudza

I added this code to pagelines-customize/style.css
But, nothing changed (

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)

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?

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)?

wudza

I use Safari (then also test in Firefox)

Have you trying to add round corners to the image around the header

You mean to make them corners in an grafic editor program?

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).

wudza

Dear all
Does any1 have an idea why the bottom border is smaller then upper (under menu) - url link >HERE<
Is there any way to fix it (make them equal)?

catrina

Please add this CSS to Custom Code > Custom CSS to make the bottom border as wide as the upper border:

div.entry_wrap {width: 846px;}

wudza

Hm,
site view changed to that:

I've commented this code to return page to normal view
Any other ideas ?

rangelone

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

wudza

Many thanks 2 rangelone
fixed

css style code:

/* <div class="mcolumn-pad" style="padding-left: 0px; padding-right: 0px;"> */
.mcolumn-pad {padding-left: 0px !important;
padding-right: 0px !important;
}

simple_mama

Glad @rangleone was able to help! if you consider this topic resolved, please "accept" an answer. Thanks!

PageLines Support

Useful Links

Howdy, Stranger!

Categories

In this Discussion

Tagged

Weekly Karma