1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Simple CSS Button question

Discussion in 'Styling and Customization Questions' started by mauzao9, Jul 7, 2013.

  1. mauzao9

    mauzao9 Well-Known Member

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

    I did this code:
    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. o_O
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You have defined the class as button.

    Add it to EXTRA.css like so:
    Code:
    .button {
    color: red;
    }
    I would advise renaming it so something less generic, to avoid possible conflicts.
     
    Shelley likes this.
  3. mauzao9

    mauzao9 Well-Known Member

    I did copy it from another template, it looks like this:
    [​IMG]

    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? :(
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  5. mauzao9

    mauzao9 Well-Known Member

    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.
     
  6. Shelley

    Shelley Well-Known Member

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

    Code:
    .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 likes this.
  7. mauzao9

    mauzao9 Well-Known Member

    I found out this that affects that button:
    [​IMG]

    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? :(
     
  8. mauzao9

    mauzao9 Well-Known Member

  9. Shelley

    Shelley Well-Known Member

    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.
     
  10. mauzao9

    mauzao9 Well-Known Member

    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:
    Code:
        .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;
        }
    
     

Share This Page