Need help? Check out our Support site, then


How do I change the generic button in the header

  1. I am linking to Zillow and Trulia and the social media button are showing up as generic. How can I change this to a logo button or a "Z" and "T" button.

    my theme is fictive

    my blog is:

    http://www.soggytunasandwich.com

    Thank you

    The blog I need help with is soggytunasandwich.com.

  2. sorry ... the buttons are in the header section not the heater :)

  3. Hi,

    I have not received an answer to my question regarding the Fictive theme.

    Thanks

  4. Hi, do you have the icon images for those two sites? The existing icons are from the genericon icon font package, which has a wide variety of popular icons, but not for Zillow or Trulia, so we will have to go about adding the images a little differently. If you can get those icon images and upload them to your media library we can look at replacing the generic placeholder icons with your images.

  5. Thank you ... I just uploaded the two picture icons 1) Zillow 2)Trulia

    Linda

  6. Linda, so sorry this got lost and it has been so long. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think. Due to the nature of the two icon/logos, I had to force them to a second line. I did this (using the last two rules) by adding some left margin to the FB icon and then some right margin to the Linkedin icon.

    #menu-item-33 a:before, #menu-item-34 a:before {
        background: rgba(0, 0, 0, 0);
        color: rgba(0, 0, 0, 0);
    }
    
    #menu-item-33 a {
    	background: url("http://soggytunasandwich.files.wordpress.com/2014/08/trulia2.jpg") no-repeat scroll center 15px rgba(0, 0, 0, 0) !important;
      background-size: contain;
      width: 75px;
    }
    #menu-item-34 a {
    	background: url("http://soggytunasandwich.files.wordpress.com/2014/08/zillow2.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
      background-size: contain;
    	height: 75px;
      width: 75px;
    }
    #menu-item-30 {
    	margin-left: 20px;
    }
    #menu-item-32 {
    	margin-right: 20px;
    }
  7. Thank you so much for doing that code change for me!

    Worked great!

    Linda

  8. You are welcome.

  9. Have a quick question - the Zillow button looks a little large.

    I wanted to change the size of the Zillow button to make it the size of of the Trulia button.

    I reduced the sizing for the JPG picture but it didn't seem to make a difference. Should I reduce the height and width code for Zillow on the CSS? Any suggestions. Could you look at the blog site with the change.

  10. When you upload the new image, get the file URL of that new image (it will be different from the one we originally used) and then replace the URL between the quote marks with the new image and everything should be good. Let me know if it is not.

  11. thank you - it looks much better!

  12. You are welcome, and yes it does.

  13. Oops, spoke too soon. It appeared and then disappeared. You may have to upload it again and the again replace the URL. It isn't showing up in your media library.

  14. to me the buttons lookf ine but the link to the trulia button isn't going to the correct location - I think I can fix that as I set up the link - not sure wht it changed.

  15. I'm seeing Trulia, but no Zillow in any of my browsers (Safari, Firefox or Chrome. The link is there on your main page, but no image.

    When I visit your media library and try and view the image, I get a 404 not found error.

  16. Here is the link to the image from your media library: http://soggytunasandwich.files.wordpress.com/2014/08/zillow2-e1409258603194.jpg

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags