[Plone-UI] Custom CSS for different portlet types?
Espen Moe-Nilssen
espen at medialog.no
Thu Feb 26 09:04:13 UTC 2009
I have missed some of this this tread, but you might want to look at
easyasPILE plone product
Den 25. feb. 2009 kl. 21.51 skrev erik kulvinskas:
> 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 ...> 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?
> Sent from the User Interface & Design mailing list archive at
> Nabble.com.
> _______________________________________________
> 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/2b08282f/attachment.html>
More information about the UI
mailing list