XF 1.2 Simple CSS Button question

[mauzao9]

I am trying to add to the sidebar a block with a custom button.

I did this code:

<a href="{xen:link 'threads/category', $news}" class="button">XXXXX</a>

My question is, where to see the class of the Button and copy to paste in extra.css as a new class? Can anybody light me on that?

There is just little info where to find such things.

 

[Paul B]

You have defined the class as button.

Add it to EXTRA.css like so:

.button {
color: red;
}

I would advise renaming it so something less generic, to avoid possible conflicts.

 

[mauzao9]

You have defined the class as button.

Add it to EXTRA.css like so:

.button {
color: red;
}

I would advise renaming it so something less generic, to avoid possible conflicts.

I did copy it from another template, it looks like this:

For I rename it i must copy the CSS into extra.css and customize it with a new name, my problem is, where is the template that styles this?

 

[Paul B]

I don't understand what you are asking.

Give the link any class you want, e.g. myButton, then add the relevant styling to EXTRA.css using .myButton.

 

[mauzao9]

I don't understand what you are asking.

Give the link any class you want, e.g. myButton, then add the relevant styling to EXTRA.css using .myButton.

I did, what happens it ends up in plain text, and i end up not knowing how to maintain that style to edit it in a new class.

 

[Shelley]

Just say you changed the class to .mybutton then you would add the following in the EXTRA.css template

.mybutton {
background-color: blue;
padding: 5px 10px;
border: 1px solid darkblue;
}

That would be some of the css you would obviously add in more and styling to your preference.

 

[mauzao9]

Just say you changed the class to .mybutton then you would add the following in the EXTRA.css template

.mybutton {
background-color: blue;
padding: 5px 10px;
border: 1px solid darkblue;
}

That would be some of the css you would obviously add in more and styling to your preference.

I found out this that affects that button:

My problem is i have no idea by CSS how to make it behave like the others, just with a different color, i just wanted to do that but if i change it there, it changes all around the forum, even if i copy that CSS things as the over effects doesn't work.
How can a simple button be this mad?

 

[mauzao9]

Nevermind i found this: http://www.cssbuttongenerator.com/
I will create it there similar and add to the extra.css instead.^-^

 

[Shelley]

I found out this that affects that button:

My problem is i have no idea by CSS how to make it behave like the others, just with a different color, i just wanted to do that but if i change it there, it changes all around the forum, even if i copy that CSS things as the over effects doesn't work.
How can a simple button be this mad?

I'm not sure what the issue your having. If you defined a custom class let's say for example .mybutton and simply defined that class in EXTRA.CSS you can simply copy the styling from the other button you want to imitate and it should work.

 

[mauzao9]

I'm not sure what the issue your having. If you defined a custom class let's say for example .mybutton and simply defined that class in EXTRA.CSS you can simply copy the styling from the other button you want to imitate and it should work.

The thing i could not find the css of that button. But i am doing it now.

Only one thing i can't get right, i can't make it to have NO hover when mouse over the button, it uses the default link hover, what ends up awful in the button styling:

    .myButton {
       
        -moz-box-shadow:inset 0px -3px 12px 0px #29bbff;
        -webkit-box-shadow:inset 0px -3px 12px 0px #29bbff;
        box-shadow:inset 0px -3px 12px 0px #29bbff;
       
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
        background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
        background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
        background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
        background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
        background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
       
        background-color:#2dabf9;
       
        border:1px solid #3d718a;
       
        display:inline-block;
        color:#ffffff;
        font-family:Trebuchet MS;
        font-size:12px;
        font-weight:normal;
        padding:3px 76px;
        text-decoration:none;
       
        text-shadow:0px 1px 9px #263666;
       
    }
    .myButton:hover {
       
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
        background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
        background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
        background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
        background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
        background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
       
        background-color:#0688fa;
    }
    .myButton:active {
        position:relative;
        top:1px;
    }