Background image and theme color change?

Can you provide a link to your WordPress.com site so I can take a look?

I assume the .org version of Chunk does not have the same customizations as .com?

WordPress.com comes with a colour customizer tool that’s specific to that platform.

Minor changes, but I hope I don’t have to code?

You’ll need some CSS code to modify the colours. Let’s start by providing a link to your WP.com site and we’ll take it from there.

Thank you Kathryn!

I’ve already routed the website to the new server so I am not sure how to show it to you.

freebikevalet.wordpress.com

I do have a picture. How can I show that?

Thanks for the link!

Here is the CSS for the orange/grey colour palette you were using on WordPress.com:

#container {
	background-color: #fff;
	background-image: -moz-linear-gradient( rgba(0,0,0,0.22), rgba(255,255,255,0) 80px );
	background-image: -webkit-linear-gradient( rgba(0,0,0,0.22), rgba(255,255,255,0) 80px );
    padding: 0 100px 1px;
}
#wpstats {
	display: none;
}
.page-link a:hover { color: #fff;}
body { background-color: #69D2E7;}
a:hover { color: #f38c24;}
blockquote { border-color: #f38c24;}
.hentry .entry-meta .cat-links a:hover { color: #f38c24;}
#site-title a:hover { color: #f38c24;}
.hentry .entry-meta .comments a { color: #f38c24;}
.page-link a { background-color: #f38c24;}
#menu a:hover { color: #f38c24;}
.entry-title a:hover { color: #f38c24;}
.hentry .entry-meta .edit-link a:hover { color: #f38c24;}
#footer a { color: #AA5602;}
.entry-title, .entry-title a { color: #585f5f;}

And here is the CSS you were using in the Custom CSS panel:

li.page-item-3234 {
	margin-left: -20px;
}

body.custom-background {
	background-size: 105%;
}

(You’ll likely need to adjust the page item number for the li code above, since it’ll probably be different on your self-hosted site.)

Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

I’d suggest you try adding the above CSS to the Jetpack custom CSS editor – that should get your self-hosted site looking more like it did before.

Let me know how it goes!

Amazing. Thank you!

I cut and pasted the code into the CSS Stylesheet Editor via Jetpack as you suggested and it worked perfectly.

The only other changes I wish to apply would be the ability to change the typeface and font size. Is this possible?

I also miss my “mosaic” photo gallery option but I don’t think that has to do with the theme correct?

Thank you again!

The only other changes I wish to apply would be the ability to change the typeface and font size. Is this possible?

You might like to check out a Google Fonts plugin for that:

https://www.ads-software.com/plugins/search.php?q=google+fonts

I also miss my “mosaic” photo gallery option but I don’t think that has to do with the theme correct?

If you activate Tiled Galleries module in Jetpack you should get the same option.

Perfect!

Tiled galleries on and fonts plugin installed. Thank you!

However, I assume I will have to find and import the Chunk header font?

Tiled galleries on and fonts plugin installed. Thank you!

Great!

However, I assume I will have to find and import the Chunk header font?

The Chunk header font is the same as the one used for dates and post titles. Which font are you looking for? What are you trying to do exactly?

Thank you Kathryn.

I am still trying to replicate https://freebikevalet.wordpress.com on freebikevalet.com.

Seems that the fonts are still different and more bold on the .com site?

Looks like you’re not using the default Chunk fonts on your WordPress.com site at the moment; you’ve selected from the new Google font collection instead:

For a more accurate comparison, you would need to click the x next to each font to return to the default Chunk font – or look at the Chunk demo site: https://chunkdemo.wordpress.com/

If you’d like to use the same Google fonts you’ve selected on your self-hosted site, you can use a Google font plugin and make the necessary CSS tweaks to try to match up the typography.

Thank you Kathryn.

I am afraid I am lost on this one.

I deactivated the Google font plugin and the fonts did not change to the default Chunk fonts. Also, without the plugin activated, it does not seem I can change the fonts at all?

Or perhaps the default fonts are not the same as what is being used on https://freebikevalet.wordpress.com?

I feel like I am missing something obvious.

I deactivated the Google font plugin and the fonts did not change to the default Chunk fonts.

I’m seeing Oswold for your headings currently. Here’s a screenshot:

Are you seeing something different? Have a look at your site in Firefox and right-click one of your headings. Click the Fonts panel, as you see in my screenshot, to see what font is being used.

Also, without the plugin activated, it does not seem I can change the fonts at all?

That’s right. Switching fonts isn’t something you can do on a self-hosted site without a plugin.

Or perhaps the default fonts are not the same as what is being used on https://freebikevalet.wordpress.com?

Correct. As I mentioned earlier, you have selected some of the free fonts we now include on WordPress.com, as you can see in my earlier screenshot here:

The fact that you selected a font called “Chunk” and the theme is called “Chunk” is just a coincidence. The default heading font on the Chunk theme is called Oswold. If you click the little “X” to the right of the word “Chunk” in your WordPress.com site’s Customizer, you’ll return to Oswold.

What font do you actually want on your self-hosted site for headings?

Thank you Kathryn.

I really want the headings and copy text to mimic the fonts used here:

https://freebikevalet.wordpress.com/

Hi, Chunk is the font that is in the headings on https://freebikevalet.wordpress.com/. That is one of the Typekit fonts and it is not offered through Google Fonts.

Here is a Typekit Fonts for WordPress plugin, and there may be others as well. The alternative to the plugin is to use a child theme and then add the necessary code to the appropriate theme files. I’d try the plugin first as it would be far easier.