All posts tagged: CSS

Better Blogging: CSS Image Swap on Hover

Just in case you ever want to display one image and have it swap to another one when someone hovers on it, here’s how! Hover your mouse over the image below (Yay, Bitmoji!) and you’ll see what I mean. I came across this method for swapping images on hover here and it worked better (and on more browsers) than methods I’ve previously tried, so it’s the one I’d use for now. (Note: The directions here work if your site is on WordPress.com and has an upgrade that allows Custom CSS.) In the Text Editor on a page or post or a Text Widget, paste the following HTML where you want your image to appear: Edit the HTML to include the URLs to your images in the two spots designated in the code above. Save/publish. Then go to Customize > CSS and add this: (If you’re using your own install of WordPress, you can do this with the Jetpack plugin with the Custom CSS module activated. Once activated, paste the CSS in Appearance > Edit CSS.) …

Get in Formation

I hope you’ve watched Beyonce’s Formation video.  And also saw her at the Super Bowl, because: YESSSSSSSSSSSS. I basically turned on the game to wait for the Halftime Show to start while eating chips and queso, so it was a win. Bruno Mars is adorable and Beyonce is fantastic. (Also, Coldplay was there.) If you’re all caught up, here’s what I was up to over the past week: I changed my blog’s theme and discussed the CSS used to personalize it. I covered customizing the header and menus, made a square photo into a circle and altered the social media icons, and showed how I added my own copyright credit down in the footer on my site. I also shared a poem I recently found and loved. I spent the weekend dealing with the start of a big bathroom renovation. It looks really bad in there now and it’ll be a while before it’s done and will probably cost more than I want, but it’ll be worth it. I hope. And I made downloadable desktop wallpaper and …

Better Blogging: Notes on a Design Change

Today I’ve got more notes on my blog’s recent theme change. This time, we’ll be checking out how to add a credit to the footer, and also change the look of the existing credits down there too. If you missed a previous CSS post, browse my blogging tips tag, or check out these posts: Fix Up Your Blockquotes Dress Up Your Highlighted Text Notes on a Design Change, Part 1 (Site Header) Notes on a Design Change, Part 2 (Round Image & Social Media Icons) Add a Credit to the Footer I added CSS so I could have my own credit down in the footer next to the existing two. See: Here’s the CSS I used to make that happen: Notes: Different themes label the footer credit area differently, but Edin (and several others) will use this selector to target it. Use the right-click Inspect method again (here!) in Chrome to find the correct selector for your theme. Switch “before” to “after” to move your credit to the end. Edit the Size & Color of the Footer Credits You can also use CSS to …

Better Blogging: Notes on a Design Change

Continuing on with the notes on my blog’s recent theme change, I’ve got more tips for customizing your blog and CSS today. Last time, I shared how I used CSS to take the header from this: to this: I’ve also previously discussed how to customize your text highlight color and style your blockquotes to make your blog more personalized. This time, we’ll see how to turn a photo from square to round with CSS, and learn some simple adjustments that can be made to the Social Media Icons Widget on WordPress.com. Round a Photo’s Corners I added a photo of me to my about page. It started out cropped as a square, then I used CSS to make it display as a circle on the page. Here’s the code I added: Notes: I figured out how to target the image (with the wp-image-3932 selector) seen in line one by right clicking on it on my about page, then clicking Inspect in Chrome. (See the screenshot to the right.) I explained this process under the section titled, Here’s how I …

Better Blogging: Notes on a Design Change

I switched the theme of this blog from Singl to Edin recently. They’re both free themes by Automattic on WordPress.com, and are also available for download to use on self-hosted WordPress sites. (Not sure of the difference? See here.) I’ve shared some CSS tips here before, on styling blockquotes and changing the color of your highlighted text. And since changing themes means changing CSS, I thought I’d share a few details on some adjustments I’ve made to the Edin theme so far. If you’re a WordPress.com user (like me!), you’ll need the Premium or Business upgrade to add CSS under Customize > CSS. Note: I’ve left the blockquotes as-is (but the same CSS would work on this theme) and made my highlighting color match the new orange with the same method I shared before, so those directions remain the same. The masthead area in Edin includes the site title and two menus, so of course I had to tweak those a bit to get a more customized look (while still leaving it super simple and not using a …

Better Blogging: Fix Up Your Blockquotes

I recently shared some CSS for changing how your text highlighting works on your blog, so how about we work on your blockquotes now? This blog is on WordPress.com using the Single theme, so if you happen to be using both of those, this will be extra simple for you. 😉 Here’s how the theme’s default blockquotes looked: Perfectly fine, but not quite right for the look I’m going for here. Sure, I want it to be minimal (and it is), but those grey lines at the top and bottom weren’t for me, so I added some CSS to make a few adjustments. And here’s how blockquotes look today: Ah, that’s better! The pink line fits more with the rest of the site and I like the quotes in italics. (I was italicizing them manually a lot of the time lately, so this is simpler and more uniform.) Now the blockquotes stand out more, but don’t feel quite as divided from the rest of the post as they did before with the horizontal lines (and that works better …

Puns & CSS

Listen, I love puns. I will literally buy a cake from you because you called your bakery, Nothing Bundt Cakes. And since I often spend my days looking at CSS, these are just my thing. See more: 34 CSS Puns That’ll Make You Laugh, Even If You Aren’t A Web Designer