Okay
  Public Ticket #3089157
convert emails to buttons
Closed

Comments

  • Paul Foraker started the conversation

    I'm displaying a Google Sheet in a wpDataTable and would like the email addresses column presented as "EMail" buttons instead of in the clear. This is similar to the feature that converts a website URL to a Website button. 

    Can do? 

    Thanks,
    Paul

  •  1,851
    Miloš replied


    Hi, Paul 

    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.

    When you create a URL Link column and set it to appear as a button, you need to add a custom class to it:

    4698826991.png

    Then, visit this website, generate your button, and click on "Get Code":

    6639315205.png

    In the right part of the screen, you'll see the code you need for this button:

    9848024905.png

    Copy the code without the first row and change "myButton" to the custom class you added in step 1, so instead of this:

    .myButton {
    	background-color:#51d1c6;
    	border-radius:28px;
    	border:1px solid #1995ab;
    	display:inline-block;
    	cursor:pointer;
    	color:#ffffff;
    	font-family:Arial;
    	font-size:17px;
    	padding:16px 31px;
    	text-decoration:none;
    	text-shadow:0px 1px 0px #2f6627;
    }
    .myButton:hover {
    	background-color:#5a9615;
    }
    .myButton:active {
    	position:relative;
    	top:1px;
    }

    You would use this:

    .customclass {
    	background-color:#51d1c6;
    	border-radius:28px;
    	border:1px solid #1995ab;
    	display:inline-block;
    	cursor:pointer;
    	color:#ffffff;
    	font-family:Arial;
    	font-size:17px;
    	padding:16px 31px;
    	text-decoration:none;
    	text-shadow:0px 1px 0px #2f6627;
    }
    .customclass:hover {
    	background-color:#5a9615;
    }
    .customclass:active {
    	position:relative;
    	top:1px;
    }

    In the table, go to Customize/Custom CSS and paste that code:

    5662287483.png

    Notice that the font color had to include the !important clause to override the color of the text in the button. After you add this, the button in the table will look like this:

    4803006689.png

    I hope this helps!


    -

    Let me know how it goes and if you have any questionssmile.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