Need help? Check out our Support site, then


Changing scroll over text

  1. I am using the Collections theme, and would like to change the title and scroll over text of the "photos" icon to read "portfolio". Can anyone tell me how to do that?

    The blog I need help with is rogerswrites.com.

  2. Hi, I don't see a way to do that because all the icons use the same CSS class. Changing one would change all of them to the same thing, and the hover text is set in the theme PHP script files, and those cannot be edited.

  3. All the icons use the same CSS class, but each post format section has its own class, so this should do it:

    .photos .post-format-title {
    font-size: 0;
    }
    .photos .post-format-title:after {
    content: "Portfolio";
    font-size: 2rem;
    }
  4. @justpi, thanks for catching that. I probably should have gone to bed earlier. :)

  5. Thank you both so much! Justpi, it worked very well, thank you!

  6. You're welcome!

    "Portfolio" shows ok in Firefox but it's misaligned in Safari. Yours is a premium theme, so I can't use it in my test blog to find out what's wrong: thesacredpath can probably tell us.

  7. Portfolio seems aligned the same in Safari and FF for me. Are you talking about the entire block not being aligned with Quotes at the bottom @justpi?

  8. I do see a slight difference in the spacing between Portfolio and the smaller text below it.

  9. I meant the word isn't centered; here you are:
    http://wpbtips.files.wordpress.com/2013/11/rogers.png

  10. Hmmm, interesting @justpi. I see the misalignment in Chrome, but not in Safari 7.0. What version of Safari are you on?

  11. I'm ashamed to say I'm on 5.1.10...

  12. No need to feel ashamed. 5.1 was a good version. Not sure what is causing that issue. on Chrome though - or Safari 5.1 for that matter. I think it has something to do with the font size 0, but that is just a suspicion.

  13. Probably (but I have used this kind of trick many times, with no such side-effect.)
    Assuming I can trust Web Inspector on this, the alignment gets corrected if I add this to .photos .post-format-title:after:
    display: block;

    Any way to make something disappear, other than font size 0? (I mean except display none, which won't do when you need its before or after.)

  14. Any way to make something disappear, other than font size 0?

    Possibly "visibility," but stuff like that can get pretty tricky/hacky. Another (fairly common) hack is to use "text-indent: -9999px" to hide text but keep the element's space in tact.

  15. Thanks Sheri. I'm familiar with both, but they won't do in cases like the above.

  16. I think both would work actually—not that they're needed now, your solution seems to work great. I was just proposing alternate ideas since you asked (your last question seemed unanswered when I was spot-checking threads).

    .photos .post-format-title {
    	visibility: hidden;
    }
    .photos .post-format-title:after {
    	display: block;
    	content: "Portfolio";
    	font-size: 2rem;
    	margin-top: -2.5rem;
    	visibility: visible;
    }
    .photos .post-format-title {
    	text-indent: -9999px;
    }
    .photos .post-format-title:after {
    	display: block;
    	content: "Portfolio";
    	font-size: 2rem;
    	margin-top: -2.5rem;
    	text-indent: 0;
    }

    All 3 examples in this case seem sixes to me with your "display: block;" update. :)

  17. Thanks again! Sorry for the sloppy reply: I guess I should have said they won't do without additional rules.
    (On a funny note, I sort of hate the text-indent hack: whenever I see it I can't help thinking that the text is still there, only it's hanging in midair some 4 feet left of my monitor...)

  18. :) Now I'm not going to be able to see the text-indent hack any other way! You're right, it's like there's text floating out to the left somewhere. I do see why some people use that hack for accessibility reasons though—from what I understand, screen readers still read indented text, so that's the main reason you'd want to use it (to hide text but keep it readable for screen readers). In this user's case, it's not needed because they're replacing text. I wasn't reading too closely before because you had the issue resolved—I was more interested in the CSS techniques part of the conversation.

    I've never seen the font size 0 hack before btw, and I like when I see different/interesting stuff in these forums! I *really* like conversations like this one because it helps me think more critically about techniques.

  19. I like such conversations too!

    Screen readers? Interesting - hadn't thought of that. On the other hand, I think I've seen cases in the CSS of some themes where a decent display:none would have been fine; could be wrong, though.

    You've never seen the font-size:0 hack? Then I can claim I invented it!
    But that's not true, of course: I merely thought of it independently. Now that you pointed this out, I searched and found it in the CSS of at least a couple of themes.
    As you understand, I thought of it as a way to keep something in place but make it take up zero space. On a couple of cases it produced some strange artifacts in my Safari. (Care for a screenshot if and when I manage to reproduce this?) To get rid of them I had to add color:transparent.

  20. Nah (on the screenshot). I'll test it myself if I should run across it in the forums again, and I'll keep it in the back of my mind as a possible solution for some cases too.

    Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic