Match my Wordpress Site

AndrewVernon

Hey Guys,

This forum has been SO incredibly helpful already. But I wanted to see if there were any more pointers.

I am trying to make my smug mug account as closely as possible match my existing wordpress site which is www.AndrewVernonPhotography.com

The most important things I'd like to have match would be all of the spacing of elements throughout the page, the menu bar colors, spacing, etc, size and spacing of social icons, I would absolutely LOVE to build an expanding search box like what's in the top corner of my wordpress site etc.

Any pointers on how to accomplish some of these things?

Here's what I have so far - http://andrewvernonphotography.smugmug.com/Landscapes/Florida/

Here's a gallery page from my wordpress site - http://andrewvernonphotography.com/portfolio/color/

Thanks in advance for ANY help you can give!

Hikin' Mike

I also matched my Smugmug gallery to my WordPress site. It was easier for me to copy my WP header and navigation HTML and CSS to my Smugmug site. That meant loosing the Smugmug navigation, but it was worth it for me.

I don't think you are going to match the search feature.

Your WordPress container is 'max-width:1000px', so you'll need to change your Smugmug width site from 960px to 1000px.

You can add this to theme's CSS to get your social badges closer to what you want.

/* Social Links Here */
.sm-page-widget-social-links.sm-social-links-medium.sm-social-links-horizontal li {
    padding-right: 0;
	}
.sm-page-widget-social-links.sm-social-links-medium .sm-fonticon {
    font-size: 30px;
    width: 30px;
	}

AndrewVernon

Hikin' Mike wrote: »

I also matched my Smugmug gallery to my WordPress site. It was easier for me to copy my WP header and navigation HTML and CSS to my Smugmug site. That meant loosing the Smugmug navigation, but it was worth it for me.

I don't think you are going to match the search feature.

Your WordPress container is 'max-width:1000px', so you'll need to change your Smugmug width site from 960px to 1000px.

You can add this to theme's CSS to get your social badges closer to what you want.

/* Social Links Here */
.sm-page-widget-social-links.sm-social-links-medium.sm-social-links-horizontal li {
    padding-right: 0;
	}
.sm-page-widget-social-links.sm-social-links-medium .sm-fonticon {
    font-size: 30px;
    width: 30px;
	}

Awesome! How did you copy it over? Is it just as easy as copying the PHP file?

Hikin' Mike

No, you don't copy the PHP mainly because SM doesn't allow PHP. I just copied the HTML/CSS from my WP theme to my SM custom theme. I put all of my WordPress header/logo/nav to my Smugmug header section.

AndrewVernon

Hikin' Mike wrote: »

No, you don't copy the PHP mainly because SM doesn't allow PHP. I just copied the HTML/CSS from my WP theme to my SM custom theme. I put all of my WordPress header/logo/nav to my Smugmug header section.

Interesting... Where did you get the HTML / CSS from? Is it a view page source type of thing?

Thanks for your help!

Hikin' Mike

You can get it from viewing the source code or you can find it when you log into your Dashboard > Appearance > Editor. In my case my WP is a child theme that I created, so I had the files on my computer.

AndrewVernon

Hikin' Mike wrote: »

You can get it from viewing the source code or you can find it when you log into your Dashboard > Appearance > Editor. In my case my WP is a child theme that I created, so I had the files on my computer.

Thanks again for the help.

So, the code you gave for the social icons is working to resize them, but hasn't affected the spacing between them at all. Any ideas on how to fix that?

Hikin' Mike

AndrewVernon wrote: »

Thanks again for the help.

So, the code you gave for the social icons is working to resize them, but hasn't affected the spacing between them at all. Any ideas on how to fix that?

That should have worked. Try adding the '!important' here:

.sm-page-widget-social-links.sm-social-links-medium.sm-social-links-horizontal li {
    padding-right: 0 [B]!important[/B];
    }
.sm-page-widget-social-links.sm-social-links-medium .sm-fonticon {
    font-size: 30px;
    width: 30px;
    }

Hikin' Mike

Also, if you're doing any customizing, you might look into one of the Web Tools. I use 'Firebug' for Firefox.

AndrewVernon

Hikin' Mike wrote: »

Also, if you're doing any customizing, you might look into one of the Web Tools. I use 'Firebug' for Firefox.

Ah ha! I figured it out. I had it set to the small social icons and the code was referencing the medium. Fixed that up, and it worked beautifully. Thanks for the help!