Header Links as Buttons

(16 posts) (2 voices)

1. 

   olicorse
   Member

   Hi guys,

   Is there a way of making these links appear as buttons, similar to the Call to Action text, or can I put a background colour behind them to make them stand out?

   Thanks

   Posted 4 months ago #
2. 

   Elliott
   Support

   Hello olicorse,

   Go ahead and take a screenshot and highlight the areas so we know exactly which elements your referring to. If possible send us a link to your site as well.

   Posted 4 months ago #
3. 

   olicorse
   Member

   Hi,

   Please find screenshot attached.

   URL is http://www.olicorsedesigns.com/celebration

   Thanks

   Posted 4 months ago #
4. 

   olicorse
   Member

   Screenshot here.

   

   Attachments

   1. Screen-shot-2011-12-29-at-00.26.17.png (90.7 KB, 1 downloads) 4 months old

   Posted 4 months ago #
5. 

   Elliott
   Support

   It would be easier to add the button shortcode in your extra header text field.

   [button size = "small" link = "#"]Text[/button]

   Posted 4 months ago #
6. 

   olicorse
   Member

   Thanks, this is a great start - is there a way of

   -changing the colour of the buttons
   - reducing the size of the text on the buttons
   - moving the main menu down a bit

   Thank you for your help so far.

   

   Attachments

   1. Screen_shot_2012-01-02_at_12.54.53.png (52 KB, 1 downloads) 4 months old

   Posted 4 months ago #
7. 

   Elliott
   Support

   1. See here for changing colors, http://mysitemyway.com/docs/index.php?title=Using_Shortcode_Colors.

   2. Add this in Dashboard -> your theme -> General Settings -> Custom CSS,

   .header_links .button_link { font-size: 12px !important; }

   3. Add this as well,

   #primary_menu { position: absolute; top: 40px; right: 0px; }

   And then play around with the top and right values until it is positioned where you want it.

   Posted 4 months ago #
8. 

   olicorse
   Member

   Thanks Elliot - this is nearly perfect!

   I just want to nudge the phone number and social buttons down a bit now so they're in line with the 'Guest' and 'Client' buttons.

   I have this existing line in the CSS:

   .header_text { font-size: 16px !important; }

   Many thanks

   

   Attachments

   1. Screen_shot_2012-01-04_at_23.32.39.png (42.4 KB, 0 downloads) 4 months old

   Posted 4 months ago #
9. 

   olicorse
   Member

   Also, when I hover over the buttons, they have an animated fade effect. However, this makes them turn slightly transparent (as you can see on the 'Client login' button in the attached image)

   Is there anything I can do to change this, or just turn off the fade altogether?

   Thanks

   

   Attachments

   1. Screen_shot_2012-01-04_at_23.59.15.png (42.8 KB, 0 downloads) 4 months old

   Posted 4 months ago #
10. 

    Elliott
    Support

    Try inserting the HTML instead,

    <a class="button_link small_button black" href="#" style = "margin-top: 5px;"><span>Guest Login</span></a>

    You can add some top margin as seen above.

    Posted 4 months ago #
11. 

    olicorse
    Member

    Whereabouts do I insert that code? In the Custom CSS box or somewhere else?

    Posted 4 months ago #
12. 

    Elliott
    Support

    The same place you inserted the shortcodes, replace them with that.

    Posted 4 months ago #
13. 

    olicorse
    Member

    That's great, thanks.

    Can you offer any help with the fading animation I mentioned?

    Many thanks

    Posted 4 months ago #
14. 

    Elliott
    Support

    It shouldn't be fading anymore since we took out the "hover_fade" class. Send us a link to your page.

    Posted 4 months ago #
15. 

    olicorse
    Member

    Hi, sorry for the delay. The buttons are still fading and the site link is http://www.olicorsedesigns.com/celebration.

    Thanks

    Posted 4 months ago #
16. 

    Elliott
    Support

    Try opening up /wp-content/themes/infocus/shortcodes.css and starting on line 681 you should see this,

    .testimonial_next:hover,.testimonial_prev:hover,#searchsubmit,#submit,.hover_fade,.fancy_link,.fancy_button,.button_link,.tabs_framed a,.top a{opacity:1;
    -webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -o-transition:all .5s ease;
    transition:all .5s ease;}
    .testimonial_next,.testimonial_prev,#searchsubmit:hover,#submit:hover,.hover_fade:hover,.fancy_link:hover,.fancy_button:hover,.button_link:hover,.top a:hover{opacity:.7;}

    Try removing the ".fancy_button" and ".button_link" from those lines.

    Posted 4 months ago #

RSS feed for this topic

Reply

You must log in to post.