[Pro] CSS button help

Freeway
1

I am hoping to implement the CCS Button Generator from PHP Jabbers onto an FWP v7 page but might need a certain amount of hand holding.

http://www.phpjabbers.com/css-button-generator.php

I’ve placed the initial small piece of code into Page>HTML Markup…>Before and then created a Style named btn and pasted the larger part of code into the Extended part of the style. I have not added any furthur character or paragraph styling. I then applied that style to some text (‘home’ for example) in its own html box. No go. All I see is the generic text and link styling when published.

Am I wandering hopelessly down the wrong track?

Any help appreciated.
Thanks,
David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

I’ve placed the initial small piece of code into Page>HTML Markup…>Before and then created a Style named btn and pasted the larger part of code into the Extended part of the style. I have not added any furthur character or paragraph styling. I then applied that style to some text (‘home’ for example) in its own html box. No go. All I see is the generic text and link styling when published.

Hi David

To do this you can put code like this (from the example);


.btn {
  cursor: pointer;
  color: #ffffff;
  font-size: 18px;
  padding-top: 10px;
  padding-right: 45px;
  padding-bottom: 10px;
  padding-left: 45px;
  border-radius: 10px;
  border: 1px solid #435058;
  background: #435058;
  outline: none;
  position: relative;
}
.btn:active {
  top: 1px;
}

between tags in the head of your document, draw a button on your page and then in the extended dialogue apply a class of “btn” to it.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Simon,

Thank you very much for your reply. Been out all day so sorry not to acknowledge you sooner!

Hmm, right. Definitely need a bit more guidance. My first stumbling block was not quite knowing where to place the generated large chunk of code. I imagined to find tags in Page>HTML Markup… but no so so I added the tags at the beginning and end of the code and used the Page>HTML Markup…Before and popped it there.
Next, took you literally and drew a button using the Button selection from the tool bar, probably not what I needed as it’s not a Form button I need just a link. Continued regardless, right clicked, selected Extended… and pondered whether I should make the attribute in the or

so did both, then put “btn” in the Name and Value.

Clearly this didn’t work so I tried the same by drawing a graphic box and bringing up the Extended dialogue box only to be presented with 4 choices!

Help, please can you guide me assuming my knowledge is somewhat less than you imagined. I am, however keen to delve deeper.

Thanks once again in advance.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

David

Put “class” in the name and “btn” in the value, it should work with any element you wish.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Brilliant, thanks Simon. That seems to do the trick. Needs a bit of tweaking but you put me on to the right track.

Now to discover how to have more than one style of button on a page…

Cheers,
David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

how to have more than one style of button on a page…

Copy the code and tweak. Then change it from .btn to .btnnew etc.

Add the class:btnnew combo to your item.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Thanks David,

That was the route I anticipated fumbling around with, great to have it clarified.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options