[Pro] Webyep - GalleryContainer td

Im styling my WP gallery elements, as per below:

.WebYepGalleryContainer td

vertical-align= top

padding= 10px 10px 12px 10px

border-right= solid #000000 10px

border-bottom= solid #000000 15px

I wish for the border-right & border-bottom to be ‘transparent’ to enable you to see web page background. How is this done please? Like this…?

border-right= alpha (100% opacity) 10px

border-bottom= (100% opacity)  15px

or

border-right= transparent 10px

border-bottom= transparent  15px

Many thanks

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Does anyone know? Max is away ATM so I’m relying on someone else here please to help :slight_smile:

I simply want the border value to be transparent!

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you don’t want borders at the right and bottom, then don’t set them. If you set the border color to transparent that will also work. But whatever color is directly beneath the border area is what will show through. I’m not aware of any way to further cut through underlying elements and expose the page background, if that’s what you’re asking.

Walter

On Sep 20, 2012, at 12:12 PM, Mr worm wrote:

Im styling my WP gallery elements, as per below:

.WebYepGalleryContainer td

vertical-align= top

padding= 10px 10px 12px 10px

border-right= solid #000000 10px

border-bottom= solid #000000 15px

I wish for the border-right & border-bottom to be ‘transparent’ to enable you to see web page background. How is this done please? Like this…?

border-right= alpha (100% opacity) 10px

border-bottom= (100% opacity)  15px

or

border-right= transparent 10px

border-bottom= transparent  15px

Many thanks

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walt

Here a very quick example:

Its the border right & bottom (in black #000000) that I want to be transparent, or have at least some spacing around the white frames to make them appear like mini polaroids!

It only black to show you what I mean. Is there ANY way to add this kinda of spacing?

Also how would you write the .css to make the color transparent? As I already have?

thanks

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just add some margin-bottom and margin-right to add the spacing. To make a transparent border, you can write border-color: transparent.

Walter

On Sep 21, 2012, at 10:02 AM, Mr worm wrote:

Hi Walt

Here a very quick example:

HugeDomains.com

Its the border right & bottom (in black #000000) that I want to be transparent, or have at least some spacing around the white frames to make them appear like mini polaroids!

It only black to show you what I mean. Is there ANY way to add this kinda of spacing?

Also how would you write the .css to make the color transparent? As I already have?

thanks

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok Walt, I added what I think is correct & still I’m not getting the desired look!?? :frowning:

.WebYepGalleryContainer td

vertical-align= top
padding= 8px 8px 10px 8px
border-right= border-color: transparent 5px
border-bottom= border-color: transparent 10px
margin-right= 5px
margin-bottom= 10px

Does a margin display like this in WP? (outside)

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The issue is you have some mangled CSS syntax.

Try this:

.WebYetGalleryContainer td {
	vertical-align: top;
	padding: 8px 8px 10px 8px;
	border-right: solid transparent 5px;
	border-bottom: solid transparent 10px;
	margin-right: 5px;
	margin-bottom: 10px;
}

Or were you indicating the settings to me from the Freeway Style Editor?

Walter

On Sep 21, 2012, at 10:47 AM, Mr worm wrote:

Ok Walt, I added what I think is correct & still I’m not getting the desired look!?? :frowning:

HugeDomains.com

.WebYepGalleryContainer td

vertical-align= top
padding= 8px 8px 10px 8px
border-right= border-color: transparent 5px
border-bottom= border-color: transparent 10px
margin-right= 5px
margin-bottom= 10px

Does a margin display like this in WP? (outside)

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

One more thing – this set of CSS will give you double the spacing you’re going for. Either use the transparent border OR the margin, but not both, if all you want is 5px between images.

Walter

On Sep 21, 2012, at 10:54 AM, Walter Lee Davis wrote:

The issue is you have some mangled CSS syntax.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yeah, they were from the ‘extended’ style editor window for:

.WebYetGalleryContainer td

I’ll try yours, thanks

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok, I thought so!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, just remember to translate back from CSS to Freeway:

: = separation between Name and Value, not added to either.
; = terminator for Value, not added to the value field
everything left of the : = Name
everything right of the : = Value

Wlater

On Sep 21, 2012, at 10:58 AM, Mr worm wrote:

Yeah, they were from the ‘extended’ style editor window for:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Right, I’ve just tried both variations Walt. Still same result?

No margin around white area using margin-right :5px etc, or a solid transparent 5px gap when I use border-right & that value!? Hmmm…

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

But it showed when the values were:

border-right: solid #000000 10px

border-bottom: solid #000000 15px

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The border color transparent is showing the background color (white) through. You need to investigate the background-clip attribute (and this is going to devolve into a vendor-prefixed hell of multiple declarations). http://www.w3.org/TR/css3-background/#the-background-clip

To space floated elements 5px apart, all you need is to set:

margin: 0 5px 5px 0;

and skip the border altogether. Margin lives outside of the border.

On Sep 21, 2012, at 11:20 AM, Mr worm wrote:

But it showed when the values were:

border-right: solid #000000 10px

border-bottom: solid #000000 15px

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok, thank you Walt! Especially on a Friday…

Enjoy your weekend

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options