keep button visible with icon

Question

Hey guys!

I have a problem with the buttons in Formspider. Not in general! But when I assign an icon to a button it becomes completely transparent. This may be seen as a "feature", but I don't want that. The design of general button with the gradient and so on is beautiful. So I want to be able to assign an icon with transparent background (like for example a pair of binoculars for a "search" button), but I want to still be able to see the button itself. I tried to create an icon which includes the button by screen capturing the button without the icon. But when I assign this, it looks even worse, because there are no borders...
I hope, you can help me with this! :)

Accepted Answer

0

Hi Marcel,

You can overwrite this behavior by creating your own CSS for your application. Create a CSS file under "..tomcat/webapps/formspider/apps/{yourAppName}/css" folder. Your CSS file must include the following:

.bdf-button-icon-only {
  background-color: #f2f2f2;
  background-image: none;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fafafa), color-stop(100%,#e2e2e2));
  background-image: -moz-linear-gradient(center top , #fafafa 0%, #e2e2e2 100%);
  background-position: center bottom;
  background-repeat: repeat-x;
  border:1px solid #c0c0c0;
  border-bottom-color: #b8b8b8;
  cursor: pointer;
}

.bdf-button-over {
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fcfcfc), color-stop(100%,#ececec));
  background-image: -moz-linear-gradient(center top , #fcfcfc 0%, #ececec 100%);
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
  border-color: #a0a0a0;
}

.bdf-button-click {
  background: #ececec;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2) inset !important;
}

After creating this CSS file, open the Application Edit dialog from Formspider IDE and just write the name of this newly created CSS file into "CSS Filename" field.

Hope this helps,
Ibrahim

link

answered 27 Aug '13, 08:11

Ibrahim Sand... ♦♦
1.5k●5
accept rate: 25%

Wow, thanks - this does in fact work! And it looks great, look at that: Screenshot

(27 Aug '13, 08:22) Mazzel

Hi Marcel,

This is very cool indeed. You guys are doing interesting stuff but we have no idea what it is. Do you mind writing a small blog post about what you are building with Formspider? I am sure the community would be very interested.

(27 Aug '13, 08:26) Yalim Gerger ♦♦

This is acutally kind of a funny question... xD
Look, I'm Trainee in my company, so what I'm doing is not productive. What I'm doing right now (as you may already have figured out from the "Empty text" of the search bar) is an application to manage all the books we have here. So it's kind of an application that you could maybe find at a library. But it's just for training. And although this could come in handy when you are looking for a specific book, it is for internal use only.
It's really not a big thing.

(27 Aug '13, 10:19) Mazzel

It doesn't matter. Not every application must save the world. Your experience with Formspider still matters a lot to the community. So if I could convince you or anyone from your team to write a little bit about your experiences with Formspider, it would be great. :-)

(27 Aug '13, 10:22) Yalim Gerger ♦♦

keep button visible with icon

Follow this question

Related questions