Hey everyone!

With the Labour Day holidays coming up, we’d like to let you know about our upcoming working hours:

Thursday, May 1st: Our team will be off during Labour Day.
Friday, May 2nd: We'll also be off for an extended holiday break.

We’ll be back on Monday, May 5th, ready to respond to all messages received during this time.

In the meantime, if you need help, feel free to:

https://www.youtube.com/@AmeliaWordPressBookingPlugin/videos

https://www.youtube.com/@wpDataTables/videos

Thank you for being so understanding, and we hope you enjoy the long weekend! 

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,894
    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