blogging, CSS, wordpress

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:

<a class="imghoverswap" href="#"><img src="Insert_First_Image_URL_Here" /><img src="Insert_Second_Image_URL_Here" /></a>

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:

.imghoverswap img:last-child{display:none}
.imghoverswap:hover img:first-child{display:none}
.imghoverswap:hover img:last-child{display:inline-block}

(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.)

You can change the imghoverswap part to whatever you want, just make sure all four instances are changed to the same thing so they match and work together.

Happy swapping!

More CSS tips can be found here.

blogging, CSS, wordpress

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:

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:

Example of credit added to footer of Edin theme

Here’s the CSS I used to make that happen:

.site-info:before {
	content: "© Sarah Blackstock. | ";
}	

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 adjust the size and color of the credits, as pictured below, where I made mine orange and a bit smaller:

Example of changing color and size of credits in footer of Edin theme

Here’s the CSS I added to adjust the color & size:

.site-info {
	color: #fa7f77;
	font-size: 12px;
}

.site-info a {
	color: #fa7f77;
	font-size: 12px;
}

Notes:

  • The first section of code above targets the plain text, while the second batch (with the “a” added in) targets the linked text.
  • Change the hex color code from the orange I’ve used (#fa7f77) to one that matches your site.
    • You can also use simple color words there, so try putting “black” in place of the color code if that’s the color you want.
  • Adjust the font size from 12px to any other number you’d like.

Tweet, comment, or email with any questions. And let me know if there are any other CSS topics you’d like me to cover here. I’m totally willing to temporarily break my blog for you to figure things out. 😉

blogging, CSS, wordpress

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:

My header before CSS in the Edin theme

to this:

My header after CSS in the Edin theme

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:

.wp-image-3932 {
	border-radius: 50%;
}	

Notes:

  • Using Chrome Inspect to find selector for imageI 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.)
  • Change the border radius number until you see a look you like.
    • Changing it to 100% will also make a circle.
    • Changing it to 10% will give you rounded corners.
  • If your image is not a square, results will vary.
    • PicMonkey is great for quickly cropping images for the web.
  • Different browsers handle CSS differently, so it might not be universal. I don’t know what Edge or Internet Explorer will do, but if this CSS doesn’t work in a particular browser, your image will simply display as originally intended, which in my case would be a square. No big deal.

Adjust the Social Media Icons Widget

I was feeling too lazy to go find or make my own social media icons, so I decided to use the WordPress.com Social Media Icons Widget. But then of course I couldn’t just leave it as-is.

Here’s how it looks before (left) and after (right) along with the widget directly above it for reference:

Notice how the social media icons are larger and centered beneath the text? Here’s how I did that:

/*change alignment & spacing of social media icons in sidebar*/
#wpcom_social_media_icons_widget-2 {
 font-size: 200%;
 text-align: center;
}
/*change size of social media icons in sidebar*/
.genericon {
 font-size: 40px;
}	

Notes:

  • To replicate, add the Social Media Icons Widget to your WordPress.com site, then use the right-click Inspect method (remember?) to find which selectors to use to target the widget and icons.
  • In the first batch of code (lines 1-5):
    • The font-size number is controlling the spacing I added in between the icons. (I discovered that completely on accident, so who knows why it’s happening but I like it.)
    • The text-align is centering them within the sidebar.
  • In the second batch of code (lines 6-9):
    • Font-size increased the size of the icons themselves. (Play around with the number until they’re a nice size for your sidebar width and in relation to how many icons you’re using.)
    • You may have to get more specific than “genericon” for your selector, because if you have any other genericons on your site this code will change those too. I only have them in this one spot though, so it works for me.

Tweet, comment, or email with any questions. 🙂 Next time we tackle the footer credits!

blogging, CSS, wordpress

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 Header Image — because I haven’t made one and who knows if I will).

Adjust the Site Header

Here’s how it looked when I first added the theme onto my blog and put the menus in place:

My header before CSS in the Edin theme

In the Edin theme, when the Menu Style is set to Classic under Theme Options, the Primary Menu is the horizontal one under the site title (reading, my house, etc.), while the Secondary Menu is the one you see at the top right corner (about, now, contact). It all looks pretty standard and clean, but I like a little more color, so here’s how it looks right now:

My header after CSS in the Edin theme

It’s still basically the same. Nothing has moved anywhere, but with some slight adjustments it better fits my style.

Note: Your theme’s selectors (like .primary-navigation) for targeting a specific spot with CSS may vary, so you might need to find the correct ones for your theme. I explained how to do that under the “Here’s how I figured out what to target in Chrome” section in this post.

Here’s how I did it:

Change the Site Title’s Color & Size

.site-title {
 color: #fa7f77;
 font-size: 75px;
}

Alter the Primary Menu’s Colors

/*color of nav bar*/
.primary-navigation {
 background-color: #fa7f77;
}
/*color of links in bar*/
.primary-navigation a {
 color: #ffffff !important;
}

Notes:

  • See the notes I’ve added in between /* & */ ? Those comments can be really helpful in remembering what each bit of CSS is for and won’t interfere with how the code works on your site.
  • Change the colors to your own choices for the background color (the horizontal bar) and the text link color for the items in your menu.

Alter the Secondary Menu’s Colors

/*color of menu bar at very top*/
.secondary-navigation {
 background-color: #ffffff !important;
}

/*color of links in menu bar at very top*/
#menu-top a {
 color: #7ACCC8;
}

Notes:

  • Again, the comments (between /* & */) are helpful here, so feel free to use them too!
  • As with the other menu, change the colors to fit your own color needs. The first piece adjusts the color of the bar across the top, while the second handles the text link color.

Tweet, comment, or email with any questions. 🙂 Next time we’ll go over making a square photo round with only CSS and editing the look of the Social Media Icons Widget.

blogging, CSS

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:

My blockquote before adding CSS
Blockquote from RBG, Boss Bitch.

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:

My blockquote after adding CSS
Blockquote from RBG, Boss Bitch.

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 for how I use them).

CSS selectors vary, but if you can find what your blockquote is called (hopefully “blockquote” like mine to make it easy), you can get this working too. (This post on finding CSS selectors is helpful if they’re new to you.)

Here’s how I figured out what to target in Chrome:

Open Chrome and go to a blog post that has a blockquote. Then go to View > Developer > Developer Tools. (Chrome has info on this here.) Or right click on a blockquote on your site it, then click Inspect Element.

That’ll expand the DevTools area and show you the Elements section. When you hover over a line in there, it’ll highlight the corresponding area on your site so you can figure out which element/selector applies to a particular spot.

Below is a screenshot of where I found a blockquote in my DevTools window (and realized it’s called plain ol’ “blockquote” so I could use that to add the CSS).

Chrome DevTools inspecting my blockquote

And this is what happened on my site when I hovered over the blue line above:

Chrome DevTools inspect my blockquote

So helpful!

Once you’ve got your selector picked out, you can pop over to your CSS area and start tweaking. (If you’re on WordPress.com and have an upgrade that allows you to add CSS, you can do that in Customize > CSS.)

The CSS I used to adjust my blockquotes:

blockquote {
	border: 0;
	margin: 20px;
	font-style: italic;
	line-height: 1.5;
	border-left: 6px solid #D400AA;
	background: #fff;
}

Here’s what each of the lines of CSS are doing:

  • Line 1: Targets the blockquote & gets us started.
  • Line 2: The “0” reduced the default grey lines to nothing.
  • Line 3: The “20px” indented my blockquote.
  • Line 4: Italicized the text in my blockquote.
  • Line 5: Adjusted the space between the lines.
  • Line 6: Added a solid 6px thick line to the left. The #D400AA is the color.
  • Line 7: Sets the background color to white.
  • Line 8: Closes the code so it can get to work!

Ta-da! Now get quoting! 😀

CSS

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.

Harry Potter CSS Pun

Titanic CSS Pun

The Hulk CSS Pun

See more: 34 CSS Puns That’ll Make You Laugh, Even If You Aren’t A Web Designer

blogging, CSS

Better Blogging: Dress Up Your Highlighted Text

If you’ve got the access to add some CSS to your site, why not make the colors used in text highlighting more fun than the boring ol’ default? Click on some text on this page and highlight it to see it in action right now.

Here’s how text selections look here on sarahblackstock.com:

Example of colorful text selection using CSS from sarablackstock.com
From this post on sarahblackstock.com.

And here’s an example of it on cookiepocket.org:

Example of colorful text selection using CSS from cookiepocket.org
From this post on cookiepocket.org.

Here’s the CSS to make it happen:

::selection {
	background: #d400aa;
	color: #fff;
}

/* Firefox */
::-moz-selection {
	background: #d400aa;
	color: #fff;
}

Notes:

  • Change the color hex code where you see #d400aa to the background/highlight color you want, and the #fff to the color you want the text to be. (#fff makes it white & #000 will make it black, but you can choose any color you want.)
  • Look in your site’s settings for the color hex codes used so you can make it match, browse for color ideas here, or use a tool like ColorZilla to get the hex code for any color you see on your screen.
  • It might not work everywhere, due to browser differences, but this handles Chrome, Firefox, and Safari for me.
  • If you’re a WordPress.com user (like me!) with a Premium or Business Upgrade, you can add this CSS under Customize > CSS. Paste in the code above, edit the colors, and save.

Happy highlighting! 🙂