WordPress.org

Forums

Museum Core
[resolved] remove envelope icon from email address link (5 posts)

  1. julesjunction
    Member
    Posted 2 years ago #

    I am using Museum Core theme and am having trouble with the CSS code to remove the background envelope icon from displaying behind email address links,

    I have found this in the theme style.css
    a[href^="mailto:"] { background-image: url(icons/email.png); }

    and used this in chrome browser to test it
    a[href^="mailto:"] { background-image: none; }

    which works on the fly but I can't get it to work from the theme custom css area.

    Hope I've explained this well enough.

    Any ideas on what I can put in the theme custom css area so the envelope icon doesn't show behind an email link?

    Thank you.

    http://wordpress.org/extend/themes/museum-core/

  2. Chris Reynolds
    Member
    Theme Author

    Posted 2 years ago #

    I just answered this here and sorry I didn't see your post until now (I'll blame it on the holidays even though I'm not sure whether that's actually the case or not).

    Here's the fix:

    On the Advanced tab of your Theme Options, add this to the Custom CSS area:

    a[href^="mailto:"] {
    padding-left: 20px;
    }

    ...but I'll tell you the same thing I told him:

    I wouldn't put a link to my email address publicly on my web page because it's basically just asking for spambots to crawl it and autosubscribe you to some spam list. Making it a hyperlink (as opposed to un-linked text) is essentially saying that this is a live link to a real email address (as opposed to a text link, but that can still get crawled by bots and added to spam lists). I'd recommend the contact form that is built into Jetpack or Gravity Forms or some other contact form that has some method of spam prevention built in and using that instead of publicly posting your email address.

  3. julesjunction
    Member
    Posted 2 years ago #

    Hi Chris, thank you for the link to the general thread, sorry I hadn't seen that one, I came straight to the theme area.

    I have added your suggestion to the Custom CSS area on the Advanced tab but it still isn't working, it is still picking up the CSS in the theme style.css and showing the icon.

    I have typed the following into the Custom CSS area and saved:
    a[href^="mailto:"] {
    background-image: none;
    padding-left: 20px;
    }

    however, when I go back into the Custom CSS area it has additional \'s added and changed to:

    a[href^=\"mailto:\"] {
    background-image: none;
    padding-left: 20px;
    }
    I've also done it without the background-image:none; too, so just with the padding.

    What am I doing wrong? How is it getting those extra \'s and is that why it isn't working?

    It's probably one of those doh! moments and I'm tired but it's doing my head in :)

    The website is http://swanwickstudio.co.uk/

    Thanks, Jules

  4. Chris Reynolds
    Member
    Theme Author

    Posted 2 years ago #

    Hmm...well, I know why it's adding the \'s, but there's nothing you can do about that until there's an update to the code. The next version of the theme that I'm trying to push out fixes this issue anyway (with the padding) -- what you could do in the meantime is just add that to the style.css of the theme from the Editor page. You'll lose the change when you update, but when you update it will be fixed anyway. Another option is if you have Jetpack installed or if you installed My Custom CSS, you could add it to their CSS editors, but it's safe enough to do this hack to the theme's style.css since it will be fixed in the next update.

  5. julesjunction
    Member
    Posted 2 years ago #

    Thanks Chris for your response, really appreciate it :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic