Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with creating a HTML/CSS email signature

    Hey Folks.

    Check this out. Here's what my current email signature looks like - just a simple image.


    And here's what I wanna do.


    I got the inspiration from here: http://ewebbed.com/#who/

    Can anyone help me out plz!
    That would be a really dope email signature and everyone else can use the template for their Apple Mail, Postbox and other email clients that allow CSS.

    Let me know plz.
    -Joey

  • #2
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok guys... I just got the CSS & HTML code just please help me put it together.

    css
    Code:
    .shadow1{padding: 15px; margin: 0 10px 20px -14px;background: url(../images/containers/news.png) no-repeat left top;}
    .article-left{clear: both;}
    ***.article-left .shadow1{float: left;display:inline; margin-right: 15px;}
    ***.article-left h2{float: left;height: 18px; width: 610px; padding: 40px 0 10px 0;}
    
    ul.who-connect{float: left;display:inline; position:relative;width: 304px; height: 37px;background: url(../images/containers/connect.png) no-repeat left top;}
    ***ul.who-connect li{text-indent: -1000em;}
    ***ul.who-connect li a{position: absolute; top: 9px;display: block; width: 49px; }
    ***ul.who-connect li.connect-email a{height: 13px;left: 100px; background: url(../images/icons/connect-email.png) no-repeat left top;}
    ***ul.who-connect li.connect-email a:hover{background-position: left bottom;}
    ***ul.who-connect li.connect-twitter a{top: 8px;height: 16px;left: 165px; width: 52px;background: url(../images/icons/connect-twitter.png) no-repeat left top;}
    ***ul.who-connect li.connect-twitter a:hover{background-position: left bottom;}
    ***ul.who-connect li.connect-linked a{top: 8px;height: 16px;left: 230px; width: 55px;background: url(../images/icons/connect-linked.png) no-repeat left top;}
    ***ul.who-connect li.connect-linked a:hover{background-position: left bottom;}

    html
    <div class="article-left">
    <span class="shadow1">
    <img alt="spread awareness" src="http://ewebbed.com/resources/images/articles/spread-awareness.jpg" />
    </span>
    <h2 class="cufon">name</h2>
    <p>James has a background in ecommerce, application programming, UX & front end design/development. When he’s not coding/designing/sleeping he’s a ‘gnarly’ skier who likes to play the guitar…poorly.</p>
    <ul class="who-connect">
    <li class="connect-email"><a title="email" href="/contact/&person=james-cooke">email</a></li>
    <li class="connect-twitter"><a title="twitter" href="#">twitter</a></li>
    <li class="connect-linked"><a title="linkedin" href="#">linkedin</a></li>
    </ul>
    </div


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •