Support » Themes and Templates » Any CSS experts here?

  • Hello WordPressers,

    I am completely new to creating themes and relatively new to CSS: I only know some basics.
    However, I have a tweet button on my website and would like to use the same style of the button for the “Read more…”-text.
    It works so far, however, the only thing that does not work is: The link is 100% in width and I don’t know how to make it shorter.

    The index.php where the code is looks like this:
    <?php the_content('<div class"weiterlesen"><div class="retweet"><span class="left"></span>Den ganzen Beitrag lesen »<span class="right"></span></div></div>'); ?>

    The CSS looks like this:

    .retweet { height: 16px; background: url('http://zulu.tweetmeme.com/b.gif') repeat-x 0px -100px; margin: 3px 3px 0px; display: block; cursor: pointer; padding: 0px 0px 0px; font-size: 11px; color: #FFF; text-decoration: none; line-height: 16px; position: relative; text-align: center;}
    .retweet span { display: block; position: absolute; background:url('http://zulu.tweetmeme.com/b.gif') repeat-x; width: 3px; height: 16px; top: 0px; }
    .retweet span.left { left: -3px; background-position: 0px -84px; }
    .retweet span.right { right: -3px; background-position: 3px -84px; }
    
    .retweet:hover, .retweet.selected { background-position: 0px -132px; color: #80b62a; }
    .retweet:hover span.left, .retweet.selected span.left { background-position: 0px -116px; }
    .retweet:hover span.right, .retweet.selected span.right { background-position: 3px -116px; }
    
    .retweet a:link { color: #ffffff; font-weight:normal; text-decoration: none; }
    .retweet a:visited { color: #ffffff; font-weight:normal; text-decoration: none; }
    .retweet a:hover { color: #95cd3c; font-weight:normal; text-decoration: none; }
    .retweet a:active { color: #95cd3c; font-weight:normal; text-decoration: none; }

    Does anyone have an idea?

  • The topic ‘Any CSS experts here?’ is closed to new replies.