GMENU with semi transparent PNG's

[Iztok Kham]

Hello list!

I have a GMENU with buttons (they are all the same) with drop shadow
over a background that is a bit different for each of them (there is a
gradient on the background).

At the moment I have generic (ie. without text/name in it) images for
regular button, rollover button and active button. They all (except for
the active one) have a drop shadow. When I use semi transparent PNGs for
button background drop shadow is correctly applied, only background is
not transparent anymore.

You can see what is rendered and what I need to come out here:
http://www.studiokham.com/t3-probs/gmenu-dropshadow/

What I would like to know is: is it possible to generate a GMENU with
semi transparent PNGs.

If that is not possible, is it then possible to define a background for
every menu entry.
- First example: for the first entry use <image1.png> for background,
for second <image2.png> and so on.
- Second example: use coordinates 0,0 to 160,46 from <big_bkg_image.png>
for first entry, coordinates 170,0 to 330,46 for second and so on (x
offset is in my case consistant - all buttons are of same width, so
first offest would be <entry_no>x<butt_width>).

I would actually prefer the second example solution as I can create a
single image for background and then apply button with drop shadow over
it (and render link name over that). This way it would be pretty easy to
maintain background consistency.


Is there a TypoScript way to achieve this?

-- Iztok
_______________________________________________
TYPO3-english mailing list
TYPO3-english@...
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english

[Rudy Gnodde (WIND Internet)]

Hello Iztok,

Iztok Kham wrote:

> I have a GMENU with buttons (they are all the same) with drop shadow
> over a background that is a bit different for each of them (there is a
> gradient on the background).
>
> At the moment I have generic (ie. without text/name in it) images for
> regular button, rollover button and active button. They all (except for
> the active one) have a drop shadow. When I use semi transparent PNGs for
> button background drop shadow is correctly applied, only background is
> not transparent anymore.
>
> You can see what is rendered and what I need to come out here:
> http://www.studiokham.com/t3-probs/gmenu-dropshadow/
>
> What I would like to know is: is it possible to generate a GMENU with
> semi transparent PNGs.

It is currently not possible to create alpha transparent PNG's with TYPO3.

> If that is not possible, is it then possible to define a background for
> every menu entry.
> - First example: for the first entry use <image1.png> for background,
> for second <image2.png> and so on.
> - Second example: use coordinates 0,0 to 160,46 from <big_bkg_image.png>
> for first entry, coordinates 170,0 to 330,46 for second and so on (x
> offset is in my case consistant - all buttons are of same width, so
> first offest would be <entry_no>x<butt_width>).
>
> I would actually prefer the second example solution as I can create a
> single image for background and then apply button with drop shadow over
> it (and render link name over that). This way it would be pretty easy to
> maintain background consistency.
>
>
> Is there a TypoScript way to achieve this?

Yes, it is possible to get this effect. If you read TypoScript by
Example (chapter 7.8). They describe something similar which you can use.

However, why not use a TMENU and just set the alpha transparent PNG's as
background with CSS?

Regards,

Rudy
_______________________________________________
TYPO3-english mailing list
TYPO3-english@...
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english

[Iztok Kham]

Hello!
>> What I would like to know is: is it possible to generate a GMENU with
>> semi transparent PNGs.
> It is currently not possible to create alpha transparent PNG's with
> TYPO3.
Thought so ... grin :(

>> Is there a TypoScript way to achieve this?
> I would actually prefer the second example solution as I can create a
> single image for background and then apply button with drop shadow
> over it (and render link name over that). This way it would be pretty
> easy to maintain background consistency.
> Yes, it is possible to get this effect. If you read TypoScript by
> Example (chapter 7.8). They describe something similar which you can use.
Thanks, I will take a look at it.

> However, why not use a TMENU and just set the alpha transparent PNG's
> as background with CSS?
There is something called IE ... and I would like to nake it fool-proof

Thanks again, I will report back on how I do ...

BTW: Does anybody know why sometimes GMENU buttons don't get rendered
correctly (sometimes the first entry just loses its text)?

-- Iztok
_______________________________________________
TYPO3-english mailing list
TYPO3-english@...
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english

[Rudy Gnodde (WIND Internet)]

Hello Iztok,

Iztok Kham wrote:
> There is something called IE ... and I would like to nake it fool-proof
Only IE6 has problems with alpha transparent PNG's, but there are ways
around this. You can use "filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.png');"
for IE6 in your CSS. If you're worried about validity of your CSS you
can use <!--[if lte IE 6]>...<![endif]--> to only add specific styles
(or anything else) for IE6 or lower.

Regards,

Rudy
_______________________________________________
TYPO3-english mailing list
TYPO3-english@...
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english

[Pim Broens - Redkiwi]

> ...
> for IE6 in your CSS. If you're worried about validity of your CSS you
> can use <!--[if lte IE 6]>...<![endif]--> to only add specific styles
> (or anything else) for IE6 or lower.
> ...

And If you like to do it nice, you could use TS conditions for this. (
http://typo3.org/documentation/document-library/references/doc_core_tsre
f/4.1.0/view/4/1/ ) So no very ugly IE conditions will be visible in
every other browser!

Kind regards,

Pim Broens
_______________________________________________
TYPO3-english mailing list
TYPO3-english@...
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english

[Iztok Kham]

On 5.11.2009 11:48, Rudy Gnodde (WIND Internet) wrote:

> Hello Iztok,
>
> Iztok Kham wrote:
>> There is something called IE ... and I would like to nake it fool-proof
> Only IE6 has problems with alpha transparent PNG's, but there are ways
> around this. You can use "filter:
> progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.png');"
> for IE6 in your CSS. If you're worried about validity of your CSS you
> can use <!--[if lte IE 6]>...<![endif]--> to only add specific styles
> (or anything else) for IE6 or lower.
>

I know this, but the problem is, that I want to have the whole button as
a link, and also I have some drop shadow on text.

Finally I did take a look at TypoScript by Example, as you suggested,
and came up with pretty simple solution. I just used optionSplit for
background image ...
So, now my WORKING solution is:
temp.mainMenu = HMENU
temp.mainMenu {
   wrap = |
   1 = GMENU
   1 {
       NO = 1
     NO {
       XY = 130,46
       quality = 100
       1 = IMAGE
       1 {
          file = fileadmin/templates/base/elements/menu_bg_01.png ||
fileadmin/templates/base/elements/menu_bg_02.png ||
fileadmin/templates/base/elements/menu_bg_03.png |*|
fileadmin/templates/base/elements/menu_bg_04.png
       }
       5 = IMAGE
       5.file = fileadmin/templates/base/elements/menu_button-gr_low.png
       5.transparentBackground = 1
       10 = TEXT
       10 {
         text.field = title
         offset = -5,34
         fontColor = #FFFFFF
         fontFile = fileadmin/templates/base/font/arial.ttf
         fontSize = 14
         niceText = 1
         align = center
         shadow {
           offset=0,0
           color=#FFFFFF
           opacity=15
           blur=50
         }
       }
     }

     RO < .NO
     RO = 1
     RO.5.file = fileadmin/templates/base/elements/menu_button-gr_high.png
     RO.10.offset = -5,24

     ACT < .RO
     ACT.5.file = fileadmin/templates/base/elements/menu_button-or_high.png
     ACT = 1

     CUR < .ACT
     CUR = 1

   }
}

Many thanks for your help!

However, I do have another problem with GMENU which I experienced before
(actually always with GMENU) ... sometimes the text on the first entry
(button, if you like) doesn't get rendered and I am left with only the
button background (in footer menu, which is only a TMENU /no graphics/
text is properly displayed) ... strange! I am going to do some googling
on tis subject and if I find a soluition I will post it here.


-- Iztok
_______________________________________________
TYPO3-english mailing list
TYPO3-english@...
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english