Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 10, 2013 at 1:55 am #25995
    Jasmer

    I want a set of social sharing icons to match the “Enfold RSS Link and Twitter Account” widget. I am going to use them in a plugin.

    I want them to match exactly.

    I downloaded the PSD from http://www.entypo.com/

    What is the path to the orange and blue backgrounds on which the icons sit? It appears as though they have a stroke around the edge. Very nice. Are those located in PNG or other in the source files?

    My goal is to take the original background, change the color and drop the icons on top.

    Thank you!

    July 10, 2013 at 6:45 pm #128928
    Devin

    Hi Jasmer,

    The icons aren’t actually a single png or entypo icon but instead a combination of both. Eg, the twitter icon is the font character for the twitter bird but the icon background and icon decoration is actually all css. The CSS for which is:

    #top .social_widget_icon {
    
padding: 0;
    
margin: 0;
    
height: 30px;
    
width: 30px;
    
line-height: 32px;
    
text-align: center;
    
float: left;
    
font-size: 17px;
    
border-radius: 2px;
    
background-image: url("/themes/wp-content/themes/enfold/images/layout/bg-button.png");
    
background-repeat: repeat-x;
    
background-position: 0 0;
    
border-style: solid;
    
border-width: 1px;
    
}

    and

    .asc_twitter .social_widget_icon {
    
color: #fff;
    
background-color: #46d4fe;
    
border-color: #46d4fe;
    
text-shadow: 1px 1px 1px #17ACD8;
    
}

    Regards,

    Devin

    July 10, 2013 at 8:46 pm #128929
    Jasmer

    Ok I’m going to recreate this as a PNG in photoshop.

    Am I understanding this correctly?

    – color background = 30px x 30px

    – color stroke = 2px

    – total icon dimensions 32px x 32px

    – icon height = 17px

    Is this correct? Also I see a 1px dimension (border width & text shadow) as well. What is that? I imagine the border shadow is a 1px drop shadow??

    Thank you for your time.

    July 11, 2013 at 11:46 am #128930
    Nick

    Hi,

    Please look at my post here https://kriesi.at/support/topic/left-menu-listing-problem#post-124163 about a wordpress plugin with similar glyphs.

    Thanks,

    Nick

    July 12, 2013 at 7:44 am #128931
    Jasmer

    Nick,

    I see the post. They are telling me to use shortcode. Are you telling me that I can change the header in enfold with this plug in? Please explain slowly ;)

    Thanks, Jas

    July 14, 2013 at 6:32 am #128932
    Jasmer

    Hellooo Nick,

    I was on one path then you sent me something different. I appreciate it. But can you explain how this plugin is used to solve my specific problem as stated above?

    Thank you

    July 16, 2013 at 1:13 am #128933
    Devin

    I think Nick misunderstood what you were trying to do. The image file route is your best bet to have simple images that can be used with a social plugin that allows you to choose the images for the buttons.

    The issue you’ll run into is that css doesn’t exactly translate to something like photoshop or gimp. The css will give you hints but the actual effects will just need to be re-created by eye.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘The Entypo Pictogram Suite – "Enfold RSS Link and Twitter Account" Widget’ is closed to new replies.