Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 31, 2013 at 5:10 am #182814
    Michae1

    I know this is not currently a feature in Enfold (per the original thread here : https://kriesi.at/support/topic/social-icons-set-hover-text/ ) but I need to add it anyway for a client :) So could you point me in the right direction of what file to edit, or perhaps a plugin? Thank you.

    October 31, 2013 at 6:23 am #182831
    Josue

    Hey Michae1!

    You would need to edit this file: /enfold/includes/helper-social-media.php, play with the html() function declared in line 84.

    Put the text string you want and then make a behavior part with CSS.

    Best regards,
    Josue

    October 31, 2013 at 7:42 am #182850
    Michae1

    Josue,

    Thank you for pointing me in the right direction. I only have minimal PHP experience. If you could guide me a little, I promise to spend as many hours as needed sifting through the PHP manual for a more complete understanding :)

    As I see it, it seems like I would need to inject a variable for the hover text either between lines 94/95 or 99/100. Then either designate the strings for the actual text in the CSS, or add a parameter for the text in /enfold/css/layout.css ?

    Would there be other files (besides the custom styles.css) that I would need to edit, or just this function? Trying to jump from the kiddie pool to the lake (or possibly ocean) as it were, so any help (flotation devices) you might have for me would be greatly appreciated. Thank you!

    – Michael

    November 2, 2013 at 8:04 pm #183770
    Josue

    Hi Michael!

    I think you’d need to add the string here actually (inside build_icon):

    What are the strings you want to add? are they the same? how many icons do you have?

    Best regards,
    Josue

    November 2, 2013 at 10:46 pm #183805
    Michae1

    Hi Josue,

    Thank you for your help. There are only 4 icons, each string would be different – all the icons are obvious (facebook, twitter, pinterest) except the one we use for their “Blog” (an open book) http://bit.ly/1ak0ySH I’d probably just use the names as hover text, or possibly a short call to action like “Friend us on Facebook” or something like that.

    So, I see this is the function that’s dynamically building out the link. Would the best way to accomplish what I’m trying to do, be a switch case or if/else statement here? What would I set to determine the hover text then, alt or title attribute? Or should I provide/pass another argument for the alt/title/hover text in the functions.php?

    This is where I get confused. What to put where to best accomplish the task of hover text.

    If you could post an example of the format, that would greatly appreciated. Thank you!

    BTW, do you use Sublime Text 2 too? I love that IDE :)

    November 3, 2013 at 1:31 am #183826
    Josue

    Hey!

    You could make it static, using this variable: $this->counter, which holds the number of the icon, with that you can make a conditional like this:

    switch ($this->counter) {
    case 1:
        $string = "first_string";
        break;
    case 2:
        $string = "second_string";
        break;
    case 3:
        $string = "third_string";
        break;
    case 4:
        $string = "forth_string";
        break;
}
$html .= "<span>$string</span>";

    http://php.net/manual/en/control-structures.switch.php

    Regards,
    Josue

    November 3, 2013 at 8:09 am #183882
    Michae1

    Hi Josue,

    Thank you for all your help and the example. I think I’m getting closer. Still having a little difficulty determining next step though. I’ve placed the above example code on line 75 just before the “return $html;” line. Is that where it should be? Because the affect was just that it added static text of each of the strings below the Social Icons. Nothing on hover though.

    My next thought was that I just need to assign a class to the $string span and set it to display:none or hidden; then style it as desired and set the a:hover to visible. But I feel like I’m missing a key step where $string is assigned to a “title” or “alt” tag?

    Thank you again for your help.

    November 6, 2013 at 5:13 am #185055
    Josue

    Hi,

    Can you post the link to the website you are working please?

    Regards,
    Josue

    November 6, 2013 at 6:43 am #185076
    Michae1

    It’s posted above, but here it is again http://bit.ly/1ak0ySH

    November 6, 2013 at 7:29 pm #185295
    Josue

    It looks like you didn’t add the ‘switch’ code, here’s how it look on my end with that code applied:

    Regards,
    Josue

    November 7, 2013 at 1:47 am #185425
    Michae1

    I added it, but then deleted it because it was not functioning as “hover / mouse over” text. The text appeared, but just under the icons. What I want to do is have it appear like a tooltip. What would I need to do to accomplish that?

    November 7, 2013 at 4:39 am #185473
    Josue

    Hi!

    That’s the structural part, the behavior would need to be done with CSS, with something like this:

    /* This hides it by default */
.social_bookmarks span {
    display: none;
    position: absolute;
    top: 30px;
}
/* This show them on :hover */
.social_bookmarks li:hover span{
    display: block;
}

    Cheers!
    Josue

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Social Icons : Set Hover Text’ is closed to new replies.