<HTML>
<HEAD>
<TITLE>Re: [Plone-UI] Custom CSS for different portlet types?</TITLE>
</HEAD>
<BODY>
<FONT FACE="Verdana, Helvetica, Arial"><SPAN STYLE='font-size:10.0px'>Right, maybe try this?<BR>
<BR>
<a href="http://www.atblabs.com/jquery.corners.html">http://www.atblabs.com/jquery.corners.html</a><BR>
<BR>
<BR>
<BR>
<BR>
On 2/26/09 1:22 AM, &quot;Espen Moe-Nilssen&quot; &lt;espen@medialog.no&gt; wrote:<BR>
<BR>
</SPAN></FONT><BLOCKQUOTE><FONT FACE="Verdana, Helvetica, Arial"><FONT SIZE="4"><SPAN STYLE='font-size:12.0px'>I dont have proper rounded corners on my subskins product <a href="http://plone.org/products/subskins-iii/releases/1.0%20beta">http://plone.org/products/subskins-iii/releases/1.0%20beta</a> , 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.<BR>
<BR>
= If someone can make a new file to put in the subskinsiii_portlets folder<BR>
<BR>
<BR>
&nbsp;<BR>
</SPAN></FONT><SPAN STYLE='font-size:10.0px'><BR>
Den 25. feb. 2009 kl. 21.58 skrev Veda Williams:<BR>
<BR>
</SPAN></FONT><BLOCKQUOTE><FONT FACE="Verdana, Helvetica, Arial"><SPAN STYLE='font-size:10.0px'> Excellent!<BR>
&nbsp;<BR>
&nbsp;Since you&#8217;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. <BR>
&nbsp;<BR>
&nbsp;If you&#8217;re using omelette, you&#8217;d go to: yourbuildout/omelette/plone/app/portlets/portlets/configure.zcml.<BR>
&nbsp;<BR>
&nbsp;It&#8217;s always best to be sure that you&#8217;ve got the right code.<BR>
&nbsp;<BR>
&nbsp;Same goes for plone.app.layout --&gt; it&#8217;s in yourbuildout/eggs/plone.app.layout[some version number]/plone/app/layout/ or via omelette it is: yourbuildout/omelette/plone/app/layout/<BR>
&nbsp;<BR>
&nbsp;I&#8217;d recommend grabbing the omelette egg if you possibly can &#8212; saves a lot of hunting and pecking, though really plain old symlinks will do the trick. <BR>
&nbsp;<BR>
&nbsp;- Veda<BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;On 2/25/09 12:51 PM, &quot;erik kulvinskas&quot; &lt;vaporboy@gmail.com&gt; wrote:<BR>
&nbsp;<BR>
&nbsp;<BR>
</SPAN></FONT><BLOCKQUOTE><FONT FACE="Verdana, Helvetica, Arial"><SPAN STYLE='font-size:10.0px'>Veda, <BR>
&nbsp;<BR>
&nbsp;OK i used the ID of the Portlet and that seems to work. I do have a <BR>
&nbsp;question though on portlets. I skinned the News portlet no problem. I <BR>
&nbsp;have a news.pt file and in my configure.zcml i have the following <BR>
&nbsp;lines: <BR>
&nbsp;<BR>
&nbsp;    &lt;interface <BR>
&nbsp;        interface=&quot;.interfaces.IThemeSpecific&quot; <BR>
&nbsp;        type=&quot;zope.publisher.interfaces.browser.IBrowserSkinType&quot; <BR>
&nbsp;        name=&quot;external&quot; <BR>
&nbsp;        /&gt; <BR>
&nbsp;<BR>
&nbsp;        &lt;include package=&quot;plone.app.portlets&quot; /&gt; <BR>
&nbsp;                &lt;plone:portletRenderer portlet=&quot;plone.app.portlets.portlets.news.INewsPortlet&quot; <BR>
&nbsp;   template=&quot;templates/news.pt&quot; <BR>
&nbsp;   layer=&quot;.interfaces.IThemeSpecific&quot; <BR>
&nbsp;   /&gt; <BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;Do all of the portlets use the same syntax? In other words, can i copy <BR>
&nbsp;and paste the portletrenderer lines above and just rename iNewsPortlet <BR>
&nbsp;to IEventsPortlet (if i were doing the events portlet). If not, where <BR>
&nbsp;do i find the information i need to make sure i call the portlet <BR>
&nbsp;correctly in the configure.zcml? <BR>
&nbsp;<BR>
&nbsp;Thanks! <BR>
&nbsp;<BR>
&nbsp;-erik <BR>
&nbsp;<BR>
&nbsp;On Wed, Feb 25, 2009 at 12:49 PM, vedaw (via Nabble) <BR>
&nbsp;&lt;ml-user+36195-1628119807@... <a href="http://n2.nabble.com/user/SendEmail.jtp?type=node&node=2386038&i=0">&lt;http://n2.nabble.com/user/SendEmail.jtp?type=node&amp;node=2386038&amp;i=0&gt;</a> <a href="http://n2.nabble.com/user/SendEmail.jtp?type=node&amp;node=2386038&amp;i=0">&lt;http://n2.nabble.com/user/SendEmail.jtp?type=node&amp;amp;node=2386038&amp;amp;i=0&gt;</a> &nbsp;&gt; wrote: <BR>
&nbsp;<BR>
&nbsp;&gt; Ok, I understand you now. Interesting solution, I'm accustomed to using <BR>
&nbsp;&gt; sprites, but this is certainly an extra twist. <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; Why does specificity in your stylesheets based on the ID of the portlet, not <BR>
&nbsp;&gt; work? For example: <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; .portletRSS .dialog .content, <BR>
&nbsp;&gt; .portletRSS .dialog .t, <BR>
&nbsp;&gt; .portletRSS .dialog .b, <BR>
&nbsp;&gt; .portletRSS .dialog .b div { <BR>
&nbsp;&gt;  background:transparent url(dialog2-blue-800x1600.png) no-repeat top right; <BR>
&nbsp;&gt;  _background-image:url(dialog2-blue.gif); <BR>
&nbsp;&gt; } <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; .portlet-news .dialog .content, <BR>
&nbsp;&gt; .portlet-news .dialog .t, <BR>
&nbsp;&gt; .portlet-news .dialog .b, <BR>
&nbsp;&gt; .portlet-news .dialog .b div { <BR>
&nbsp;&gt;  background:transparent url(different swappable PNG here or maybe <BR>
&nbsp;&gt; coordinates of the first image where the area is a different color header); <BR>
&nbsp;&gt; } <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; Are you combining all of the different colored PNGs into a single image, or <BR>
&nbsp;&gt; do you have more than one PNG? <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; BTW, I don't understand your issue with transparency -- you are using a PNG, <BR>
&nbsp;&gt; right? Either you can use PNG8 to get IE6 to behave, or there is also an <BR>
&nbsp;&gt; add-on you can use to do it with javascript: <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; <a href="http://plone.org/products/products-easyaspiie">http://plone.org/products/products-easyaspiie</a><BR>
&nbsp;&gt; <BR>
&nbsp;&gt; Glad to hear you're looking forward to my book (I assume you mean the <BR>
&nbsp;&gt; skinning book?), but I should warn you that it won't dive into CSS tricks <BR>
&nbsp;&gt; like you're asking here. I'll leave that for the CSS geeks in the world. :) <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; It's going to be geared more towards a &quot;get your hands dirty, here are the <BR>
&nbsp;&gt; tools and theming gotchas to worry about&quot; than anything. It's also more for <BR>
&nbsp;&gt; beginners, so if you're already working on the filesystem comfortably, there <BR>
&nbsp;&gt; may not be much the book does give you... <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; Practical Plone, the other book, *does* have something for everyone, IMO. <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; Cheers, <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; - Veda <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; On 2/25/09 11:02 AM, &quot;erik kulvinskas&quot; &lt;vaporboy@...&gt; wrote: <BR>
&nbsp;&gt; <BR>
&nbsp;&gt;&gt; <BR>
&nbsp;&gt;&gt; All, thanks for your responses but i AM developing on the file system. I <BR>
&nbsp;&gt;&gt; have <BR>
&nbsp;&gt;&gt; change the portlet code because A, the method i am using for rounded <BR>
&nbsp;&gt;&gt; corners <BR>
&nbsp;&gt;&gt; is different from how Plone does things. B, the method i am using is much <BR>
&nbsp;&gt;&gt; simpler using divs instead of dl's, dt's, etc etc. <BR>
&nbsp;&gt;&gt; <BR>
&nbsp;&gt;&gt; Instead of using custom css for every portlet color, i figured it would be <BR>
&nbsp;&gt;&gt; easier to call the css and just switch out the single image i am using for <BR>
&nbsp;&gt;&gt; the rounded corners depending on the portlet i am in (news, rss, etc) . <BR>
&nbsp;&gt;&gt; You <BR>
&nbsp;&gt;&gt; can find the method i am using here: <BR>
&nbsp;&gt;&gt; <a href="http://www.schillmania.com/content/projects/even-more-rounded-corners/">http://www.schillmania.com/content/projects/even-more-rounded-corners/</a><BR>
&nbsp;&gt;&gt; <BR>
&nbsp;&gt;&gt; Oh, and implementing rounded corners WITH transparent curves is not a <BR>
&nbsp;&gt;&gt; trivial thing in the standard build-out of plone. i have a gradient <BR>
&nbsp;&gt;&gt; background and need rounded corners to look properly. So, many of the <BR>
&nbsp;&gt;&gt; methods that exist out there that have 'rounded corners' work ONLY if you <BR>
&nbsp;&gt;&gt; background is solid that the corner resides on. The above method is the <BR>
&nbsp;&gt;&gt; one <BR>
&nbsp;&gt;&gt; i found that works quite nicely <BR>
&nbsp;&gt;&gt; <BR>
&nbsp;&gt;&gt; Veda, thanks for the info on the links and tutorials, i have poured <BR>
&nbsp;&gt;&gt; through <BR>
&nbsp;&gt;&gt; those, i have about every plone/zope book out there (waiting for yours to <BR>
&nbsp;&gt;&gt; be <BR>
&nbsp;&gt;&gt; available) and i 'get' the file system development. <BR>
&nbsp;&gt;&gt; <BR>
&nbsp;&gt;&gt; Erik <BR>
&nbsp;&gt;&gt; <BR>
&nbsp;&gt;&gt; <BR>
&nbsp;&gt;&gt; <BR>
&nbsp;&gt;&gt; vedaw wrote: <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; It sounds like you've started working through the ZMI to do skinning, <BR>
&nbsp;&gt;&gt;&gt; which <BR>
&nbsp;&gt;&gt;&gt; is an OK place to start until you get the concepts down. You will have <BR>
&nbsp;&gt;&gt;&gt; trouble moving things around via the ZMI, at which point you should start <BR>
&nbsp;&gt;&gt;&gt; looking at filesystem development. <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; In the meantime... Rene is correct in saying that this can be done <BR>
&nbsp;&gt;&gt;&gt; trivially <BR>
&nbsp;&gt;&gt;&gt; using only CSS and the CSS hooks that Plone portlets give you by default. <BR>
&nbsp;&gt;&gt;&gt; Make the changes to your ploneCustom.css, make sure that your portal_css <BR>
&nbsp;&gt;&gt;&gt; is <BR>
&nbsp;&gt;&gt;&gt; in debug mode ( <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; <a href="http://plone.org/documentation/how-to/how-to-make-your-css-changes-take-effe">http://plone.org/documentation/how-to/how-to-make-your-css-changes-take-effe</a><BR>
&nbsp;&gt;&gt;&gt; ct-instantly), and you should see the updates. <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; There's no need for variables / calling of CSS, etc. Plone already knows <BR>
&nbsp;&gt;&gt;&gt; about ploneCustom.css, so it should be pretty straightforward. <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; I'm somewhat biased, but there's a great theming chapter in the new <BR>
&nbsp;&gt;&gt;&gt; Practical Plone book if you need some step-by-step assistance: <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; <a href="http://www.packtpub.com/practical-plone-3-beginners-guide-to-building-powerf">http://www.packtpub.com/practical-plone-3-beginners-guide-to-building-powerf</a><BR>
&nbsp;&gt;&gt;&gt; ul-websites/ <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; Cheers, <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; - Veda <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; On 2/25/09 7:55 AM, &quot;erik kulvinskas&quot; &lt;vaporboy@...&gt; wrote: <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt;&gt; I am trying to create a custom color header for each type of portlet <BR>
&nbsp;&gt;&gt;&gt;&gt; type <BR>
&nbsp;&gt;&gt;&gt;&gt; within my theme. I have created some custom css in my ploneCustom.css <BR>
&nbsp;&gt;&gt;&gt;&gt; (&lt;theme&gt;/skins/theme_styles) for my theme using a rounded corner <BR>
&nbsp;&gt;&gt;&gt;&gt; technique <BR>
&nbsp;&gt;&gt;&gt;&gt; and it looks great. What i would like to do, for example, is have the <BR>
&nbsp;&gt;&gt;&gt;&gt; news <BR>
&nbsp;&gt;&gt;&gt;&gt; portlets have a grey header and RSS portlets to have an orange header, <BR>
&nbsp;&gt;&gt;&gt;&gt; etc. <BR>
&nbsp;&gt;&gt;&gt;&gt; So for the news portlet, i have a custom news.pt file that i am loading <BR>
&nbsp;&gt;&gt;&gt;&gt; within my theme and i THINK i have to do the following: <BR>
&nbsp;&gt;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt;&gt; 1) set some sort of variable in my news.pt file such as 'portletColor <BR>
&nbsp;&gt;&gt;&gt;&gt; string:grey' <BR>
&nbsp;&gt;&gt;&gt;&gt; 2) separate out the rounded corners css into a separate css file <BR>
&nbsp;&gt;&gt;&gt;&gt; 3) call that css file within my news.pt and pass that variable to the <BR>
&nbsp;&gt;&gt;&gt;&gt; css <BR>
&nbsp;&gt;&gt;&gt;&gt; so <BR>
&nbsp;&gt;&gt;&gt;&gt; that the particular image it calls is the one that i have set as a <BR>
&nbsp;&gt;&gt;&gt;&gt; variable <BR>
&nbsp;&gt;&gt;&gt;&gt; in the news.pt file. <BR>
&nbsp;&gt;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt;&gt; So here are my questions: <BR>
&nbsp;&gt;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt;&gt; 1) am i thinking of this correctly? <BR>
&nbsp;&gt;&gt;&gt;&gt; 2) if so, what type of file do i save this ccs as? a .pt or .dtml <BR>
&nbsp;&gt;&gt;&gt;&gt; 3) where do i call this css from? browser/templates/blah.css.dtml(.pt) <BR>
&nbsp;&gt;&gt;&gt;&gt; ?? <BR>
&nbsp;&gt;&gt;&gt;&gt; 4) how do i pass the variable value from the news.pt to the css and then <BR>
&nbsp;&gt;&gt;&gt;&gt; have the css render that value when it gets called? <BR>
&nbsp;&gt;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt;&gt; I hope i have not been too confusing. <BR>
&nbsp;&gt;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt;&gt; thanks, <BR>
&nbsp;&gt;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt;&gt; -erik <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; _______________________________________________ <BR>
&nbsp;&gt;&gt;&gt; UI mailing list <BR>
&nbsp;&gt;&gt;&gt; UI@... <BR>
&nbsp;&gt;&gt;&gt; <a href="http://lists.plone.org/mailman/listinfo/ui">http://lists.plone.org/mailman/listinfo/ui</a><BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt;&gt;&gt; <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; _______________________________________________ <BR>
&nbsp;&gt; UI mailing list <BR>
&nbsp;&gt; UI@... <BR>
&nbsp;&gt; <a href="http://lists.plone.org/mailman/listinfo/ui">http://lists.plone.org/mailman/listinfo/ui</a><BR>
&nbsp;&gt; <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; ________________________________ <BR>
&nbsp;&gt; This email is a reply to your post @ <BR>
&nbsp;&gt; <a href="http://n2.nabble.com/Custom-CSS-for-different-portlet-types--tp2384432p2385719.html">http://n2.nabble.com/Custom-CSS-for-different-portlet-types--tp2384432p2385719.html</a><BR>
&nbsp;&gt; You can reply by email or by visting the link above. <BR>
&nbsp;&gt; <BR>
&nbsp;&gt; <BR>
&nbsp;<BR>
&nbsp;<BR>
<HR ALIGN=LEFT SIZE="3" WIDTH="300">View this message in context: Re: [Plone-UI] Custom CSS for different portlet types? <a href="http://n2.nabble.com/Custom-CSS-for-different-portlet-types--tp2384432p2386038.html">&lt;http://n2.nabble.com/Custom-CSS-for-different-portlet-types--tp2384432p2386038.html&gt;</a> <BR>
&nbsp;Sent from the User Interface &amp; Design mailing list archive <a href="http://n2.nabble.com/User-Interface---Design-f293357.html">&lt;http://n2.nabble.com/User-Interface---Design-f293357.html&gt;</a>  at Nabble.com.<BR>
&nbsp;<BR>
&nbsp;<BR>
<HR ALIGN=CENTER SIZE="3" WIDTH="95%"></SPAN></FONT><SPAN STYLE='font-size:10.0px'><FONT FACE="Monaco, Courier New">_______________________________________________<BR>
&nbsp;UI mailing list<BR>
&nbsp;UI@lists.plone.org<BR>
&nbsp;<a href="http://lists.plone.org/mailman/listinfo/ui">http://lists.plone.org/mailman/listinfo/ui</a><BR>
&nbsp;<BR>
</FONT></SPAN></BLOCKQUOTE><SPAN STYLE='font-size:10.0px'><FONT FACE="Monaco, Courier New"><BR>
&nbsp;<BR>
</FONT><FONT FACE="Verdana, Helvetica, Arial">_______________________________________________<BR>
UI mailing list<BR>
UI@lists.plone.org<BR>
<a href="http://lists.plone.org/mailman/listinfo/ui">http://lists.plone.org/mailman/listinfo/ui</a><BR>
&nbsp;<BR>
</FONT></SPAN></BLOCKQUOTE><SPAN STYLE='font-size:10.0px'><FONT FACE="Verdana, Helvetica, Arial"><BR>
<BR>
</FONT></SPAN></BLOCKQUOTE><SPAN STYLE='font-size:10.0px'><FONT FACE="Verdana, Helvetica, Arial"><BR>
</FONT></SPAN>
</BODY>
</HTML>