Forums

Hi,
I just started using chronoconnectyvi, I saw the screenshot of the table in this post and let me know how I can customize a table with the title highlighted, color lines alyernati, colored background, etc. ... There are examples or tutorials for this?

Thank you.

Hi anto1762,

Please give an example of the customization you want to do, simple stuff can be done, but heavy customization will need a "repeater" view to have full control over the code generated.

Best regards,
Max

Hi,

[attachment=73180_20170225064022_screenshot-www-probun-com-2017-02-20-13-22-44-png.png][/attachment]

Are you referring to a table like the one above? You can use CSS to change the look and feel of the table. Add a custom CSS file to your template with the code below:

/* CHANGE THE LOOK AND FEEL OF TABLE AND TABLE DATA  - CONNECTIVITY V6 and V5*/
	
	/* CHANGES THE COLOR FOR THE ROWS (ODD / EVEN) v6*/
	table.table tr:nth-child(even) {
    background-color: #eee !important;
    }
    
	table.table tr:nth-child(odd) {
    background-color: #fff !important;
    }   
	
	/* CHANGES THE COLOR FOR THE ROWS (ODD / EVEN) v5*/
	table.table-hover tr:nth-child(even) {
    background-color: #eee !important;
    }
    
	table.table-hover tr:nth-child(odd) {
    background-color: #fff !important;
    }   
	
	
	/* CHANGES THE DEFAULT FONT USED v6*/
	.semanticui-body {
    font-family: "Abel", sans-serif, "" !important;
	}


	/* TABLE AND TABLE DATA v5 and v6*/
    table {
    border-collapse: collapse !important;
    width: 100% !important;
    }
    
	th {
    border: 1px solid #ccc !important;
    padding: 10px !important;
	font-size:14px !important;
	font-weight:700 !important;
	background-color:#003553 !important;
	color:#FFF !important;
    }
	
	thead {
	background-color:#003553 !important;
	color:#FFF !important;
    }
	
	td {
    border: 1px solid #ccc !important;
    padding: 10px !important;
	font-size:13px !important;
    }
    

I hope it helps.

Hi, you can slide up x-axis a table with many columns with parameter overflow-x: auto?
Where do I put the code in css?

Thank you

Hi anto1762,

I'm not sure, this needs to be tested, but you can use any CSS code you want inside a "CSS view", under "Views > Custom > CSS".

Best regards,
Max