New table css style

Is it possible to have my own table styles.

I would love to add my own styles so clients could define the style of tables easy

Also it would be nice if I could enter my onw css styles for table cells.

Markus


The css entered by SF for the styles is could be optimized to make it smaller (0 instad of 0px, 0 instad of 0in, .sf-re-Table instad of .telerik-reTable and so on.) Since SF is heavy on data transfered I think it would make sense to try to optimeze every single bit. CSS optimization is on part. If you save 2 kb 10 times, its another 20 kb down. Not much but I am sure there is a big potential on every corner of SF. You just have to set your mind on it and start optimizing.

The styles from Telerik even set font, which I think is a bit critical

.telerik-reTable-1

   BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-COLLAPSE: collapse; FONT-FAMILY: Tahoma; BORDER-TOP: 0px; BORDER-RIGHT: 0px

   

   .telerik-reTable-1 TR.telerik-reTableHeaderRow-1

   TEXT-ALIGN: left; PADDING-BOTTOM: 10px; LINE-HEIGHT: 14pt; TEXT-TRANSFORM: capitalize; FONT-STYLE: normal; MARGIN: 10px; PADDING-LEFT: 10px; BORDER-SPACING: 10px; PADDING-RIGHT: 10px; FONT-FAMILY: Tahoma; BACKGROUND: #d6e8ff; COLOR: #3f4d6b; FONT-SIZE: 10pt; VERTICAL-ALIGN: top; FONT-WEIGHT: bold; PADDING-TOP: 10px

   

   .telerik-reTable-1 TD.telerik-reTableHeaderFirstCol-1

   PADDING-BOTTOM: 0in; LINE-HEIGHT: 14pt; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; COLOR: #3a4663; PADDING-TOP: 0in

   

   .telerik-reTable-1 TD.telerik-reTableHeaderLastCol-1

   PADDING-BOTTOM: 0in; LINE-HEIGHT: 14pt; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; COLOR: #3a4663; PADDING-TOP: 0in

   

   .telerik-reTable-1 TD.telerik-reTableHeaderOddCol-1

   PADDING-BOTTOM: 0in; LINE-HEIGHT: 14pt; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; COLOR: #3a4663; PADDING-TOP: 0in

   

   .telerik-reTable-1 TD.telerik-reTableHeaderEvenCol-1

   PADDING-BOTTOM: 0in; LINE-HEIGHT: 14pt; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; COLOR: #3a4663; PADDING-TOP: 0in

   

   .telerik-reTable-1 TR.telerik-reTableOddRow-1

   BACKGROUND-COLOR: #f2f3f4; COLOR: #666666; FONT-SIZE: 10pt; VERTICAL-ALIGN: top

   

   .telerik-reTable-1 TR.telerik-reTableEvenRow-1

   BACKGROUND-COLOR: #e7ebf7; COLOR: #666666; FONT-SIZE: 10pt; VERTICAL-ALIGN: top

   

   .telerik-reTable-1 TD.telerik-reTableFirstCol-1

   PADDING-BOTTOM: 0in; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; PADDING-TOP: 0in

   

   .telerik-reTable-1 TD.telerik-reTableLastCol-1

   PADDING-BOTTOM: 0in; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; PADDING-TOP: 0in

   

   .telerik-reTable-1 TD.telerik-reTableOddCol-1

   PADDING-BOTTOM: 0in; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; PADDING-TOP: 0in

   

   .telerik-reTable-1 TD.telerik-reTableEvenCol-1

   PADDING-BOTTOM: 0in; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; PADDING-TOP: 0in

   

   .telerik-reTable-1 TR.telerik-reTableFooterRow-1

   LINE-HEIGHT: 11pt; BACKGROUND-COLOR: #d6e8ff; FONT-FAMILY: Tahoma; COLOR: #4a5a80; FONT-SIZE: 10pt; FONT-WEIGHT: 500

   

   .telerik-reTable-1 TD.telerik-reTableFooterFirstCol-1

   TEXT-ALIGN: left; PADDING-BOTTOM: 0in; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; BORDER-TOP: gray 1pt solid; PADDING-TOP: 0in

   

   .telerik-reTable-1 TD.telerik-reTableFooterLastCol-1

   TEXT-ALIGN: left; PADDING-BOTTOM: 0in; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; BORDER-TOP: gray 1pt solid; PADDING-TOP: 0in

   

   .telerik-reTable-1 TD.telerik-reTableFooterOddCol-1

   TEXT-ALIGN: left; PADDING-BOTTOM: 0in; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; BORDER-TOP: gray 1pt solid; PADDING-TOP: 0in

   

   .telerik-reTable-1 TD.telerik-reTableFooterEvenCol-1

   TEXT-ALIGN: left; PADDING-BOTTOM: 0in; PADDING-LEFT: 5.4pt; PADDING-RIGHT: 5.4pt; BORDER-TOP: gray 1pt solid; PADDING-TOP: 0in

  

 

 

 

Hello Markus ,

Content block widget uses RadEditor control to create tables. There are some css classes that are build it, but there is not an option to put your own trough the UI. However if you look into the RadEditor`s functionality you will find how you can set custom css classes here.

Best wishes,
Stanislav Velikov
the Telerik team

Dear Radoslav

Thank you very much for your feedback.

In 3.7 to achieve

1) your own tools
2) displaying the styles for headdings (applied style in pulldown)
3) dipslaying the styles in the content area while editing

was a pain in the neck because you had to do this at about 4 different places to get 3 thing done.

From what I remember reading on the forum its even worse in 4.x because you have to have templates and more stuff.

This is such common stuff and I know this is on your to do list for 4.n but in the meantime I really would appreciate it if Telerik could work up an KB article on how to do this the best way.

- change toolbox items (EditorToolsFile.xml)
- change the css for displaying the headdings in dropdown correct
- change the css to be applied in the EditorContent area (WSYWIG of the css)
- Apply the table css solution.

This would be such an tremendous help!

Markus

Hi Markus ,

We will soon provide a blog post that will explain how to achieve the things you mention. In Sitefinity 4.2 we will be extending the editor to allow the completion of complicated tasks trough the UI. Your feedback is much appreciated on this because it provides us with important  information on client`s need and views on how our products should be better.

Kind regards,
Stanislav Velikov
the Telerik team

Dear Stanislav

Thanks for your feedback. We were longing for 4.1 now we are waiting for 4.2 like a child for x-mas.

Looking forward to great things to come.

Markus