Mr_worm1
September 20, 2012, 4:12pm
1
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 listhttp://freewaytalk.net/person/options
Mr_worm1
September 21, 2012, 11:17am
2
Does anyone know? Max is away ATM so I’m relying on someone else here please to help
I simply want the border value to be transparent!
Worm
freewaytalk mailing listhttp://freewaytalk.net/person/options
waltd
September 21, 2012, 1:34pm
3
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 listhttp://freewaytalk.net/person/options
freewaytalk mailing listhttp://freewaytalk.net/person/options
Mr_worm1
September 21, 2012, 2:02pm
4
Hi Walt
Here a very quick example:
http://www.cmlmarketing.com/2012/webyep/gallerymax/index.php
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 listhttp://freewaytalk.net/person/options
waltd
September 21, 2012, 2:10pm
5
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:
http://www.cmlmarketing.com/2012/webyep/gallerymax/index.php
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 listhttp://freewaytalk.net/person/options
freewaytalk mailing listhttp://freewaytalk.net/person/options
Mr_worm1
September 21, 2012, 2:47pm
6
Ok Walt, I added what I think is correct & still I’m not getting the desired look!??
http://www.cmlmarketing.com/2012/webyep/gallerymax/index.php
.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 listhttp://freewaytalk.net/person/options
waltd
September 21, 2012, 2:54pm
7
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!??
http://www.cmlmarketing.com/2012/webyep/gallerymax/index.php
.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 listhttp://freewaytalk.net/person/options
freewaytalk mailing listhttp://freewaytalk.net/person/options
waltd
September 21, 2012, 2:58pm
8
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 listhttp://freewaytalk.net/person/options
Mr_worm1
September 21, 2012, 2:58pm
9
Yeah, they were from the ‘extended’ style editor window for:
.WebYetGalleryContainer td
I’ll try yours, thanks
Worm
freewaytalk mailing listhttp://freewaytalk.net/person/options
Mr_worm1
September 21, 2012, 2:59pm
10
Ok, I thought so!
freewaytalk mailing listhttp://freewaytalk.net/person/options
waltd
September 21, 2012, 3:01pm
11
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 listhttp://freewaytalk.net/person/options
Mr_worm1
September 21, 2012, 3:18pm
12
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 listhttp://freewaytalk.net/person/options
Mr_worm1
September 21, 2012, 3:20pm
13
But it showed when the values were:
border-right: solid #000000 10px
border-bottom: solid #000000 15px
Worm
freewaytalk mailing listhttp://freewaytalk.net/person/options
waltd
September 21, 2012, 3:43pm
14
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). CSS Backgrounds and Borders Module Level 3
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 listhttp://freewaytalk.net/person/options
freewaytalk mailing listhttp://freewaytalk.net/person/options
Mr_worm1
September 21, 2012, 4:29pm
15
Ok, thank you Walt! Especially on a Friday…
Enjoy your weekend
Worm
freewaytalk mailing listhttp://freewaytalk.net/person/options
