Css for custom buttons

  • Author
    Posts
  • #1318156

    I am attempting to use custom menu buttons for my blog (origin theme).
    I have uploaded the gif or jpeg of the image and have managed to get the image to appear but the issue is I cannot seem to size it right. If the image is too small then it repeats to fill the space and if it is too small the whole button isn’t visible. Basically I would like to know what size the buttons need to be and how should i go about replacing the menu text with my buttons.
    Thanks in advance!

    The blog I need help with is celticfanchat.com.

    #1318260

    Also the way I am targetting the button is by adding the ability to add a css class to a menu item (In the portion of the dashboard where you configure your menu, under screen options, I am checking off css classes .) then I am adding a name to the menu items css class

    for example for the home button I made the home button name “homeButton” then I am adding a css class
    .homeButton {
    background-image: url(‘http://celticfanchat.files.wordpress.com/2013/06/home2.png?w=50’);

    }

    I have tried variations of height and width percentages to get it to fit in the menu but nothings working

    #1318362

    mattwiebe
    Staff

    So, the problem you’re facing here is that an “a” element is an inline element, which means it does not accept width or height properties (amongst other things). What you’ll want to do is set the display to inline-block and then set your height and width to the same size as your image.

    Something like:

    .home-button {
    	display: inline-block;
    	width: 50px;
    	height: 19px;
    	background: url('http://celticfanchat.files.wordpress.com/2013/06/home2.png') no-repeat;
    }

The topic ‘Css for custom buttons’ is closed to new replies.