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

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


By the way, along the same lines, but not transparent, is a JQuery solution
to rounded corners:

http://www.atblabs.com/jquery.corners.html


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