PopBetty

A Love Letter to Pop Culture

WordPress, Polka Dots, & a Bialetti Moka Pot

by

Wordpress, Polka Dots and Bialetti Moka Pot

Above: WordPress.org; Old Navy polka dot sweater; Bialetti 3-cup moka pot.

Hi everyone! Hope 2012 is treating you well (or at least better than 2011, my goodness). Here are some things I’m liking right now, and think you might too:

  • First, I broke down & bought the Old Navy polka dot sweater that’s been featured all over blogs & Pinterest. I haven’t received it yet, but I’ll post a mini-review when it arrives. So cute.

UPDATE: I returned the sweater. It’s cute in person, and good quality for Old Navy, but the print makes you look significantly wider/bigger up top. I’m short & curvy, so this just wasn’t the look for me. Two bloggers who make it look good, though: Mix & Match Fashion & Petite Little Girl.

  • Finally, I’m currently setting up self-hosted WordPress sites for several clients. In doing so, I’ve realized that I’m ready to transfer my blogs to WordPress. Typepad has been great all these years, but I need something more customizable & functional. I want jQuery slideshows and responsive site design like everybody else!

What are you guys currently enjoying?

Blog Upgrade: How to Make Colored Blocks With Rounded Edges Using CSS3

by

Hi guys! I’m working on several long-term projects, and recently discovered how to use CSS3 to create colored boxes with rounded edges. It’s a simple, effective way to break up text-heavy posts without additional images. It’s also good for highlighting text or separating sidebar info from the main post.

Here’s what I’m talking about:

Text Box 1
Text Box 2

Pretty! And it’s easy to do.

Here is the code I used (and here’s a list of web colors):

<div style=”background-color: #[YOUR COLOR]; border-radius: 20px; padding: 15px;  width: [DESIRED WIDTH]px; text-align: center;”>[YOUR TEXT]</div>

You can also use this code with images:
tulle top & patent oxford sandalsIt uses much the same code as before, but within the <img> tag:

<img style=”background-color: #[YOUR COLOR]; border-radius: 20px; padding: 20px; border: 0px;” src=”[IMAGE URL]”>

I like this method of creating boxes with rounded edges for several reasons:

  • It’s incredibly customizable: every value (the width, padding, etc.) above can be modified to suit your blog needs. Examples of the possibilities: one, two.
  • No JavaScript and no images needed.
  • My blogs are hosted by Typepad, and it’s not easy for me to fiddle with my blog template’s code. This script works in my Edit Post field (HTML view), with no other adjustments.
  • Google and other search engines can crawl your formatted text, something they couldn’t do if you’d created an image with text.

The only real downside is that CSS3 is not compatible with some older browsers (UPDATE: Or with Google Reader, phooey), meaning some people won’t see the rounded edges (though they should see everything else). Browsers evolve quickly, though, so this should be less and less of problem.