Okay
  Public Ticket #3147114
custom css
Closed

Comments

  • Andrea Cannizzaro started the conversation

    Ciao, vorrei sapere le seguenti cose sul plugin wpDataTables:
    1) posso personalizzare al 100% le tabelle con cs personalizzati (con qualsiasi codice css intendo)?
    2) nella tabella, tra una riga e l'altra, vorrei staccarli con un po' di spazio, in modo da poterli inserire, margini, imbottiture, ombre, bordi (vorrei creare uno spazio tra una riga e l'altra e inserire il raggio del bordo e le ombre sul bordo, così posso fare quello che voglio?
    3) hai una versione di prova gratuita di wpDataTables?
    4) posso creare una tabella con questo aspetto estetico, come puoi vedere qui nell'immagine?
    Posso creare qualsiasi tipo di filtro prodotto nella tabella (intendo qualsiasi cosa mi venga in mente)?
    Posso creare queste funzioni che vedete nelle immagini qui (compresa la casella di ricerca in ogni filtro e il numero di prodotti visibili in ogni filtro)?


  •  1,819
    Miloš replied

    Hi, Andrea 

    Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

    -

    Please note that the official support language is English, and we have to use Google Translator to try and understand other languages. Since a lot can be lost in translation, we apologize in advance if we misunderstood some segments of your message, and we also ask you to please translate your future messages to English.

    -

    I will do my best to answer all questions on same ticket now, but for the future :

    When you have questions or issues which are not related to the title of the active ticket, please open a new ticket, and we will help you there. In that way, issues and questions which are related to different subjects will be in separate tickets so other customers or our support agents can find them easily. Our policy is to have one issue or question per ticket because of the reasons that are described already.

    Thank you for understanding.

    -

    1) can I 100% customize tables with custom cs (with any css code I mean)? 

    I can't guarantee that any kinds of styles will be possible, but our tables are very customizable with CSS, there is a lot you can do, depending on the CSS knowledge, of course.

    There is a Customize tab in the table settings, there you will see "Custom CSS", and you can add any custom CSS you need there.

    You can see a basic example of chancing some colors with CSS on this Documentation page;

    but you can use the same principle to add more advanced CSS.

    -

    Our support does not cover customizing the plugin/tables,  but we can advise with guidance, on some basic CSS,  and we can provide working examples where it's possible.

    2) in the table, between one row and another, I would like to detach them with some space, so that I can insert them, margins, padding, shadows, borders (I would like to create a space between one row and another and insert the edge radius and shadows on the edge, so I can do what I want? 

    Absolutely.  If you have HTML + CSS skill, you can inspect the page,  and you should be able to add margins/padding/shadows/borders ,  as well as space between rows, etc.

    I believe that you should also be able to add edge radius and shadows on the edge(s), depending on what exactly you need.

    You can certainly try, and we will be here to help as much as possible.

    3) Do you have a free trial version of wpDataTables?

    We don't have any free trial, 

    but we have a Demo Sandbox site, where you can try out the plugin functionalities, on this link

    and there is a 15-day money-back guarantee period, So if you purchase the plugin, you can safely fully test it out, and if it doesn't fit your needs you can request and receive a refund in that period. ( same goes for all plugins and add-ons)

    4) can I make a table with this aesthetic look, as you can see here in the image? 


    9683608665.png


    I am confident that you should be able to achieve a very similar look to this example,

    with additional custom CSS.   

    This would require a certain level of CSS that would be beyond the scope of our support,

    but, i can give you some examples to get you started.

    Here is an example how we made a "star rating" on a column.

    With some custom CSS you could achieve that, just like in our catalog of books example table.

    You would need to add some conditional formatting to the "stars" column:

    4203503314.png

    Each content (<span class) has these in order:

    <span class="stars-container stars-96">★★★★★</span>
    <span class="stars-container stars-90">★★★★★</span>
    <span class="stars-container stars-85">★★★★★</span>
    <span class="stars-container stars-80">★★★★★</span>
    <span class="stars-container stars-70">★★★★★</span>
    <span class="stars-container stars-60">★★★★★</span>

    And the classes are defined in wpDataTables settings/Custom JS and CSS/Custom CSS field, like:

    .stars-container{
    font-size:20px !important;
    }
    .stars-container { position: relative; display: inline-block; color: transparent; font-size: 50px;
    line-height:normal;
    }
    .stars-container::before{ position: absolute; top: 0; left: 0; content: '★★★★★'; color:lightgray;
    }
    .stars-container::after { position: absolute; top: 0; left: 0; content: '★★★★★'; color: gold; overflow: hidden;
    }
    .stars-0::after { width: 0%; }
    .stars-10::after { width: 10%; }
    .stars-20::after { width: 20%; }
    .stars-30::after { width: 30%; }
    .stars-40::after { width: 40%; }
    .stars-50::after { width: 50%; }
    .stars-60::after { width: 60%; }
    .stars-70::after { width: 70%; }
    .stars-80::after { width: 80%; }
    .stars-85::after { width: 85%; }
    .stars-90::after { width: 90%; }
    .stars-96::after { width: 96%; }
    .stars-100::after { width: 100%; }
    

    I hope that helps.

    -

    We also have this "products table" example here;

    and a Premier League table example here;

    You can see more examples on the left side of the Documentation.

    And here is a tutorial on how we made the Premier league table ( if you wish)

    5. Can I create any kind of product filter in the table (I mean whatever I can think of)

    I don't think that it will be possible to create absolutely any filter you could think of ( theoretically speaking);

    but you can check out all of our available filters here;

    We also have a premium add-on Powerful Filtering that allows more filtering features, you can check it out here.



    6. ? Can I create these functions you see in the images here (including the search box in each filter and the number of products visible in each filter)?

    We have a search box in selectbox/multiselectbox filters.

    But at this time, we don't have a built-in feature to achieve presenting the quantity of filters like that;

     but you can suggest it for our developers - they will do their best to make a solution in the future.

    Please feel free to search on our suggestions page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

    -

    If you need a solution for it now, maybe it can be done with a high level of custom work, but I am not sure, to be honest. Our developers are very busy at the moment, working on some priority tasks and fixing bugs and issues with our plugins, so they won't be having the time for custom work in the near future.

    We can recommend reaching out to someone who does custom solutions, such as WP Kraken, but we can't advise on their pricing.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables