how to style CC V2 table (auto listing)

Hi,
I'm quite happy with a new V2 features.
However I think it would be good to have some kind of "Load CSS file" action
with connections too.

Anyway I found that all <td>'s in output are styled with class="td-data"
and didn't found the way to use it.

I pasted:

.td-data {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: #579b0f;
    background-color: yellow;
    padding: 1px 1px 1px 1px;}     

into CSS of the template and expected to set the cell style...
But nothing happens...

I know CSS stands for Cascading... and maybe it is overwritten somewhere.

Could you please tell us all what is the easiest way to format/style cell of the output data table in CC V2?

Regards
Henryk

Hi Henryk,

There is a Load CSS File [GH] action here though you probably don't need it.

It looks as though you are talking about the Email layout. In that case you need to add the CSS to the email template so that it is sent with the email.

Paste this in the beginning of the email template textarea - with the Rich Text Editor off!

<style type='text/css'>
.td-data {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: #579b0f;
    background-color: yellow;
    padding: 1px 1px 1px 1px;
}
</style>

Bob

Dear Bob,

It is ChronoConnectivity enquiry.
IMHO there is no way of applying your own CSS into CC V2 auto listing using component resources.
OK you can switch to Custom listing and paste it into the header, but it is different matter.

However CC styles its own autolisting naming the cell classes according to the pattern:
class="td-data td-modelname_fieldname"
For example table column 'username' witin the model 'usr' has cells of class:
class='td-data td-usr_username'

And that should be the way. Create its own CSS styling of these classes and paste it somewhere..
I am in that point.
Having my own definition of CC class 'td-data...'
Like:

    <style type='text/css'>
    .td-data td-usr_username {
        border-width: 1px;
        padding: 1px;
        border-style: inset;
        border-color: #579b0f;
        background-color: yellow;
        padding: 1px 1px 1px 1px;
    }
    </style>

Maybe I named it wrong, maybe the place in CSS of the Joomla template is wrong, anyway it does not work.

So the question is how to apply your own style in to CC V2 auto listings ?

Henryk

Hi bighen,

A bit messy but I got this to work by putting a Custom HTML module on the listing page and putting the CSS into it. Note I had to make the selector a bit more specific

<style type='text/css'>
table.adminlist td.td-cb {
  border-width: 1px;
  padding: 1px;
  border-style: inset;
  border-color: #579b0f;
  background-color: yellow;
  padding: 1px 1px 1px 1px;
}
</style>

Bob

Wow, that's the way :-)
If it works does not matter if it's messy or not.
I'm gonna add some empty module including just the css

Thank you for your help.
Henryk
PS Max done V2 so well with rich Multitable feature. It's a pity CSS is on its own...

Hi Guys,

I have made some interface improvements for the listing in the new version, hopefully will be out soon!🙂

You may also use the "ChronoConnectivity task" action under the "Form wizard" in V4 to load your list through a form event and of course use a "load CSS" action in your form.

Don't forget to configure the Connectivity action in the form by adding your connection name and select the task executed.

I'm also looking for ideas on any suggested missing features, please contact me directly through the "Contact Us" page if you have any🙂

Best regards,
Max

Hi Guys,

I have made some interface improvements for the listing in the new version, hopefully will be out soon!🙂

You may also use the "ChronoConnectivity task" action under the "Form wizard" in V4 to load your list through a form event and of course use a "load CSS" action in your form.

Don't forget to configure the Connectivity action in the form by adding your connection name and select the task executed.

I'm also looking for ideas on any suggested missing features, please contact me directly through the "Contact Us" page if you have any🙂

Best regards,
Max

Thank you for mentioning this because I don't think I would of seen it there. One problem I was having is that every time I try to use the pagination or the search; it stops using the form and reverts back to using the chronoconnectivity connection. So any CSS that I done on the form is no longer present.

Hi,

You may do it using the task control then, that would launch the form event even when you are browsing the connection pages, here is how (but that's for the save, you will have to use the list instead):

http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=12&t=76210

Regards,
Max