Houzz Badges

canderson1229

I wonder if someone could help with this. I'm an Architectural Photographer and do lots of residential work. Houzz is a very good resource for clients and I would like to add the houzz badges that I've earned in the header of my site. Is there a way to move them up to where the other social networking badges are. I have them now with just the html block just below the header but would like to put them in the nav bar.
http://www.connieandersonphotography.com Thanks so much for your help!

jerryr

Hi -
As a first step I designed a badge the appropriate site. For example on this site I designed a 40px by 40px badge.
Next I added this to the advance CSS :
Example :

http://www.kelliephilipsphotography.com/


.sm-page-widget-social-links-link
{
background-image: url("URL OF IMAGE");
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-position: top center;
color: transparent;
background-color: transparent;
}



.sm-fonticon-Link:before {
display: none;
}




I would try on your site :


.sm-page-widget-social-links.sm-social-links-small .sm-fonticon
{
background-image: url("URL OF IMAGE");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-position: top center;
color: transparent;
background-color: transparent;
}


.sm-page-widget-social-links.sm-social-links-small .sm-fonticon:before
{
display: none;
}

Questions let me know - jerryr

canderson1229

Thanks Jerry, I guess I just don't understand where to put the widget. With what I have on my page now its just an additional html box.

jerryr wrote: »

Hi -
As a first step I designed a badge the appropriate site. For example on this site I designed a 40px by 40px badge.
Next I added this to the advance CSS :
Example :

http://www.kelliephilipsphotography.com/


.sm-page-widget-social-links-link
{
background-image: url("URL OF IMAGE");
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-position: top center;
color: transparent;
background-color: transparent;
}



.sm-fonticon-Link:before {
display: none;
}




I would try on your site :


.sm-page-widget-social-links.sm-social-links-small .sm-fonticon
{
background-image: url("URL OF IMAGE");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-position: top center;
color: transparent;
background-color: transparent;
}


.sm-page-widget-social-links.sm-social-links-small .sm-fonticon:before
{
display: none;
}

Questions let me know - jerryr

Hikin' Mike

canderson1229 wrote: »

I wonder if someone could help with this. I'm an Architectural Photographer and do lots of residential work. Houzz is a very good resource for clients and I would like to add the houzz badges that I've earned in the header of my site. Is there a way to move them up to where the other social networking badges are. I have them now with just the html block just below the header but would like to put them in the nav bar.
http://www.connieandersonphotography.com Thanks so much for your help!

You need to put them in your header, not your "content".

canderson1229

Hikin' Mike wrote: »

You need to put them in your header, not your "content".

Thanks for your reply Mike. I guess I'm missing that. I tried working with this and I can't seem to find a place to add html to the header, or how to do it. I've looked all over before posting here to find the correct place. Maybe a little more detail might help me. I'm sure I'm just overlooking it somehow.

Hikin' Mike

Make sure it's 'Site-wide' and not just this page.

jerryr

ok now I see what you are doing - good job!

Hikin' Mike

You really need to look at your site on other monitors: http://quirktools.com/screenfly/. Not everybody has a large monitor.

canderson1229

Hikin' Mike wrote: »

You really need to look at your site on other monitors: http://quirktools.com/screenfly/. Not everybody has a large monitor.

Yes Mike I see what you mean, thanks for that link. I'm not in love but I feel that the badges are helpful to people browsing. Any other suggestion? Also the other issue I'm having is the text for the galleries and such are all bunched up. My logo margins are very wide feel like it might help if that could be minimized but I don't see how to change that either.

I'm open to suggestions. Should I remove them all together?

Hikin' Mike

I would put your logo on the top left and your social and other badges to the right. Put your nav under both and center them.