Centering Embeds on WordPress.com

One of the cool things WordPress.com handles is media embeds. Instead of messing around with a bunch of embed codes, your WordPress.com site is setup to use oEmbed. This means if you want to share something like a YouTube video, you can just put the YouTube video’s link into your post and we handle the rest.

The tricky thing about embeds though is they can be tough to style if you want to do something specific with them in your post. With some services WordPress.com also provides shortcodes, but those don’t give you full design reign either.

The most common request I see is to center up an embed with a post or page’s body. While it’s hard to apply styles to the embed itself, we can definitely apply styles to an HTML element that surrounds the embed, like a div.

Using CSS Flexbox, it’s then pretty easy to center up that embed. Here’s a video:

The code I use that in video is the following:

<div style="display:flex;justify-content:center;">

// Link to embeddable content here

</div>

You can also see it in action on yesterday’s post.

If you have questions specific to your WordPress.com site, contact our staff at WordPress.com/Help.

How I Customized Hew

When the designers at WordPress.com released the theme, Hew, I immediately liked it. I had been using Vertigo because it was unique and odd, just like me. It also used post formats, which I like.

But Hew gave me a chance to turn my page into something less driven by the theme itself and more representative of me. And it still had post formats. 🙂 When you start off, Hew looks like this:

A simple layout… hidden widget area… sections of color… cool. But there was work to be done.

I loaded up my Customizer to look at colors. I live my life in greens and blues, so I picked out a palette first that had some green and blue with dark grey.

Theme doesn't need all the colors? Even better.
Theme doesn’t need all the colors? Even better.

After picking the palette, I found a few color irregularities but fixed those up in the CSS.

I stuck with the default theme font, because I am not a font nerd. Not comic sans or papyrus? Then we’re all set.

Hew automatically sets your header image (tiny little square at the top) to your Gravatar, which is good because I don’t feel like updating my face in more than one place anyway. Gravatar, FTW.

When I made the theme switch I also adjusted my navigation menu. In Vertigo the navigation is below the content, so I treated my links there similar to “More Posts” links. Lots of category pages. Not the case in Hew, so I edited down to just “About” and my reading updates (which I’m doing poorly.)

Hew also uses a social links menu, so I whipped up one of those with my Facebook, Twitter, Untappd, LinkedIn, and WordPress.org profiles. WHAT? Genericons doesn’t have an Untappd icon? It’s okay. There’s a billion social networks and a lightweight icon font shouldn’t have them all. I’ll fix it in the CSS later.

Widgets! I used to have a Twitter timeline at the bottom of my page in Vertigo. With a social links menu, this seems bizarre because why have my timeline when you can click on the little birdy? Gone. I still have the Goodreads widget appear (on my reading posts only) and left some of the navigation links. I really like having this kind of thing hidden behind the menu button.

And then the big stuff, CSS. In 53 lines of it, this blog becomes my customized creation. My first step, wrangling my damn 2015 Reading page. And I’m not talking about how slowly its filling up with books I’ve read either. No! The display-posts shortcode is handy, but tough to keep it all looking pretty. Here’s what I’m running to help:

/******************************
Make display-posts prettier
******************************/
div.listing-item {
margin: 1em 0;
}
img.attachment-thumbnail {
padding-bottom: 30px;
}

So far it seems like this avoids any weird lines beneath the images, and keeps each listing looking separated enough.

Next up, refine those colors:

/******************************
Make stuff match the header color: Line under links, botton colors
******************************/
.entry-content a {
border-bottom: 1px solid #94BA65;
}
button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span {
background-color: #94BA65;
}
/******************************
Change widget wrapper color to something with less blue
******************************/
#widgets-wrapper {
background-color: #2790A0;
}
/******************************
The comment meta box should match the header color
******************************/
footer.comment-meta {
background-color: #94BA65;
}

I seriously should live in a world where only 3 colors exist. Makes things easier to match. I think my wife still finds the widget wrapper to clash with the green. But I like it.

Remember that missing Untappd icon? Yeah we can fix that. Eric Coram, real man of genius, had an untappd transparent icon which I found through google images. I took that one and made some adjustments for my needs. That’s the beautiful icon you see up in my menu now. In the Custom Menu settings you can set CSS classes for menu items, and I made use of that to make an “untappd” class for my CSS:

/******************************
Change the untappd icon in social links menu
******************************/
li.untappd a::before {
content: url('https://alexjgustafson.files.wordpress.com/2015/02/icon-untappd-2561.png');
margin-top: -6px;
margin-bottom: -8px;
}

And last, but not least, my big long name caused some problems. On smaller screen widths, Hew would cut off my name and overflow it with an ellipsis. I did not want this. So I added a media query to change the title’s font size instead:

@media screen and (max-width: 509px) {
.site-title a {
font-size: 70%;
}
}

While writing this post, I also noticed that code styling in Hew isn’t too distinct from standard text. So I added some CSS to clear that up too:

code{
display: inline-block;
margin-left: 50px;
}

The customization never ends! But this is what I’m running. Feel free to steal copy any of it for your use as well.

Spoiler Text

My wife gave me a mini code challenge for her post today.

She wanted to hide some spoilers from a book review. We’d rather hide the spoilers behind a click or hover, and I normally would accomplish that with a bit of jQuery, but her blog is hosted on WordPress.com so interactivity wasn’t really an option with only CSS available for editing.

A simple, one-time solution could’ve been to change the text color of the spoiler to the same as her background color, allowing the reader to highlight the text and read the text. But I wanted to give her something she could use again in future book reviews, so this little CSS class seemed easy enough.

I helped her wrap the spoiler text in some span tags:

<span class="spoiler-text">Spoiler</span>

Then added this CSS to her WordPress.com Customizer.


.spoiler-text {
     background: #574d4d;
     color: #574d4d;
     display: run-in;
}

.spoiler-text::before {
     content: "Highlight to read Spoilers";
     color: #fff;
     display: run-in;
}

The result is an inline block of color you can highlight to reveal the spoiler, with a note added.

spoilertextonbrewsandewes

The color #574d4d was her original text color, so that’s what I went with for the color block. Changed the text color for the class as well in case she edits her default text color in the future.

She liked this well enough so it’s up and running. 🙂

Leave a comment if you have other ideas on how to handle spoiler text with only CSS.