[Plone-UI] Custom CSS for different portlet types?

Veda Williams veda at onenw.org
Wed Feb 25 19:48:19 UTC 2009

Ok, I understand you now. Interesting solution, I'm accustomed to using
sprites, but this is certainly an extra twist.

Why does specificity in your stylesheets based on the ID of the portlet, not
work? For example:

.portletRSS .dialog .content,
.portletRSS .dialog .t,
.portletRSS .dialog .b,
.portletRSS .dialog .b div {
 background:transparent url(dialog2-blue-800x1600.png) no-repeat top right;

.portlet-news .dialog .content,
.portlet-news .dialog .t,
.portlet-news .dialog .b,
.portlet-news .dialog .b div {
 background:transparent url(different swappable PNG here or maybe
coordinates of the first image where the area is a different color header);

Are you combining all of the different colored PNGs into a single image, or
do you have more than one PNG?

BTW, I don't understand your issue with transparency -- you are using a PNG,
right? Either you can use PNG8 to get IE6 to behave, or there is also an
add-on you can use to do it with javascript:


Glad to hear you're looking forward to my book (I assume you mean the
skinning book?), but I should warn you that it won't dive into CSS tricks
like you're asking here. I'll leave that for the CSS geeks in the world. :)

It's going to be geared more towards a "get your hands dirty, here are the
tools and theming gotchas to worry about" than anything. It's also more for
beginners, so if you're already working on the filesystem comfortably, there
may not be much the book does give you...

Practical Plone, the other book, *does* have something for everyone, IMO.


- Veda

On 2/25/09 11:02 AM, "erik kulvinskas" <vaporboy at gmail.com> wrote:

> All, thanks for your responses but i AM developing on the file system. I have
> change the portlet code because A, the method i am using for rounded corners
> is different from how Plone does things. B, the method i am using is much
> simpler using divs instead of dl's, dt's, etc etc.
> Instead of using custom css for every portlet color, i figured it would be
> easier to call the css and just switch out the single image i am using for
> the rounded corners depending on the portlet i am in (news, rss, etc) . You
> can find the method i am using here:
> http://www.schillmania.com/content/projects/even-more-rounded-corners/
> Oh, and implementing rounded corners WITH transparent curves is not a
> trivial thing in the standard build-out of plone. i have a gradient
> background and need rounded corners to look properly. So, many of the
> methods that exist out there that have 'rounded corners' work ONLY if you
> background is solid that the corner resides on. The above method is the one
> i found that works quite nicely
> Veda, thanks for the info on the links and tutorials, i have poured through
> those, i have about every plone/zope book out there (waiting for yours to be
> available) and i 'get' the file system development.
> Erik
> vedaw wrote:
>> It sounds like you've started working through the ZMI to do skinning,
>> which
>> is an OK place to start until you get the concepts down. You will have
>> trouble moving things around via the ZMI, at which point you should start
>> looking at filesystem development.
>> In the meantime... Rene is correct in saying that this can be done
>> trivially
>> using only CSS and the CSS hooks that Plone portlets give you by default.
>> Make the changes to your ploneCustom.css, make sure that your portal_css
>> is
>> in debug mode ( 
>> http://plone.org/documentation/how-to/how-to-make-your-css-changes-take-effe
>> ct-instantly), and you should see the updates.
>> There's no need for variables / calling of CSS, etc. Plone already knows
>> about ploneCustom.css, so it should be pretty straightforward.
>> I'm somewhat biased, but there's a great theming chapter in the new
>> Practical Plone book if you need some step-by-step assistance:
>> http://www.packtpub.com/practical-plone-3-beginners-guide-to-building-powerf
>> ul-websites/
>> Cheers,
>> - Veda
>> On 2/25/09 7:55 AM, "erik kulvinskas" <vaporboy at gmail.com> wrote:
>>> I am trying to create a custom color header for each type of portlet type
>>> within my theme. I have created some custom css in my ploneCustom.css
>>> (<theme>/skins/theme_styles) for my theme using a rounded corner
>>> technique
>>> and it looks great. What i would like to do, for example, is have the
>>> news
>>> portlets have a grey header and RSS portlets to have an orange header,
>>> etc.
>>> So for the news portlet, i have a custom news.pt file that i am loading
>>> within my theme and i THINK i have to do the following:
>>> 1) set some sort of variable in my news.pt file such as 'portletColor
>>> string:grey'
>>> 2) separate out the rounded corners css into a separate css file
>>> 3) call that css file within my news.pt and pass that variable to the css
>>> so
>>> that the particular image it calls is the one that i have set as a
>>> variable
>>> in the news.pt file.
>>> So here are my questions:
>>> 1) am i thinking of this correctly?
>>> 2) if so, what type of file do i save this ccs as? a .pt or .dtml
>>> 3) where do i call this css from? browser/templates/blah.css.dtml(.pt) ??
>>> 4) how do i pass the variable value from the news.pt to the css and then
>>> have the css render that value when it gets called?
>>> I hope i have not been too confusing.
>>> thanks,
>>> -erik
>> _______________________________________________
>> UI mailing list
>> UI at lists.plone.org
>> http://lists.plone.org/mailman/listinfo/ui

More information about the UI mailing list