As previously announced via banners and our newsletters, support is no longer available through this platform.

For easier navigation, you can still click on "Submit a Ticket" here, choose the appropriate category, and you'll be redirected to the correct support channel for your plugin.

You can still access your previous tickets and browse public tickets, but please note that responding to tickets is no longer possible.

Paid customers: Please log in to your store account for support.

Pre-purchase questions: Use the support widget in the bottom-right corner of our websites:
https://wpamelia.com
https://wpdatatables.com
https://wpreportbuilder.com

Okay
  Public Ticket #3238745
Button link in string column
Closed

Comments

  • Paul Frumkin started the conversation

    In a string column I would like to add a button that redirects to another page.  I have the CSS to do this, but wpDT overwrites it and I can't figure out how to override that.  What is the best known method for adding a button link to a string column?

  •  1,896
    Miloš replied

    Hi, Paul.

    Thanks for reaching out to us. 

    When we use a string type column to make links as buttons,

    If you use a one line string, it will be limited to 255 characters; 

     if you use multi line string - it will have 65,535 character limit.

    Please check out this documentation about our text fields;

    The cells will render HTML, so you can wrap links in anchor tags, for example,

    <a href="https://www.w3schools.com">Visit W3Schools.com!</a>
    

    this would render in cell as "Visit W3Schools.com!"  as the displayed text, but it will  lead to the link when clicked;

    and the other regular text fields will simply be rendered as text;

    -

    You can also style it, if you add an ID, or a class in my example :

    <a href="yourURL" class="customButton">Link Text</a>

    You can then add some custom CSS styles to the table, in Customise tab > Custom CSS;

    On my example i will make it look like a green button:

    .customButton { 
     background-color: #4CAF50;  
    border: none; 
     color: white; 
     padding: 15px 32px; 
     text-align: center; 
     text-decoration: none; 
     display: inline-block; 
     font-size: 16px; 
     margin: 4px 2px; 
     cursor: pointer;
    }
    

    and it would look like this :

    6674728901.png

    - If the styles are being overridden, perhaps some kind of conflict from your active Theme that has specific styles;

    you can try adding !important clause to any CSS properties you need ( or all of them, if that's easier),

    and see if this "forces" the styles you need.

    So, for example, for white color and forcing our background color ,  we would do :

    .customButton { 
    background-color: #4CAF50 !important;  
    color: white !important;
    }


    Let me know how that seems, and if you have any questions. smile.png

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    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

  • Paul Frumkin replied

    Thanks for your reply Miloš.  I had tried this before and I get the hyperlink but not the button.  I will meticulously review the code and see where I have gone wrong.  Thanks also for the tip about !important.  I had forgotten that, so perhaps some style element is being overwritten.  I hope to get back to this later this week, I will post an update.

    Paul

  • Paul Frumkin replied

    I added the !important to the background-color and color attributes of my custom button class and now I see my button!  Thanks for the help.

  •   Miloš replied privately