I’ve added Detail and Edit link buttons to a table, like this:
(The eyeball button is the Detail link.) I am trying to format the buttons to make them less attention-grabbing. First thing I want to do is get rid of the command name – what I think Tadabase calls the Title – so that the buttons are just icons, like the eyeball, rather than icons + text, like the Edit button.
.
Now I can’t see any way to get rid of the button’s title other than to clear the Title field in the Edit Column dialog. But when I do clear that Title value, then the table view in the page editing area gets harder to use, because the column title is erased. Here’s an example of the table after I’ve cleared the title field for the Detail link column but have not yet done same thing for the Edit link column.
When I format the Edit link the same way, I’ll have two columns side by side, with “null” in the field and no column title. As you can see this makes it a little harder for me to know which is which. Not impossible, certainly, not a major problem. But I’m wondering if I’m doing something wrong.
.
The other thing I wish I could do is format these buttons so that they show just the icon. Here’s a mockup I did outside Tadabase. I can get Tadabase to format the button like the one here on the left and the one in the middle (with the light border). Ideally I’d prefer the one on the right with no fill and no border. Is this possible?
Well, I think I’ve found what’s probably the best answer: I changed my theme to Yeti. After the theme change and after configuring both buttons as well I can, things now look like this:
In my case, you can see it says btn btn-primary , this is the type of button I selected in my field column setup. I can use this now to style the button.
td .btn-primary {
border: 5px solid red;
}
We’re adding td to the beginning because I only want to style the buttons inside the table. So if you chose the button type “Warning”, you would replace .btn-primary with .btn-warning
You can add this to the table CSS, the page CSS, or for a global app setting - put the CSS in Custom Header / Footer code.
Edit: let me just add this. You’ll also want to change the hover color and I usually change the colors for when the button is clicked. The latter is controlled by :focus and :active
I’m going to have to take you out for BBQ with all the trimmings if you’re ever passing through Dallas! This is exactly what I needed – and it would have taken me days to find it on my own.
I was using the default button style for these buttons, and I wanted NO border around the button. So I modified your example CSS to look like this:
Which is just lovely. Thanks so much for the detailed explanation.
Looking like it’s time for me to try to dust off my knowledge of CSS!
.
This doesn’t solve my other little problem (the fact that, while developing, I’m looking at columns in the table that just say “null”). But that’s minor. I don’t have that many of these links, and I always put them in the same place. Or worst case, I click the collumn’s edit pencil and see what that column’s Field name is.
Thanks again Tim!
William
ADDENDUM 2 minutes later: I just noticed I left the “solid red” part of your CSS in there! I’m not editing it here, just to show that I really did copy and modify what you’d given me. With a border width of 0 the “solid red” part has no effect. Just wanted to save you the trouble of pointing that out.
Ah right! Sorry I completely glanced over the fact that you were referring to the builder. I agree with you here, as I almost always use icons only rather than text. I would suggest making a post in Suggestion Box to help get that on the Tadabase team’s radar.
