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

Espen Moe-Nilssen espen at medialog.no
Thu Feb 26 09:22:14 UTC 2009


I dont have proper rounded corners on my subskins product http:// 
plone.org/products/subskins-iii/releases/1.0%20beta , and people keep  
asking for it, so if anyone can be bothered to make some (gonna need  
it with jquery (?) as the background colors changes.

= If someone can make a new file to put in the subskinsiii_portlets  
folder



Den 25. feb. 2009 kl. 21.58 skrev Veda Williams:

> 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-- 
>> tp2384432p2385719.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--tp2384432p2386038.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
>
> _______________________________________________
> 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/20090226/c395e721/attachment.html>


More information about the UI mailing list