WordPress.org

1. Upload genesis-social-profiles-menu folder to the /wp-content/plugins/ directory
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Set up a custom menu in WordPress: Appearance > Menu -- or: edit/enhance an existing menu -- just add custom links to your desired services
4. Add the proper CSS classes to these custom links (before this: activate the check boxes for "Custom Links", "Link Target" and "CSS Classes" via the"Screen Options" tab in right top corner below toolbar! direct link to large view screenshot...)
5. Save menu to the desired menu location or use the WordPress widget for custom menu to place your profiles in any menu location or widget area

Scheme for the CSS Classes

It always goes like this: (service)-(iconset)-(size)

** 1st Example: twitter-prl-s16 **

• you could also add the suffix "-s24" for 24px size or "-s32" for 32px size
• change twitter to one of the 12 included services for this icon set
• "prl" stands for the used icon set - at the moment, there's only two sets, maybe more sets following in the future...

** 2nd Example: pinterest-sp-s32 gspm-sp **

• you could also add the suffix "-s24" for 24px size or "-s48" for 48px size
• change pinterest to one of the 6 included services for this icon set
• gspm-sp is the additional helper class to help you style the background colors, hover effects and rounded corners etc. via your child theme
• note: this helper class is required for using in the sidebars and footer widgets, otherwise your icons/styles will "crash"...
• "sp" stands for the used icon set - at the moment, there's only two sets, maybe more sets following in the future...

Available CSS Classes for PRL Icon Set

• Email: email-prl-s16 / email-prl-s24 / email-prl-s32
• Feed: feed-prl-s16 / feed-prl-s24 / feed-prl-s32
• Twitter: twitter-prl-s16 / twitter-prl-s24 / twitter-prl-s32
• Facebook: facebook-prl-s16 / facebook-prl-s24 / facebook-prl-s32
• Flickr: flickr-prl-s16 / flickr-prl-s24 / flickr-prl-s32
• Google Plus, black version: google-prl-s16 / google-prl-s24 / google-prl-s32
• Google Plus, red version: google2-prl-s16 / google2-prl-s24 / google2-prl-s32
• Pinterest: pinterest-prl-s16 / pinterest-prl-s24 / pinterest-prl-s32
• Slideshare: slideshare-prl-s16 / slideshare-prl-s24 / slideshare-prl-s32
• LinkedIn: linkedin-prl-s16 / linkedin-prl-s24 / linkedin-prl-s32
• Xing: xing-prl-s16 / xing-prl-s24 / xing-prl-s32
• YouTube: youtube-prl-s16 / youtube-prl-s24 / youtube-prl-s32
• GitHub: github-prl-s16 / github-prl-s24 / github-prl-s32

Available CSS Classes for SP Icon Set

• Feed: feed-sp-s24 / feed-sp-s32 / feed-sp-s48
• Facebook: facebook-sp-s24 / facebook-sp-s32 / facebook-sp-s48
• Google Plus: google-sp-s24 / google-sp-s32 / google-sp-s48
• LinkedIn: linkedin-sp-s24 / linkedin-sp-s32 / linkedin-sp-s48
• Pinterest: pinterest-sp-s24 / pinterest-sp-s32 / pinterest-sp-s38
• Twitter: twitter-sp-s24 / twitter-sp-s32 / twitter-sp-s48

Please consider adding the SP helper class gspm-sp to the menu items: this way you can style the background-color, the background hover color and also decide wheter to use rounded corners or any other style... -- all done via your child theme, you might add the following example code to your style.css of your child theme:

/* Genesis Social Profiles Menu Plugin: Custom Styles
------------------------------------------------------------ */

/* Background Color + Border Radius etc. */
.gspm-sp {
    background: #b22222 !important;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
}

/* Hover Color/ Effects */
.gspm-sp:hover {
    background: #ed702b !important;
}

• This will display round icons with red background, with orange background on hover.
• Remember, you may have to add !important to some rules to see the custom changes...

Helper CSS Classes to Add Some More Space :)

There are also four helper classes included: space-left and space-right plus space-top and space-bottom -- when using social items as an addition in a regular menu you might want to add some more space to have a better looking menu. Just an example, your menu goes like this:

Home Blog About [Twitter Icon] [Facebook Icon]

-> You might add the space class to the [Twitter Icon] like so: twitter-prl-s24 space-left -- please note: no dots and no commas are used here, only the classes separated by one space!

Left & Right classes add 20px space each and Top & Bottom classes 7px each -- please note: these values could all be overwritten via your style.css of the child theme when you add !important to the css rule.