Centering Apostrophe Them

Hi Michelle,

I just managed to center the content in the pages (I had forgotten to set the pages to full width), but I would still like to see the header and menu centered

To centre your titles, add the following snippet to your child theme’s style.css file:

.page-title, .entry-title {
    text-align: center;
}

You can then centre the menu on desktop devices with the following:

@media (min-width: 767px) {
.menu-menu-1-container {
    text-align: center;
}

#menu-menu-1 {
    display: inline-block;
}
}

Also, I just realized that the category (or tag) labels on my blog posts are in a button format which does not seem to have a way to edit the color. Can I edit the color (to match my blue, not the purplish color that is there) or can I remove the buttons and just have linked text there?

To change the background colour of those links and the colour of the links themselves, use the following snippet in your child theme’s style.css file:

.entry-meta, .edit-link, .comment-reply-link, .entry-footer a[rel="tag"], .entry-footer a[rel="category tag"], #infinite-handle span, .entry-footer a[rel="category tag"] {
background: #FFF;
color: #404040;
}

The above sets the background of the links to white (#FFF) and the colour of the links to a dark grey (#404040).

You can change either of those to the hex code of your choice. #003d84 could be used to match the blue of your site.

If you’d like to experiment with different colours, try a few Google searches to get a list of hex codes and their corresponding values. Here’s an example of a site that I’ve used before:

http://www.color-hex.com/

You would also need to change the colour of the background upon hover. The following changes it to white to effectively remove the hover effect if used with the above snippet:

.entry-footer a[rel="tag"]:hover, .entry-footer a[rel="category tag"]:hover {
background-color: #FFF;
}

Additionally, each actual post and portfolio page is still not centered. Like here:

http://new.mmdrdesigns.com/first-post/hello-world/

If you are certain that you’re not going to make use of the theme’s built in sidebar then the simplest way to hide it and expand the width of your main content area is with the following CSS:

#secondary {
    display: none;
}

#primary {
    width: 100%;
}

If you’re fairly comfortable with code and would like to completely remove the underlying HTML for the sidebar, then an alternative is to follow these steps:

• Copy single.php from your parent theme to your child theme’s directory.
• Remove the call to <?php get_sidebar(); ?> from the file.
• Add a full-width to the list of classes in the top div, like so:

<div id="primary" class="content-area full-width">

Let me know how you get on with that or if any extra questions come up.

Hi Michelle,

The one thing that still is not centered is my logo at the top. The logo is more of a banner and seems to still be left justified.

Sure thing! The following snippet will centre your logo for you:

.site-logo {
    float: inherit;
    margin-bottom: 0;
}

.site-branding {
    text-align: center;
}

Also, the change for the buttons on the posts page worked great! But it then changed the color of those same label/buttons on the main blog and portfolio pages to white (with white text).

Ah, I see that those labels/buttons are targetted separately in the theme’s CSS. You can use the following to set them to the same dark blue colour as the labels on your single posts:

.entry-meta a, .edit-link a, .comment-reply-link a, .entry-footer a[rel="tag"] a, .entry-footer a[rel="category tag"] a, #infinite-handle span a {
color: #404040;
}

If any questions come up, please don’t hesitate to let me know.

Hi Michelle,

I don’t recommend editing the parent theme’s style.css file directly as any changes will be lost when it comes time to update your theme. Additionally, it’s not necessary to copy over all of that file’s CSS to your child theme. You only need to add the customisations you want to make to your site via your child theme’s style.css file.

You could make all of text on your site slightly smaller using the following custom CSS:

body {
    font-size: 1.9rem;
}

Decrease the value of the font-size to your liking. Decrements of 0.1 are enough to have an effect e.g. 1.8rem, 1.7rem, etc.

Your headings can be specifically targetted with the following:

h1 {
    font-size: 1.5rem;
}

Again, decrease the value of the font-size to your liking.

Finally, your images’ captions can be targetted with this snippet:

.gallery-caption {
    font-size: 1.6rem;
    font-style: italic;
}

The above will change the font-size of your captions and italicise them.

It sounds like you might also be interested in learning some CSS for yourself. It’s definitely a great skill to learn! 🙂 I recommend the following resources as a starting point:

https://developer.mozilla.org/en-US/Learn/CSS
https://www.codecademy.com/learn/web
http://htmldog.com/guides/css/

I’d be happy to help with any questions that come up, too.

Hi Michelle,

I am using JetPack’s custom CSS editor and sometimes when I preview the changes, it doesn’t show up, but then I exit out of the editor (after saving the changes) and all of a sudden it is changed!

Hm. That’s strange.

I did some testing but wasn’t able to replicate the trouble with Jetpack’s custom CSS preview. What browser are you using? In addition, are they any similarities in the type of changes that don’t correctly show up in the preview (layout changes, hiding elements, etc.)?

If I can reliably reproduce the trouble, I’ll get this reported back to the Jetpack team.

So, how do I find out what the theme has labeled for various text?

You can use your browser’s inspector tools to find the specific CSS labels for various elements on your page. You can find a good walk through, including video tutorials, for using your browser’s inspector tools here:

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

I tried editing the text that is at the bottom of the individual post pages (like the navigation text and “Leave a reply”) with the following, but it didn’t work. Am I using the wrong class to change them?

The classes aren’t quite right for the elements that you’re trying to change.

I made a screencast to show you how I found the correct classes needed to change the font-size and font-style of those specific elements:

From the screencast, you’ll see that I right-click to “inspect” a page’s HTML and then hover over the HTML until the element that I wish to edit is highlighted. In the right hand of the inspector tool, I can then see specific CSS that’s already in place for that element and copy/paste the correct classes for overriding it.

I was able to get the following CSS by following the above method:

.nav-previous .meta-nav, .nav-next .meta-nav, #reply-title {
font-size: 1.9rem;
font-style: bold;
}

It’s worth noting that I’m using Chrome’s inspector tools but the tools for other browsers work in a similar way.

I had also considered removing the navigation links all together – which doesn’t seem to be working either.

Using the same steps outlined in the screencast, I found that the HTML surrounding the navigation links has a class of post-navigation. You can therefore hide the links using the following:

.post-navigation {
    display: none;
}

Where can I (or can I at all) edit the title “Archives: Portfolio” on my portfolio page? I assume that if my child theme had all of the css available for editing, I would find that within the code and could change it. But the only code I see in the stylesheet is what I added. And I don’t seem to have a portfolio or archives php page.

Your child theme’s CSS loads after your parent theme’s and effectively overrides it. It’s therefore only necessary to add the changes you want to make to your child theme’s CSS file, duplicating your parent theme’s styles wouldn’t hold any benefit.

The title for your portfolio archive isn’t set in your CSS, it’s instead set via the the_archive_title() function in inc/template-tags.php.

The simplest way to edit the title would be to hide it and then “add it back in” with the following custom CSS:

.post-type-archive-jetpack-portfolio .page-title {
    visibility: hidden;
}

.post-type-archive-jetpack-portfolio .page-title:before {
visibility: visible;
content: "Portfolios";
}

Change “Portfolios” with the title text you want.

If you’re fairly comfortable with PHP then let me know and I can share the slightly more technical way of changing the title.

So, final question for now, if I want to remove the date bar all together from the post preview page (and the portfolio preview page), can I do that?

Do you want to give the tips that I gave so far in this reply to try to determine the CSS needed to hide your dates? Let me know how you get on!

Hi @mmdrdesigns,

Yay, I’m glad you were able to figure out the right CSS for hiding the dates!

You know where to find us if you come across any questions or if the issue with the preview comes up again.