|
|
|
|
erik kulvinskas
()
|
|
||||||||||||
|
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 |
||||||||||||||
|
|
René Fleschenberg
()
|
|
||||||||||||
|
Hi,
erik kulvinskas: > 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. This should be trivially solvable with just plain CSS: AFAIK, the default portlet templates already set a CSS ID that contains the portlet type. So all you have to do is write some CSS that looks like this: #portlet-news .portletHeader { background-color: grey; } _______________________________________________ UI mailing list [hidden email] http://lists.plone.org/mailman/listinfo/ui |
||||||||||||||
|
|
Espen Moe-Nilssen
()
|
|
||||||||||||
|
The portlets header/footer also come with some stuff (left and right) to use for your round corners That said: round corners sometimes gets messed up in IE, so you might have to do a little hacking and be sure to specify width / height of your rounded corners images. >Hi, > >erik kulvinskas: > >> 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. > >This should be trivially solvable with just plain CSS: AFAIK, the default >portlet templates already set a CSS ID that contains the portlet type. So >all you have to do is write some CSS that looks like this: > >#portlet-news .portletHeader { > background-color: grey; >} > > > >_______________________________________________ >UI mailing list >[hidden email] >http://lists.plone.org/mailman/listinfo/ui -- Espen Moe-Nilssen Grieg Medialog AS _______________________________________________ UI mailing list [hidden email] http://lists.plone.org/mailman/listinfo/ui |
||||||||||||||
|
|
vedaw
()
|
|
||||||||||||
|
In reply to this post
by erik kulvinskas
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" <[hidden email]> 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 [hidden email] http://lists.plone.org/mailman/listinfo/ui |
||||||||||||||
|
|
erik kulvinskas
()
|
|
|
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
()
|
|
||||||||||||
|
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" <[hidden email]> 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" <[hidden email]> 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 >> [hidden email] >> http://lists.plone.org/mailman/listinfo/ui >> >> _______________________________________________ UI mailing list [hidden email] http://lists.plone.org/mailman/listinfo/ui |
||||||||||||||
|
|
vedaw
()
|
|
||||||||||||
|
In reply to this post
by erik kulvinskas
By the way, along the same lines, but not transparent, is a JQuery solution
to rounded corners: http://www.atblabs.com/jquery.corners.html On 2/25/09 11:02 AM, "erik kulvinskas" <[hidden email]> 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" <[hidden email]> 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 >> [hidden email] >> http://lists.plone.org/mailman/listinfo/ui >> >> _______________________________________________ UI mailing list [hidden email] http://lists.plone.org/mailman/listinfo/ui |
||||||||||||||
|
|
erik kulvinskas
()
|
|
|||||||||||
|
In reply to this post
by vedaw
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) <[hidden email]> 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@...> 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@...> 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@... >>> http://lists.plone.org/mailman/listinfo/ui >>> >>> > > _______________________________________________ > UI mailing list > UI@... > 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. > > |
|||||||||||||
|
|
vedaw
()
|
|
||||||||||||
|
Some javascript/style in this post has been disabled (why?)
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" <[hidden email]> wrote: Veda, _______________________________________________ UI mailing list [hidden email] http://lists.plone.org/mailman/listinfo/ui |
||||||||||||||
|
|
Espen Moe-Nilssen
()
|
|
||||||||||||
|
In reply to this post
by erik kulvinskas
Some javascript/style in this post has been disabled (why?)
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, _______________________________________________ UI mailing list [hidden email] http://lists.plone.org/mailman/listinfo/ui |
||||||||||||||
|
|
Espen Moe-Nilssen
()
|
|
||||||||||||
|
In reply to this post
by vedaw
Some javascript/style in this post has been disabled (why?)
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. Den 25. feb. 2009 kl. 21.58 skrev Veda Williams: Excellent! _______________________________________________ UI mailing list [hidden email] http://lists.plone.org/mailman/listinfo/ui |
||||||||||||||
|
|
vedaw
()
|
|
||||||||||||
|
Some javascript/style in this post has been disabled (why?)
http://www.atblabs.com/jquery.corners.html On 2/26/09 1:22 AM, "Espen Moe-Nilssen" <[hidden email]> 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. _______________________________________________ UI mailing list [hidden email] http://lists.plone.org/mailman/listinfo/ui |
||||||||||||||
|
|
erik kulvinskas
()
|
|
||||||||||||
|
In reply to this post
by vedaw
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
|
||||||||||||||
|
|
jackeelo
()
|
|
||||||||||||
|
In reply to this post
by vedaw
I work with Erik and we got this working on some but not all of the portlets. I am getting an error on rendering the portlet for the search and review portlets. My questions is could there be additional files that should be changed and added our theme based on which portlet we are customizing? Thanks - Jackee
|
||||||||||||||
| Free Embeddable Forum Powered by Nabble | Help |