SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom buttons and bootstrap

    Hi everyone

    For those of you who have helped me over the years, thank you things are starting to come together. I am doing codeacdemy tutorials almost daily and I am really gaining a solid understanding of css and even programming.

    My current problem is probably not that hard to fix, but I do need some guidance.
    I am working a project with twitter bootstrap to build a web app. I have used the class .btn along with the class .up in my html. This styles a little button with a lot of css3 properties attached to it and is great, but is not for me.
    I have created a little gif of a tick and a cross, kind of like for yes or no. I added another class to my html called voteyes, and the string everything together in my stylesheet, something lie this

    .btn, .up, .voteyes {
    Background-image: ......
    }
    I got my background image but ofcourse all of the other style was there. I could have gone in and set the display to none on each property, however I knew there was a better way. Just trying to go through this in my head here, but I have not done a lot of pseudo selector stuff previously.
    I think I need to set an active, hover and clicked state for cool custom button. I also need to position it within it’s containing element, which I think I will do with margin alone. Not sure if I should do this as a % (i avoid %) as I am using bootstrap responsive. I’ll prob just use media queries to collapse but it’s so small I think it will still function in it’s form.
    So I am looking for a good resource to creating making custom buttons. Here is my go at it. (off top of head not tested so excuse poor syntax).

    There are three states. Unselected, hover, and selected.
    I’m not sure on the size of the container, or if I need set a height or width. The image is very small
    .voteyes a:link {
    Background-image: url (‘../images/tick.gif’);
    Margin: auto 0; /* I can figure it out later in terms of position*/
    Display: inline;
    Text-align: -999px; /* accessibility */
    Height: 10px;
    Width: 10px;
    }
    .voteyes a:hover {
    Background-image: url (‘../images/tickhover.gif’);
    Margin: auto 0; /* I can figure it out later in terms of position*/
    Display: inline;
    Text-align: -999px; /* accessibility */
    Height: 10px;
    Width: 10px;
    }
    .voteyes a:active {
    Background-image: url (‘../images/tickhover.gif’);
    Margin: auto 0; /* I can figure it out later in terms of position*/
    Display: inline;
    Text-align: -999px; /* accessibility */
    Height: 10px;
    Width: 10px;
    }


    Cheers
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    It's a little hard to follow your post. Could you link to an example, or post the full code (including HTML) so it can be tested?

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that. The site I working on is on a DEV server I access at home.

    I will have a go at doing this the way I think it should be done and get back to you guys. I posted this at work. Been a little quiet so I have been going through codecademy all day. man. CSS. Man. Gets really nitty gitty. those spaces, those operators. gets you.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    OK, let us know when you have something. Sometimes if you take a break, it looks better the next day.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Text-align: -999px; /* accessibility */
    -999px is not a valid value for text-align I think you meant text-indent and you should use -999em as a value otherwise the item will still likely be rendered on screen.

    You only need to define what changes in the different anchor states and not all the same rules again.

    Look at using sprites for the rollovers and better image/text replacement techniques.

  6. #6
    SitePoint Addict
    Join Date
    May 2006
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I am about to read your links.

    I am doing so much css study right now it is blowing my mind. Up to 4 hrs a day (things at work are not as busy). Still running into walls.

    I am styling a button. It's not a link, it's a button. I have made my own classes for this button, see below. Really it is very simple, in a link state, it looks like a. In a hover state it looks like b. I suspect, that in html when you use a label like 'button' a default style is generated. This is what I don't get yet / have not learnt about. I have seen labels, input fields etc. Just don't get it yet.

    This is what I have

    .support .vote-yes:hover {
    background-image: url('../img/tick.gif');
    Margin: auto 0;
    Display: inline;
    text-indent: -99em;
    Height: 30px;
    Width: 30px;
    }

    When I hover over this, I get the image swap, but it is repeated, even with short code of no repeat.

    I have found some cool tutes on styling buttons I will be back soon.

    the above code is off top of my head to try get this working, oh html:

    <button id="vote-up-{{ challenge.id }}" class="vote-yes" .....(some danjo code you don;t need to worry about)

    The id vote-up has something to do with jango. I am sure it does not matter, or it may. I don;t know.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by unconformed View Post
    I suspect, that in html when you use a label like 'button' a default style is generated.
    Yes, but if you style it yourself those defaults get overridden.

    I get the image swap, but it is repeated, even with short code of no repeat.
    Make sure to give us your full CSS for the button and the full HTML button code. You don't mention no-repeat in the code above.

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    If you're working with any framework or base stylesheet you'll want to work to their conventions.
    Take a look at how icons are included in the buttons.
    http://twitter.github.com/bootstrap/base-css.html#icons

    You may just want to follow that convention and add your styles to another icon element in the button
    Code html:
    <a href="#" class="btn"><i class="icon-refresh"></i> Refresh</a>

    I have never needed to use a <button> tag personally. <input type="submit"> for form submissions. <a> for everything else.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I have never needed to use a <button> tag personally. <input type="submit"> for form submissions. <a> for everything else.
    Yes, that's my preference, too.

    @unconformed - If this isn't part of a form, you should just be styling an <a> element to look like a button.

  10. #10
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using Bootstrap in a project right now, too, and have been a little frustrated with it. If you're using any of the Bootstrap button classes, those styles will be applied and you will have to overwrite what you want to change. That said, it is still a good idea to keep things consistent by using similar styles for all of your buttons, even if that means applying Bootstrap classes and overwriting things. It's extra work, but that's the downside of relying on a framework.

    So it sounds like the problem you're having above is that the image repeats in the button? Is it meant to be a background image or an icon next to the text in the button?

    If it's an icon, I would put it in the HTML next to the button text instead of as a background image in CSS. I guess it depends on how much control you want to have with placement of the image and whether or not you want it only to show when it is hovered. If you're wanting the image only to display upon hover, put it as a background image, but specify that the image not be repeated by doing this:
    Code:
    .voteyes a:hover {
        background-image: url(‘../images/tickhover.gif’) no-repeat;
    }
    If you're having trouble positioning the background image, you can either add extra space in the image itself or maybe try something like this to have more control of positioning it:
    Code:
    .voteyes a:after:hover { /* Not sure if :after and :hover will work together, but you can try it. Could also use :before. */
        content: "url('../images/tickhover.gif')"; /* not sure if it needs "" or not */
        position: absolute;
        top: 0;
        left: 5px;
    }
    Just presenting ideas here. Not sure if they'll work for your specific task, but hope I helped.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mnicki_mouse View Post
    Code:
    .voteyes a:hover {
        background-image: url(‘../images/tickhover.gif’) no-repeat;
    }
    That's invalid. I think you meant this

    Code:
    .voteyes a:hover {
        background: url(../images/tickhover.gif) no-repeat;
    }
    "background-image" is not a shorthand property and only applies to the image. The "background" property is the shorthand and refers to all the background properties as required.

  12. #12
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops! My mistake. You're right - background, not background-image.

  13. #13
    SitePoint Addict
    Join Date
    May 2006
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys

    It is not a form that I am using. I want this button to be diffrent to other buttons on the site, happy to use bootstraps work for these.

    Basiclly I have an image displayed as a button ( a tick) on hover it changes color, and once selected it changes color again.

    I am taking a look at this right now

    http://coding.smashingmagazine.com/2...and-resources/

    Prob place my code in the custom stylesheet I have as I want so pretty tigh control on how it displays.

    Thsi is very useful:

    .voteyes a:hover {
    background: url(../images/tickhover.gif) no-repeat;
    }But I don't think I have this set up as an a tag. I'll have to have a look when I get home. Spent a whole longweekend away from the computer (cept friday night
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Could you post the full code you are using or a link? It's hard to know where this is up to without seeing wat you are doing.

  15. #15
    SitePoint Addict
    Join Date
    May 2006
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am sorry. I have been at work today. Lots of research in downtime.

    the code posted above is what I currently have but I now know it is wrong.

    the core of what I am aiming to do, is make my own graphic a button. Thinking about doing it this way:

    http://line25.com/tutorials/how-to-b...-image-sprites

    the html is on a dev server so I don't have it here. thanks for you interest in helping me.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    OK, cool. That tutorial shows what code to use, so give that a try and let us know if you have any problems.

  17. #17
    SitePoint Addict
    Join Date
    May 2006
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got this sorted, thanks. I used a plugin (bootstrap button creator) to help me so I need to do more reading on this. Managed to figure some things out.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •