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

Veda Williams veda at onenw.org
Thu Feb 26 17:57:25 UTC 2009


Right, maybe try this?

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




On 2/26/09 1:22 AM, "Espen Moe-Nilssen" <espen at medialog.no> wrote:

> 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>
>>> <http://n2.nabble.com/user/SendEmail.jtp?type=node&amp;node=2386038&amp;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--tp2384432p2385
>>>> 719.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--tp2384432p2386
>>> 038.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/a438ea65/attachment.html>


More information about the UI mailing list