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

erik kulvinskas vaporboy at gmail.com
Wed Feb 25 20:51:04 UTC 2009


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 n2.nabble.com> 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: http://n2.nabble.com/Custom-CSS-for-different-portlet-types--tp2384432p2386038.html
Sent from the User Interface & Design mailing list archive at Nabble.com.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.plone.org/pipermail/plone-ui/attachments/20090225/0abd8f9f/attachment.html>


More information about the UI mailing list