addling buttons in social area and between social and top nav?

Discussion in 'Andrina WordPress Theme' started by deveshd, Apr 27, 2013.

  1. deveshd

    deveshd Member

    Joined:
    Jul 21, 2012
    Messages:
    282
    Likes Received:
    4
    I need to add some graphical buttons like shopping cart, Live chat with customer support etc etc. How to put such buttons in the social icons area and also how to do same if I wanted to add those button in the white space between social icons and top nav? See below:
    Screen shot 2013-04-27 at 11.16.16 AM.png
     
  2. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    You can add your images as a button in the social icons area by replacing the social icons with your button images, having the same name as the social icons, from the images folder present in your Theme directory.
    And then paste the following code in your Custom CSS
    (Appearance -> Theme Options -> Styling Options -> Custom CSS)
    Code:
    .social_logos li a span {
    background-size: 50px 34px;
    width: 64px;
    height: 43px;
    }
    you will required to do some css setting like adjust the height, width and background-size of the span tag as per your requirement.
    And it is not possible to add the button in the white space between social icons area and the top navigation area because it required alot of customization in the Theme.
     
  3. deveshd

    deveshd Member

    Joined:
    Jul 21, 2012
    Messages:
    282
    Likes Received:
    4
    Thanks Piyush. Why do I have to replace social icons?

    Can we not have new buttons in addition to keeping the social icons there? there's plenty of space :) Please advise.
     
  4. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Go to the header.php file present in your theme directory and add the code given below in that file.
    Code:
    <div class="graph_button">
    <a href="Enter your URL link here"><img src="Enter the URL address of your images" style="float:right;" /></a>
    <a href="Enter your URL link here"><img src="Enter the URL address of your images" style="float:right;" /></a>
    </div>
    See the image given below for the reference.
    [​IMG]

    This will solve your issue.
     
  5. deveshd

    deveshd Member

    Joined:
    Jul 21, 2012
    Messages:
    282
    Likes Received:
    4
    Thanks Piyush!

    Your solution actually put the buttons in the white space between the top menu and social icons and now looks like the below screen shot. So, I just need to align them neatly now, please tell me two things:
    1. How can I put the new buttons (Chat and free report) in the same area as social icons?
    2. How can I move the buttons up and down to match the alignment with each other?
    2013-04-30_155506.png
     
  6. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  7. deveshd

    deveshd Member

    Joined:
    Jul 21, 2012
    Messages:
    282
    Likes Received:
    4
  8. Nitesh

    Nitesh Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    5,165
    Likes Received:
    160
    Hello Devesh,

    Go to the header.php and replace your first image code with
    Code:
    <a href="#"><img src="http://webworxworld.com/client-demo/wp-content/uploads/2013/04/chat_button.jpg" style="float:right; margin-top: 10px;"></a>
    Add your link in place of #
     
  9. deveshd

    deveshd Member

    Joined:
    Jul 21, 2012
    Messages:
    282
    Likes Received:
    4
    and how do I move these side by side to social icons?
     
  10. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    It is not possible to add extra icons side by side to social icons, It requires lots of customization, If you want to do so then call freelancer to do that.
     

Share This Page