[Pro] WEBYEP Gallery - Container background styling

Freeway
1

Using the WP Gallery & styling the Gallery (bg container)

.WebYepGalleryContainer td

I want to make the background container colour 50% transparent so that you can see the sites tiled bg behind it as you scoll up/down.

To edit this in the Extended dialog would it be:

NAME: background colour
VALUE: opacity 50% or 0.5

Worm

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

2

If you are creating a new style using the Edit Style dialog, you could add a semi-transparent background a couple of different ways. First, if you care about IE 6 or 7, you will have to jump through way more hoops than I like, tell me if this is important to you. Otherwise, you could use Freeway’s Graphic Background style in the Inspector to do this. With your element selected, first set the Backgroun Color to None. Then click on the Style tab (paintbrush) and open the Graphic Effects segment. Click on the medium-gray square at the left side of the row of style icons, which will open the Background option. Choose a color, then expand the options so you can see the Opacity slider, and move that to your desired opacity.

This will set a semi-transparent PNG as the background image for your HTML box, which will be the most robust (cross browser) way to define this. If you know that the bulk of your audience is using a modern browser, then you could also define a color in RGBA format (Red Green Blue Alpha), although you will need to use the Extended attributes for that in the Edit Style dialog, because Freeway doesn’t provide a native RGBA picker.

Walter

On Aug 20, 2012, at 10:06 AM, Mr worm wrote:

Using the WP Gallery & styling the Gallery (bg container)

.WebYepGalleryContainer td

I want to make the background container colour 50% transparent so that you can see the sites tiled bg behind it as you scoll up/down.

To edit this in the Extended dialog would it be:

NAME: background colour
VALUE: opacity 50% or 0.5

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

3

Thats Walt.

Just tried your first option & doesn’t seem to display?

http://cmlmarketing.com/2012/webyep/gallery2/index.php

Worm

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

4

What should I be seeing? I am not getting any gallery effects on this page.

Walter

On Aug 20, 2012, at 11:49 AM, Mr worm wrote:

Thats Walt.

Just tried your first option & doesn’t seem to display?

http://cmlmarketing.com/2012/webyep/gallery2/index.php

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

5

A tiled background (sea image) & 2 images 230x160 with white text under them.

There is a html item on the page with WP gallery action applied to it, that also has the graphic background set to black with its opacity set at 60% as you said. This is what is not showing?

Worm

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

6

is this the effect you are trying to create

http://www.sophieyershonphotography.co.uk/gallery-links.php?DOC_INST=2#.UDMmEqk99UM

speak soon max

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

7

Hi Max,

I’ve updated the link to show you what I’m after:

http://cmlmarketing.com/2012/webyep/gallery2/index.php

The black (td container) I want to have an opacity of 50%

The grey is just to show the image area.

What the best way to make images auto resize to fit the area I define eg, 230px x 160px?

The effect you have shown is also if interest to me, how is this created please Max?

Also is WP compatible with Showcase? I’ve another post asking this too.

Worm

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

8

Any Ideas anyone please?

Worm

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

9

Having the The black (td container) at 50% opacity, will enable the tiled background to be visible behind gallery, or as page scolls.

If you have sec Max to quickly answer this please I would be most grateful.

Worm

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

10

HI sorry
for the delay but I have been working solidly with no time to raise my head above the parapet

ok to get the 50% opacity you really do need to use a semi transparent png say 5px square and 50% opacity
and you would add it like this to your .WebYepGalleryContainer td style…
just remember to remove the black background colour

As far as the best way to have images scale within a webyep frame as per your example then have a look at the specific tutorial for galleries which is here for download.

http://www.max-izzat.co.uk/gallery/webyep_gallery.zip

below if it comes out correctly is the actual everything done for you including using a base64 image instead of calling in an external png semi transparent image… I did check it and it does work with your example.

  .WebYepGalleryContainer { padding:10px 5px 5px 10px }
  .WebYepGalleryContainer td { padding:20px 20px 10px 20px; vertical-align:top; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1QzM0NDA4M0U0QjQxMUUxODY3NkNCRTkyNTQyNzRBQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1QzM0NDA4NEU0QjQxMUUxODY3NkNCRTkyNTQyNzRBQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVDMzQ0MDgxRTRCNDExRTE4Njc2Q0JFOTI1NDI3NEFCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVDMzQ0MDgyRTRCNDExRTE4Njc2Q0JFOTI1NDI3NEFCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pJ9PqQAAABhJREFUeNpiZGBgaGBAA0wMWACFggABBgA09gCKWzCA9wAAAABJRU5ErkJggg==');) repeat; }
  .WebYepGalleryImage { background-color:#fff; overflow:hidden; width:230px; height:160px }
  .WebYepGalleryImage img { width:244px; height:auto;  }
  .WebYepGalleryImage img:hover { opacity:0.8; filter:alpha(opacity=80); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
  .WebYepGalleryText { color:#fff; font-family:Arial,Helvetica,sans-serif; font-size:11px; text-align:left; margin-top:7px }

all the best Max

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

11

I forgot to say re-upload your images because they have already been scaled and will be the wrong size

all the best max

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

12

Thank you Max, works perfect!

Worm

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