Hi all,
I am using CC v6 for showing data on my website. By default the style of my table is "ui selectable table". I would like to style my table using CSS, but cannot find a way to get it working. I tried several things: added a new CSS element to my CC v6 connection, tried the column classes.
Can someone explain to me where add/change the CSS code to style my table view?
Hi
You can add a class for your table: "ui selectable table myclass"
then you can add a view with css element with a content like this:
table.myclass {background-color: red}
If it's dont work:
table.myclass {background-color: red !important}
You can also use the table id:
table#myid {background-color: red !important}
Bye
Hi,
Where exactly can I give the table created with "VIEW / Lists / Table" its own ID (#idname)?
And how do I get a "tfoot" area at the bottom of the table?
:-)
Yes. You can modify your css class by Id
table#table_id {background:red !important;} Nota: !important is not always necessary. It depends of your template.
The table Id is the Unit Name of your Table List (in grey).
You also Add a class by Behavior/Add Custom HTML Tags/Attribute Name=class, Attribute value=your_class
So, you can modify your css class by
table.your_class {background:red !important;}
In fact, you can modify directly some attributes with "Add Custom HTML Tags", but sometime it don't works...
You can use the Development tool of your navigator to know precisely the CSS of your template, or select an element - a word, a picture, etc - on your front page and use Inspector tool (Google Chrome, Firefox).
I don't understand what you mean by that. To do this, I don't have to create a table with "table" but "manually" in "Custom Code"?
Sorry , My English is very bad.
And I've not read very well: my last answer was for Chronoforms7 !!! 😡
But my first anwer was good.
With CC6:
1 - you create a Table by List/Table with a provider for the datas, for exemple Name : my_table
2 - You give a Class of your table by Class : my class (you can keep default "ui selectable table", but is more easy to replace by "my_class" to override all rules).
3 - You create a CSS view by Custom/CSS, for exemple Name : my_css
4 - In this CSS element, you write some rules like: table.my_class {background:red;}
5 - In index event (or event what you need the table), you call {view:my_css} before call the view of your table {view:my_table}. Sure, before all, you must have a data provider (by a Read Data or a PHP Element building an array) to place in my_table.
I don't think that List Table create a tfoot tag, but you can built one by table.my_class tr:last-child {color:blue}
Christian (France)
Your Id is the Name of the Element Table, so "articles_list" in your example...
You can do in a CSS View:
table#articles_list {background:red;}
may be table#articles_list {background:red !important;} to override all previous rules
Other way:
Class=your_class
in a CSS View:
table.your_class {background:red;}
mh...doesn't work for me as it should ...
so is correct:
<tabel id="articles_ist" class="ui selectable table state small datenfreigabe unstackable">
Give only one class to your table: Class: myclass
Then, in css view:
table.myclass {background:red;}
It works for me...
