Custom CSS for different portlet types?

14 messages Options
Embed this post
Permalink
erik kulvinskas () Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
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 () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
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 () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink

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 () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
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 () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
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@gmail.com> 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@lists.plone.org
http://lists.plone.org/mailman/listinfo/ui
vedaw () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
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 () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
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 () Re: [Plone-UI] Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
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 () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
Some javascript/style in this post has been disabled (why?)
Re: [Plone-UI] Custom CSS for different portlet types? 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" <[hidden email]> 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@... <http://n2.nabble.com/user/SendEmail.jtp?type=node&node=2386038&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@...> 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.
>
>


View this message in context: Re: [Plone-UI] Custom CSS for different portlet types? <http://n2.nabble.com/Custom-CSS-for-different-portlet-types--tp2384432p2386038.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
[hidden email]
http://lists.plone.org/mailman/listinfo/ui


_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui
Espen Moe-Nilssen () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
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,

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@...> 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.
>
>


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 mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui
Espen Moe-Nilssen () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
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.

= 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" <[hidden email]> 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@... <http://n2.nabble.com/user/SendEmail.jtp?type=node&node=2386038&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@...> 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.
>
>


View this message in context: Re: [Plone-UI] Custom CSS for different portlet types? <http://n2.nabble.com/Custom-CSS-for-different-portlet-types--tp2384432p2386038.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
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

_______________________________________________
UI mailing list


_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui
vedaw () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
Some javascript/style in this post has been disabled (why?)
Re: [Plone-UI] Custom CSS for different portlet types? Right, maybe try this?

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.

= 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" <[hidden email]> 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@... <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@...> 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.
 >
 >
 
 

View this message in context: Re: [Plone-UI] Custom CSS for different portlet types? <http://n2.nabble.com/Custom-CSS-for-different-portlet-types--tp2384432p2386038.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
 [hidden email]
 http://lists.plone.org/mailman/listinfo/ui
 

 
_______________________________________________
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 () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
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


vedaw wrote:
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@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@...
> <http://n2.nabble.com/user/SendEmail.jtp?type=node&node=2386038&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@...> 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--tp2384432p238571
>> 9.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--tp2384432p238603
> 8.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@lists.plone.org
> http://lists.plone.org/mailman/listinfo/ui



_______________________________________________
UI mailing list
UI@lists.plone.org
http://lists.plone.org/mailman/listinfo/ui
jackeelo () Re: Custom CSS for different portlet types?
Reply Threaded More More options
Print post
Permalink
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

vedaw wrote:
Right, maybe try this?

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




On 2/26/09 1:22 AM, "Espen Moe-Nilssen" <espen@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@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@...
>>> <http://n2.nabble.com/user/SendEmail.jtp?type=node&node=2386038&i=0>
>>> <http://n2.nabble.com/user/SendEmail.jtp?type=node&node=2386038&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@...> 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--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@lists.plone.org
>>>  http://lists.plone.org/mailman/listinfo/ui
>>>  
>>
>>  
>> _______________________________________________
>> UI mailing list
>> UI@lists.plone.org
>> http://lists.plone.org/mailman/listinfo/ui
>>  
>
>



_______________________________________________
UI mailing list
UI@lists.plone.org
http://lists.plone.org/mailman/listinfo/ui