One more slight adjustment, I forgot to explicitly turn off the background
image for IE (odd that it somehow seems to be working anyway). In any
case...
<div class="bannerBox">
<div id="logoshadow"
style="background-image:url(logo-shadow.png);_background-image:none;filter:p
rogid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo-shadow.png',
sizingMethod='crop');">
<a href="/main.do" id="logoimage"
style="background-image:url(transparent-logo.png);_background-image:none;fil
ter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent-logo.png
', sizingMethod='crop');">
</a>
</div>
</div>
Kenneth M. Kolano
Enterprise Architecture Operations
908-423-4241
WS1B-51B
-----Original Message-----
From: Kolano, Kenneth M.
Sent: Wednesday, September 14, 2005 5:12 PM
To: Kolano, Kenneth M.; 'roller-dev@incubator.apache.org'
Subject: RE: Roller 2.0 colors
Doh. The whole point was to enable color changes through the CSS, which I
broke in my revision below. Here is a correction...
HTML...
<div class="bannerBox">
<div id="logoshadow"
style="background-image:url(logo-shadow.png);filter:progid:DXImageTransform.
Microsoft.AlphaImageLoader(src='logo-shadow.png', sizingMethod='crop');">
<a href="/main.do" id="logoimage"
style="background-image:url(transparent-logo.png); filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent-logo.png
', sizingMethod='crop');">
</a>
</div>
</div>
CSS...
.bannerBox {
height: 78px;
width: 100%;
background:#f00;
}
#logoshadow {
position: relative;
top: 15px;
left: 15px;
width: 165px;
height: 50px;
background:transparent !important;
}
#logoimage {
width: 159px;
height: 44px;
display:block;
background: #600 !important;
cursor:pointer; /*Make IE show correct cursor for link*/
}
Kenneth M. Kolano
Enterprise Architecture Operations
908-423-4241
WS1B-51B
-----Original Message-----
From: Kolano, Kenneth M.
Sent: Wednesday, September 14, 2005 5:06 PM
To: 'roller-dev@incubator.apache.org'
Subject: RE: Roller 2.0 colors
Hrm, let's see...
Why it doesn't work...
-Your spacer.png is a 32bit PNG, which IE will display as grey. You need to
use an 8bit transparent PNG, or a GIF for IE to properly display it as
transparent. Even then IE flubs up, and only displays the proper cursor over
the transparent portions of the image. After playing with this a bit, its
probably better to just set the background as "transparent" and then
explicitly set the cursor as "pointer"
-You have set the shadows background as #600, when you probably want it to
be transparent.
-You don't set the background color for non-IE browsers.
To not put the file paths in the stylesheet...
-You need to add the styles using style attributes, the revisions below show
this. This really isn't a great thing to do though, since then it's
difficult to change it with a stylesheet. If there is any way to leave the
paths in the CSS, that should be preferred.
Could the images be bumped up a level on the directory hierarchy, so that it
appeared at /theme/, and was shared across things? Or perhaps moved to
reside in a /theme/shared/ directory?
Other suggestions...
-Don't use absolute positioning. That will get flubbed up if there needs to
be additional headers added to the top or side of the page (i.e. something
that wraps around rollers current output). You want this relatively
positioned inside of "bannerBox".
-Replace <div id="logoimage"> with an <a> so that the logo can link to the
home page.
Revised HTML (paths used here were just convenient for my use, and will need
adjustment)...
<div class="bannerBox">
<div id="logoshadow" style="background:url(logo-shadow.png) top
left;_background:transparent
repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo-s
hadow.png', sizingMethod='crop');">
<a href="/main.do" id="logoimage" style="background: #600
url(transparent-logo.png) top left;_background: #600; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent-logo.png
', sizingMethod='crop');">
</a>
</div>
</div>
Revised CSS...
.bannerBox {
height: 78px;
width: 100%;
background:#f00;
}
#logoshadow {
position: relative;
top: 15px;
left: 15px;
width: 165px;
height: 50px;
}
#logoimage {
width: 159px;
height: 44px;
display:block;
cursor:pointer; /*Make IE show correct cursor for link*/
}
Kenneth M. Kolano
Enterprise Architecture Operations
908-423-4241
WS1B-51B
-----Original Message-----
From: Dave Johnson [mailto:[EMAIL PROTECTED]
Sent: Wednesday, September 14, 2005 4:09 PM
To: roller-dev@incubator.apache.org
Cc: Kenneth M. Kolano
Subject: Re: Roller 2.0 colors
Kenneth,
I just committed code for this new approach and it works well for
Firefox, Mozilla and Safari. It looks nice! I tried your suggested fix
for IE, but as yet I have not gotten it to work.
If you're interested in taking a look the files are here:
<http://svn.apache.org/viewcvs.cgi/incubator/roller/branches/
roller_2.0/web/theme>
The HTML for the banner is in banner.jsp
The IE specific stuff is in roller.css
And I added spacer.png, which is a 1px transparent PNG
Any suggestions what I might be doing wrong and how to avoid hardcoding
the context path into that IE specific call?
- Dave
On Sep 14, 2005, at 12:23 PM, Kolano, Kenneth M. wrote:
> Two suggestions regarding the Roller logo graphic...
>
> 1. Consider separating the logo from the background gradient.
>
> 2. Consider making the colored area around the "R", and the text
> "oller"
> transparent. That would allow the color to be modified using a CSS
> background color, rather than forcing separate logo's for each color.
>
> These changes would significantly reduce the amount of graphics
> wrangling
> needed to modify these Roller styles. Unfortunately, IE 6's poor
> support for
> PNG transparency makes using this slightly harder than it should be.
> Something similar to the CSS below can address that though.
>
> .bannerBox{
> background:#600 url(/theme/tan/logo.png) no-repeat;
> width:192px;
> height:76px;
> }
>
> /*IE Transparency Fix*/
> * html .bannerBox
> background:#600 url(/images/transparent.png) repeat; /*Hides
> non-transparent background / Keeps element clickable if it is a link*/
>
> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/theme/
> tan/lo
> go.png', sizingMethod='crop'); /*Allows IE to support transparency*/
> }
>
>
>
> Kenneth M. Kolano
> Enterprise Architecture Operations
> 908-423-4241
> WS1B-51B
>
>
> -----Original Message-----
> From: Dave Johnson [mailto:[EMAIL PROTECTED]
> Sent: Wednesday, September 14, 2005 11:45 AM
> To: roller-dev@incubator.apache.org
> Subject: Roller 2.0 colors
>
>
> By providing a colors.css file and some background images, it is
> possible to customize the color-scheme of Roller 2.0's editor/admin UI.
> Here are some examples of different looks:
>
> The current default:
> http://www.rollerweblogger.org/main.do?look=tan
>
> The one we'll use on blogs.sun.com:
> http://www.rollerweblogger.org/main.do?look=sun
>
> An example blue theme that is not quite complete:
> http://www.rollerweblogger.org/main.do?look=blue
>
> I'm happy with the tan look as the default. Anybody object? Anybody
> like to suggest different default colors?
>
> - Dave
>
>
>
>
>
> -----------------------------------------------------------------------
> -------
> Notice: This e-mail message, together with any attachments, contains
> information of Merck & Co., Inc. (One Merck Drive, Whitehouse Station,
> New Jersey, USA 08889), and/or its affiliates (which may be known
> outside the United States as Merck Frosst, Merck Sharp & Dohme or MSD
> and in Japan, as Banyu) that may be confidential, proprietary
> copyrighted and/or legally privileged. It is intended solely for the
> use of the individual or entity named on this message. If you are not
> the intended recipient, and have received this message in error,
> please notify us immediately by reply e-mail and then delete it from
> your system.
> -----------------------------------------------------------------------
> -------
>
------------------------------------------------------------------------------
Notice: This e-mail message, together with any attachments, contains
information of Merck & Co., Inc. (One Merck Drive, Whitehouse Station, New
Jersey, USA 08889), and/or its affiliates (which may be known outside the
United States as Merck Frosst, Merck Sharp & Dohme or MSD and in Japan, as
Banyu) that may be confidential, proprietary copyrighted and/or legally
privileged. It is intended solely for the use of the individual or entity named
on this message. If you are not the intended recipient, and have received this
message in error, please notify us immediately by reply e-mail and then delete
it from your system.
------------------------------------------------------------------------------
