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

Veda Williams veda at onenw.org
Wed Feb 25 20:58:52 UTC 2009


Excellent!

Since you¹re working on the filesystem, you can find the syntax for the
other portlets by going to yourbuildout/eggs/plone.app.portlets[some version
number]/plone/app/portlets/portlets/configure.zcml.

If you¹re using omelette, you¹d go to:
yourbuildout/omelette/plone/app/portlets/portlets/configure.zcml.

It¹s always best to be sure that you¹ve got the right code.

Same goes for plone.app.layout --> it¹s in
yourbuildout/eggs/plone.app.layout[some version number]/plone/app/layout/ or
via omelette it is: yourbuildout/omelette/plone/app/layout/

I¹d recommend grabbing the omelette egg if you possibly can ‹ saves a lot of
hunting and pecking, though really plain old symlinks will do the trick.

- Veda


On 2/25/09 12:51 PM, "erik kulvinskas" <vaporboy at gmail.com> wrote:

> Veda, 
> 
> OK i used the ID of the Portlet and that seems to work. I do have a
> question though on portlets. I skinned the News portlet no problem. I
> have a news.pt file and in my configure.zcml i have the following
> lines: 
> 
>     <interface 
>         interface=".interfaces.IThemeSpecific"
>         type="zope.publisher.interfaces.browser.IBrowserSkinType"
>         name="external"
>         /> 
> 
>         <include package="plone.app.portlets" />
>                 <plone:portletRenderer
> portlet="plone.app.portlets.portlets.news.INewsPortlet"
>    template="templates/news.pt"
>    layer=".interfaces.IThemeSpecific"
>    /> 
> 
> 
> Do all of the portlets use the same syntax? In other words, can i copy
> and paste the portletrenderer lines above and just rename iNewsPortlet
> to IEventsPortlet (if i were doing the events portlet). If not, where
> do i find the information i need to make sure i call the portlet
> correctly in the configure.zcml?
> 
> Thanks! 
> 
> -erik 
> 
> On Wed, Feb 25, 2009 at 12:49 PM, vedaw (via Nabble)
> <ml-user+36195-1628119807 at ...
> <http://n2.nabble.com/user/SendEmail.jtp?type=node&node=2386038&i=0> > wrote:
> 
>> > 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;
>> >  _background-image:url(dialog2-blue.gif);
>> > } 
>> > 
>> > .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:
>> > 
>> > http://plone.org/products/products-easyaspiie
>> > 
>> > 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.
>> > 
>> > Cheers, 
>> > 
>> > - Veda 
>> > 
>> > 
>> > 
>> > On 2/25/09 11:02 AM, "erik kulvinskas" <vaporboy at ...> 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 ...> 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 ... 
>>>> >>> http://lists.plone.org/mailman/listinfo/ui
>>>> >>> 
>>>> >>> 
>> > 
>> > _______________________________________________
>> > UI mailing list
>> > UI at ... 
>> > http://lists.plone.org/mailman/listinfo/ui
>> > 
>> > 
>> > ________________________________
>> > This email is a reply to your post @
>> > 
>> http://n2.nabble.com/Custom-CSS-for-different-portlet-types--tp2384432p238571
>> 9.html
>> > You can reply by email or by visting the link above.
>> > 
>> > 
> 
> 
> View this message in context: Re: [Plone-UI] Custom CSS for different portlet
> types? 
> <http://n2.nabble.com/Custom-CSS-for-different-portlet-types--tp2384432p238603
> 8.html> 
> Sent from the User Interface & Design mailing list archive
> <http://n2.nabble.com/User-Interface---Design-f293357.html>  at Nabble.com.
> 
> 
> _______________________________________________
> UI mailing list
> UI at lists.plone.org
> http://lists.plone.org/mailman/listinfo/ui


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.plone.org/pipermail/plone-ui/attachments/20090225/6520bef5/attachment.html>


More information about the UI mailing list