Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #25541

    I am an Apple Certified Technical Coordinator. I need an Apple logo icon in the Frontpage header so I can link to my Apple Certification profile.

    Option 1: I suppose I could set it to Behance, or something I’m not using, then replace the Behance icon with an Apple icon but I don’t know where I would find the database that stores the Behance icon. And I’m not sure where I would find an Apple logo icon that matches perfectly. The only think worse than not having an icon is having an icon that doesn’t match. Any ideas?

    Thanks

    #127294

    Hi,

    Adding an icon is bit complicated right now. Kriesi will make it easier to add social media icons on the next updates.

    I posted a basic instruction on this link but please look for Nick’s comprehensive instruction on how to add or modify social icons. Unfortunately, Entypo Fontello( the font use for rendering icons ) doesn’t have the Apple icon. You might end up following my suggestion.

    http://www.kriesi.at/support/topic/youtube-icon

    Regards,

    Ismael

    #127295

    Hi Ismael,

    Thank you for the link.

    1. As I understand it you are giving me two choices: YOUR method of editing custom.css and NICK’s more complex method. Correct?

    2. In YOUR method, I use a jpg or png icon and in NICKS’s method I use a glyph. Is this correct?

    3. Fontello does have an Apple icon. See here http://www.fontello.com/#search=apple

    4. On the link you posted it shows many directions. Yours, Nicks – do steps 1-12 then, only do steps 5,9,11, etc. It seems to me the directions evolved over time and were edited. I am confused.

    5. What is the easiest way to replace the “dribbble” glyph with this apple glyph? http://www.fontello.com/#search=apple

    Thank you for your time, Jasmer

    #127296

    Hi Jasmer,

    The only one you’ll need to follow is Nicks: http://www.kriesi.at/support/topic/youtube-icon#post-117381 completely since you aren’t doing the youtube icon.

    If you want to go with Ismaels, you follow this one: http://www.kriesi.at/support/topic/youtube-icon#post-117289 but you’ll need your own apple image for the icon. Where it says ” ../images/youtube.png ” in his css, you just put the absolute url for where you upload your image (both normal and hover).

    Regards,

    Devin

    #127297

    Yes Ismaels is much easier.

    For Ismaels, I believe I need a png or jpg icon rather than a glyph. Is this correct?

    If that is true then I would have to find the exact color icon correct? Or change it my self in photoshop to match the icons that come with the theme. Correct?

    Thank you

    #127298

    Also do I need to make the icon a specific size? Unfortunately Ismaels download links do not work so I cannot see the sizes. And yes I am logged into Dropbox.

    Thanks

    #127299

    1) If you want to add an image icon I’d suggest to use the “append” parameter of the social media icons function – it helps you to append any html code (including image links) to the social icons element: http://www.kriesi.at/support/topic/how-do-i-add-a-you-tube-icon-to-social-icons-in-the-header

    2) I think the icon size is not important. I’d recommend to use 32px x 32px or 64px x 64px icons. Then you can use css code to scale it down if necessary.

    #127300

    Dude,

    I think I understand. Please tell me if I am correct for my Apple logo and link:

    1. On Enfold > Header > Add the Tumblr social icon for example. Place my Apple link.

    2. Add this to the very end of custom.css

    #top .social_bookmarks_tumblr {
    background: url(../images/apple.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr:hover a {
    color:#fff;
    background: url(../images/apple-hover.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr a {
    text-indent: -9999px;
    }

    3. In header.php replace:

    $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');

    with

    $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '<a href="http://apple.com/example" class="apple" target="_blank"><img src="http://mywebsite.com/apple.png" title="Apple" alt="Apple" /></a>');

    Are these the full directions? Don’t I need 2 icons? One for hover and one regular? Wouldn’t that change the second part of the code in the header.php? I notice the color hex in the header.php is specified #fff. I want the background to be black on hover.

    Thank you,

    Jasmer

    #127301

    To restate that last part:

    Are these the full directions?

    Don’t I need 2 icons? One for normal and one for hover? (apple.png and apple-hover.png)

    Wouldn’t that change the second part of the code in the header.php? What would those code changes be?

    Also, I want the square background to be black on hover not the Tumblr color background. What would the additional code changes be?

    Thank you for your time,

    Jasmer

    #127302

    Hi,

    If you are working on my instructions, I’ll repeat it again.

    You can replace an existing icon with the youtube icon. On Enfold > Header > Add the Tumblr social icon for example. Place your apple link. When you’re done, edit custom.css then add this code:

    #top .social_bookmarks_tumblr {
    background: url(../images/apple.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr:hover a {
    color:#fff;
    background: url(../images/apple-hover.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr a {
    text-indent: -9999px;
    }

    You don’t need to do Dude’s code. Yes, you need two icons for the initial and hover state. If you want a different color for the hover, you need to edit the apple-hover via Photoshop and change the background color manually.

    Regards,

    Ismael

    Regards,

    Ismael

    #127303

    Ismael, Ok almost there!

    Just to be clear. I was assuming that I needed to use an “apple shaped” icon png on a transparency, one in white, one in grey.

    It seems now you are telling me that I need an apple icon on a square grey background for the normal state.

    And an apple icon on a square black background for the hover state.

    SO both icons I make in photoshop should be square with the apple in the center.

    Am I understanding correctly?

    Thank you, Jasmer

    #127304

    The images being transparent or not are only important in that they will display how you want them on the front end. So if you don’t like the look of them you can change them however you want (transparent, background color etc).

    #127305

    Hi Devin, Ismael, Dude,

    Devin’s last response confused me a bit because it was a bit general in nature. I am very close to understanding this. Let me restate. I’ll be very clear. Currently, I have a tumblr icon linked to my apple certification site with a blue background.

    This is exactly what I want, no more no less:

    1. Normal State: grey apple icon on enfold white? background.

    2. Hover State: white apple icon on dark grey background.

    Am I correct in understanding that I do this?:

    1. Normal State: In Photoshop, create a 64px x 64px SQUARE png file (grey apple on an enfold white background)

    2. Hover State: In Photoshop, create a 64px x 64px SQUARE png file (white apple on an enfold dark grey background)

    Is this the specific and correct procedure for what I want? Is the enfold background perfectly white? FFFFFF?

    Also, will 64px x 64px be enough to make this retina resolution?

    Thank you for your time

    #127306

    Hi,

    For the hover state, I created an icon inside a circle. I think 64×64 is enough for retina display.

    Regards,

    Ismael

    #127307

    Ok I’m using the square icons in the header but I get it. Thank you! I’ll give it a shot and get back to you.

    #127308

    Trial and error is probably the best way to really get it if the description and explanations above aren’t doing it. The effect can be achieve with either a transparent background on your icons or a colored background its just up to you which you want to do.

    If you are still having issues just link us to the page with what you have now and we’ll see if we can help.

    Regards,

    Devin

    #127309

    Thanks Devin. I really appreciate it. I’m going to test now and get back to you. Thank you!

    #127310

    Devin, small problem:

    1. I added Ismael’s code at the end of the custom.css

    2. I put apple.png and apple-hover.png in—-removed—-

    3. Problem: When I hover the apple icon shifts in the hover state. I specifically LOCKED the layers in Photoshop. The normal state apple icon and the hover state apple icon are exactly in the same place pixel for pixel. Do you have any idea why this is happening?

    See here > —removed—-

    The entire css is as follows:

    /* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

    /* General Custom CSS */

    /*
    Desktop Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

    @media only screen and (min-width: 768px) {
    /* Add your Desktop Styles here */

    }

    /*
    Mobile Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

    @media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */

    }

    #top .social_bookmarks_tumblr {
    background: url(...wp-content/uploads/apple.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr:hover a {
    color:#fff;
    background: url(....wp-content/uploads/apple-hover.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr a {
    text-indent: -9999px;
    }

    #127311

    I should mention the apple.png is a transparency and the apple-hover.png has a solid grey background. Is it the transparency that is causing the issue?

    #127312

    It should be:

    #top .social_bookmarks_tumblr a {
    background: url(http://yoursite.com/wp-content/uploads/custom/apple.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr a:hover {
    color:#fff;
    background: url(http://yoursite.com/wp-content/uploads/custom/apple-hover.png) no-repeat center;
    }

    So that the background is on the link and the hover as well.

    #127313

    Devin,

    Thank you for your help. I have one more question and problem.

    1. I actually had to do this. If I only used 2 entires then I end up with a weird distortion in my Apple icon. So I added the last line from the previous code. To result as this:

    #top .social_bookmarks_tumblr a {
    background: url(.......uploads/custom/apple.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr a:hover {
    color:#fff;
    background: url(........uploads/custom/apple-hover.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr a {
    text-indent: -9999px;
    }

    2. I now have a retina resolution problem. When I view this on an iPhone 5 and my Macbook Pro Retina the apple icon is pixilated. Any ideas for a quick fix for this. If I do it as 64px x 64px then it looks to large. I imagine I have to add something to the CSS to constrain the proportion then upload the 64 x 64 images. Will you help me with that?

    3. Would you mind going back through and deleting my personal links from this post. I abbreviated them above. Could you go back and abbreviate the others please?

    Thank you again for your help!

    #127314

    You can include a secondary option for retina with something from: http://css-tricks.com/snippets/css/retina-display-media-query/

    I’ve edited your previous posts and will mark this resolved for now. The css tricks retina trick is basically just duplicating what you have now for the background image except you will use a higher res image and it will only take effect on retina.

    eg:

    @media
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
    /* Retina-specific stuff here */
    #top .social_bookmarks_tumblr a {
    background: url(.......uploads/custom/apple-retina.png) no-repeat center;
    }

    #top .social_bookmarks_tumblr a:hover {
    color:#fff;
    background: url(........uploads/custom/apple-hover-retina.png) no-repeat center;
    }
    }

Viewing 22 posts - 1 through 22 (of 22 total)

The topic ‘Enfold > Theme Options > Header > Social Icon’ is closed to new replies.