Posts Tagged ‘CSS’
|How to modify the Facebook Share button
Tuesday, October 27th, 2009
The first thing I thought when I found out about the new Facebook Share button was: “Cool! I’m going to add it to my blog right away.”
The first thing I thought after I installed it was: “Why couldn’t they make the button height 15px like most of the other sharing buttons around???”
Yes, I was pretty annoyed by having buttons at the top of my blog posts with different heights, so I decided to try to modify the css of the button myself. Here’s the result:
.FBConnectButton {
height: 15px;
float: left;
background-position-y: -251px;
background-position-x: -1px;
border-bottom: 1px solid #1a356e;
}
.FBConnectButton_Text {
font-size: 8px ;
height: 9px;
}
.fb_share_count_inner {
height: 9px;
position: relative;
}
.fb_share_count .fb_share_count_right {
float: left;
}
Just copy and paste these few lines of code into your CSS file and your Facebook Share button should be the same size of your compact Tweetmeme button.
I may do more modifications in the future to improve the look of this reduced version, but for now this is usable enough for my blog.
Tags: CSS, Facebook, Facebook Connect, How to
Posted in Design, Developing | 10 Comments »
Trick of the day: hide Tweetmeme’s button number
Sunday, August 30th, 2009
Tweetmeme is a great plugin that makes it easier for your reader to retweet your posts. But, if you don’t have a high number of retweets, especially in the beginning, it might look a little sad seeing all those zeros on your page.
While working on a friend’s WordPress blog, I was asked to remove the number from the Tweetmeme button (in the compact version). Of course this can’t be accomplished from the settings page, so it required little bit of CSS work.
Here’s the code generated by the Tweetmeme WordPress plugin in your post:
<div class="tweetmeme_button" style="float: left; margin-right: 0;"><iframe src="http://api.tweetmeme.com/button.js?url=http%3A%2F%2Fwww.fdavidedicillo.com%2F%3Fp%3D1160&source=
DavideDiCillo&style=compact" height="20" width="90" frameborder="0" scrolling="no"></iframe></div>
And here’s the code you need to add to your stylesheet in order to remove the number from the Tweetmeme button:
.tweetmeme_button { overflow: hidden; width: 70px; }
.tweetmeme_button iframe { position: relative; left: -10px; }
For those of you not familiar with CSS, what we’re doing is simply telling the container of the IFRAME (which contains the actual button) to hide everything that goes beyond its borders. We then forced the IFRAME to move 10px to the left, pushing the number outside the container’s borders.
Tags: CSS, How to, Plugins, Trick of the day, Tweetmeme, Twitter, Wordpress
Posted in Whatever | 20 Comments »
No-frills redesign
Monday, July 27th, 2009
Finally my blog is using a WordPress theme I created myself.
The previous theme was done by a German designer, and even if I really liked it, it had a few problems:
- It wasn’t “mine.” My job is designing user interfaces, it would make sense to design the one of my blog.
- It had rounded corners. Don’t get me wrong, I love rounded corners, but, if they are done by javascript, when you try to customize, it might be a pain, mainly because of some cross-browser issue.
- The automatic icons and other things in the sidebars were annoying me.
On top of that, I really wanted to try a few new things:
- CSS3. Not really a lot so far, but if you are using Safari, you can appreciate a little effect on the top navigation.
- Cufón. This is definitely the most noticeable feature. It replaces fonts on-the-fly using canvas and VML. If you are wondering what font I’m using for the headers, it’s called Museo, and you can find it here.
- 960.gs. I’ve never used CSS frameworks before, so I thought my blog could have been a good test field. For sure, for quick projects, I may use it again.
- I also wanted to create a theme simple and easy to use for testing plugins and other things I might work on.
Well, after a weekend of work, here’s the result. Of course I will work on it more in the next few days to smooth out the rough edges.
I hope you guys like it. If not, I guess I’ll live with it.
But, if you feel like dropping a comment, I’d really appreciate it.
Tags: CSS, Design, Fonts, Javascript, Theme, Wordpress
Posted in Whatever | No Comments »
Find me here