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

erik kulvinskas vaporboy at gmail.com
Fri Feb 27 18:22:02 UTC 2009


Veda, et al,

Thanks so much for all of your help, i was able to customize the portlets
and use their class names to make the headers different colors using the
method i wished to use... works wonderfully!

-erik



vedaw wrote:
> 
> 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
> 
> 
> 
> _______________________________________________
> UI mailing list
> UI at lists.plone.org
> http://lists.plone.org/mailman/listinfo/ui
> 
> 

-- 
View this message in context: http://n2.nabble.com/Custom-CSS-for-different-portlet-types--tp2384432p2397272.html
Sent from the User Interface & Design mailing list archive at Nabble.com.





More information about the UI mailing list