Volt CMS need help pulling the trigger to buy it, need html tables

Hi, I’m making this tutorial please try it out and see if it works, if you use Volt CMS, I was able to style the table in Blocs but need to know if I can use those styles in Volt CMS.

Start with a blank page in Blocs and add a one column structure block.

Make a 3 by 3 table with no classes, I used CKEditor and copied the source code and pasted it into a html code widget

Add the HTML widget to the column and past the table html source into it, make sure you leave preview on the the HTML widget checked.

Click on the widget and make a class called table it will then show up as .table
Press Command 6 to open the styles manager and make another class called table tr and another called table td and select No, leave the spaces intact.

P.S. you can also give the table a class name like .production and .production tr and .production td it’s up to you so you can have multiple tables with different formatting for each class name. <table class="production">

Now go to the class table td and add some background color to tr and border and some padding to td

Volt CMS
Add the classes .table and .table tr and .table td to Volt so they show up in the classes list when you click on the table on the lower left of the screen in edit mode.

Ok so will this work, I desperately need to copy and paste tables into Volt edit areas and then assign a class to the table for color and padding. Knowing this will help me buy Volt CMS because this is one of the highest hurdles to get over right now.

Thank You

Hi Warren,

If you could send me this CSS code for tables, I can apply them on one of the demo pages to show you the outcome.

You could either include the code here directly or send me an email.

Cheers
Jannis

Hi Jannis,

Here is a example file with the classes .product, .product tr, .product td

Table-Style-Example.bloc (191.3 KB)

Thank you so much for your help
Warren

.product{
width:100%;

}
.product tr{
border-style:solid;
background-color:#EAEAEA;
border-width:0px 0px 1px 0px;
}
.product td{
padding:10px 10px 10px 10px;
}

I would be interested to see how this is done. I played with the tables for just a couple minutes and never applied any styling. I almost wanted a couple preset styling options.

I will apply this later the day :wink:

1 Like

Hi Warren @calibinder

I have been using Volt CMS and my tables are Volt Content Brics. See example here: Birmaclub - Serious breeders of Birman cats.

To style them I have simply added an extra css file to my Blocs project.

But you can also create your classes directly in Blocs class manager and then add the created class names in the Volt Core field which are then passed forward and usable directly form the Volt CMS Web interface.

I have found no issues with using tables with Volt CMS and to speed up my process have been copying/pasting my tables directly with all classes needed in the Volt Content area.

Hope this helps.

MDS

2 Likes

Works fine:

https://voltdemo.blocsaddons.com/page-three/

A bit of CSS tweaking needed of course, but basically no problem to apply your custom CSS table code.

Cheers
Jannis

1 Like

Thank you Jannis for making the demo and MDS for the example of a working table.

One other question, how do you select all the content or multiple elements in the VoltCMS content brick and delete them, all I can select is one paragraph at a time and delete it.

Thank You
Warren

1 Like

Currently, only deleting one paragraph after each other is possible. It’s a security thing that you aren’t able to delete everything accidentally.

I have on my todo list a button to delete the whole content.

1 Like