WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do I make a link look like a button? (28 posts)

  1. eblanch
    Member
    Posted 3 years ago #

    I have some links at the top of a page that look very unprofessional. How can I make them into a button or something that makes them stand out more?

    Thanks,

    Eric

  2. elfin
    Moderator
    Posted 3 years ago #

  3. eblanch
    Member
    Posted 3 years ago #

    Thanks for the list of possibilities. I am a little confused because I can't seem to use CSS in the editor. I am trying to place the buttons inside a single page and it seems I can only use html in those editors. Is that correct? How do I use CSS in that situation?

    Thanks,

    Eric

  4. eblanch
    Member
    Posted 3 years ago #

    Actually, let me change that question. I put the text in the page editor in html and then link it to the CSS in the style.css, right? Which section would I place that information in the style.css? I have tried in a few and it doesn't seem to work correctly.

    Eric

  5. Mark / t31os
    Moderator
    Posted 3 years ago #

    Can you clarify where you're placing this button code please.

    Are you writing the code in the editor at Admin > Pages > Add New or Admin > Pages > Edit, or are you referring to editting a theme file via the theme editor.

    Would it be possible to see the code you're placing into whichever editor you're using, and the CSS you're adding to the stylesheet to work alongside the code please.

  6. eblanch
    Member
    Posted 3 years ago #

    Admin > Pages > Edit

    I am using the code from this website

    http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx

    I have put the images in the media and placed the html in the Admin>Pages>Edit editor and then the CSS in the style.css in the *posts* section, I can't seem to link the css to the media.

  7. Mark / t31os
    Moderator
    Posted 3 years ago #

    Ok, i understand what you're trying to do... :)

    Is the site you're doing this on the one in your profile? because i can't see the CSS needed for the buttons in your stylesheet.

  8. eblanch
    Member
    Posted 3 years ago #

    http://www.blanchardtrombone.com

    I am on the valsalva>recovery page

    It is the last few entries under the *posts* category just above the *Navigation* section in the style.css

  9. Mark / t31os
    Moderator
    Posted 3 years ago #

    I see the button HTML on your page..

    However aside from that, as i stated before, your stylesheet does not contain the CSS styling..

    Your stylesheet is here.
    http://www.blanchardtrombone.com/wp-content/themes/multi-color/style.css

    Which is missing the required CSS from the sliding doors article.. eg.

    a.button {
        /* Sliding right image */
        background: transparent url('button_right.png') no-repeat scroll top right;
    display: block;
    float: left;
    height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
    margin-right: 6px;
    padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
    /* FONT PROPERTIES */
    text-decoration: none;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    }
    a.button span {
    /* Background left image */
    background: transparent url('button_left.png') no-repeat;
    display: block;
    line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
    padding: 7px 0 5px 18px;
    }
    a.button:hover span{
    text-decoration:underline;
    }

    The next step would be to place that code into your theme's style.css. If you're having trouble doing that part, just let me know where you're having problems and i'll do what i can to explain.. ;)

  10. eblanch
    Member
    Posted 3 years ago #

    It's there! Did I just place it in the wrong section? What you have pasted above is all in the stylesheet you linked above.

    Which section of th style.css should this code be entered. I placed it in the /*Posts*/ section at the bottom just before the /*Navigation*/ section.

    Thanks,

    Eric

  11. Mark / t31os
    Moderator
    Posted 3 years ago #

    Ah hah!, now it looks different.. are you sure you didn't just sneak those additions in... hehe..

    Have you uploaded the required images also? If so, where are they located, currently the stylesheet expects them to be in the same folder as the stylesheet is (if they are in an images folder for example the CSS will need to be updated to reflect that).

    EDIT: Eric, i'm off to bed very soon, so if you don't hear from me immediately after your next response it's because i'm getting my beauty sleep.. ;)

  12. eblanch
    Member
    Posted 3 years ago #

    I got the buttons to work, but now I don't know how to space them so they look normal. I would like them in one row at the top of the page. It would be nice to have them off to the side of the post title. Where would I place code for that? Is it in the header?

    http://www.blanchardtrombone.com/?page_id=60

    Thanks,

    Eric

  13. Mark / t31os
    Moderator
    Posted 3 years ago #

    Hi Eric,

    Your page shows a line break between each of the buttons, is there a newline between them when viewing the code/links in the editor? If you're placing the links each on their own line WordPress will treat them like new lines, adding line breaks between each one (fixed by placing them on the same line, or placing them inside an another element, for example a div element).

    I also believe your CSS needs a little tweak.. (buttons don't quite look right).

    Update your button CSS to the following (i've simply modified a few bits for you)

    a.button {
    	background: transparent url('http://www.blanchardtrombone.com/wp-content/uploads/2010/08/button_right_06.png') no-repeat scroll top right;
    	display: block;
    	float: left;
    	height: 34px;
    	margin-right: 6px;
    	padding: 0 20px 0 0;
    	text-decoration: none;
    	color: #000000;
    	font-weight: bold;
    	font-size: 12px;
    }
    
    a.button span {
    	background: transparent url('http://www.blanchardtrombone.com/wp-content/uploads/2010/08/button_left_06.png') no-repeat;
    	display: block;
    	line-height: 34px;
    	height: 34px;
    	padding: 0 0 0 18px;
    }
    
    a.button:hover span {
    	text-decoration:underline;
    }

    There's also the problem of positioning, if you want to move them near the title you'll need to move the button code into the theme, and out of the editor. I personally think they look fine in a line under the title, there's just a few CSS tweaks that need to be made to tidy up how they look.

    If you're happy to keep them where they are, then in addition to the CSS changes above you should add an element after the buttons that clears the floats (if you don't know what this means don't worry), which is a simple matter of placing something like the following after your button code (ie. what you're putting into the editor).

    <div style="clear:both"></div>

    Which will essentially stop the paragraphs that follow from try to wrap around your buttons.. :)

    Your buttons should then look like so..
    http://img840.imageshack.us/img840/32/buttonsq.jpg

    Let me know how you want to proceed though... :)

  14. eblanch
    Member
    Posted 3 years ago #

    Thanks for the help with this project. I changed all of the CSS in the style editor and did everything else I think I need to do. There is a slight problem with the right side of the buttons. The bottom of the right picture is not showing up. Do you know what is causing that?

    http://www.blanchardtrombone.com/?page_id=60

    Thanks for all of your help!!!

    Eric

  15. Mark / t31os
    Moderator
    Posted 3 years ago #

    Hi,

    No problem, you're welcome. In regard to the missing part of the image, that's because you've missed the height change on the button class.. ;)

    Set to 34px instead of 32px, and it should fix the problem... :)

  16. eblanch
    Member
    Posted 3 years ago #

    That's it!! Thanks again. I am trying to decide if I want to venture further and color code pages and layers of pages. Is it hard to add that to the CSS. I understand the time of uploading all the different colors of pics, etc., but I wonder how much it would take to add that to the style sheet. I am guessing I would have to set up a, b, c, etc. Is that correct?

    sorry! I a quite a beginner and the more I do the easier it is to want more and better stuff!

    Thanks,

    Eric

  17. Mark / t31os
    Moderator
    Posted 3 years ago #

    Hi Eric,

    Just let me know what you'd like some help doing ... are you referring to creating additional buttons in other colours or styling other WordPress pages differently?

    :)

  18. eblanch
    Member
    Posted 3 years ago #

    I want to place additional buttons of other colors for different layers of links and maybe color-code the different topics. I am going to leave the theme alone for now.

    Thanks,

    Eric

  19. Mark / t31os
    Moderator
    Posted 3 years ago #

    Easiest way would be to duplicate what you have but name each class slightly differently (of course), then provide each of them with an image that differs in colour.

    If you get stuck working out what to do, or where to start just let me know what you need help with specifically and i'll do what i can to explain.. :)

  20. eblanch
    Member
    Posted 3 years ago #

    Ok, I tried doing another set of buttons and it seems to have worked, but there is all of this extra stuff on the page that I don't know why it showed up. I am guessing the html is ok, but the CSS must not be.

    Here is the page I am working on:

    http://www.blanchardtrombone.com/?page_id=239

    Thanks

  21. eblanch
    Member
    Posted 3 years ago #

    Now I figured out how to make the button and everything looks normal, but the button does not link to the other page. Can you tell me what is missing?

    Thanks,

  22. elfin
    Moderator
    Posted 3 years ago #

    <b should be <a

    ;)

  23. Mark / t31os
    Moderator
    Posted 3 years ago #

    Yep Rich has you covered, i was just coming by to report the error and Rich has beat me to it.. ;)

    You link isn't a link ... which is why it currently does not work.. :)

  24. eblanch
    Member
    Posted 3 years ago #

    I was having troubles changing the class, but I think I had done it correctly and forgot to save the style.css before changing the html and that made me think I had done it incorrectly!

    Thanks for all of your help. I believe I am on my way to finishing the webpage.

  25. eblanch
    Member
    Posted 3 years ago #

    I want to change the height of the greenish buttons so they are smaller than the blue ones. I have changed all the numbers in the style.css, but that just chops the bottom off the button. Do I have to get a different image that is a shorter height in order to change those values, or am I needing to change something else?

    http://www.blanchardtrombone.com/?page_id=239

    Thanks!

  26. Mark / t31os
    Moderator
    Posted 3 years ago #

    Yes you'd need shorter versions of the images as you suspected... :)

  27. eblanch
    Member
    Posted 3 years ago #

    I'm back again with another problem. I have my website pretty much finished now and I like how it looks. my problem is that the buttons I placed in the webpages work in IE8, but in firefox and safari the text in the buttons somehow does not line up and creates a blurry effect. They are also different colors before clicking and after clicking which does not happen in IE. Any ideas why this is strange? I looked at the demo buttons on the website where I took the css and html and it works fine on his page in safari!!

    I will start looking for differences and see if I can figure something out.

    http://www.blanchardtrombone.com/valsalva

  28. eblanch
    Member
    Posted 3 years ago #

    I got the thing fixed!! Thanks for everything.

Topic Closed

This topic has been closed to new replies.

About this Topic