Rough Pixels

Hi Liza,

1. For the “Home icon” question, are you just wanting an icon or link name with an icon?
2. You home link doesn’t need to be called “Home”. When you make your link for the menu, you retype the label field to what you want.

Back to the icon though; there are a couple of options:

1. Using a plugin: Something link this one Menu Image, Icons made easy – WordPress plugin | ww.wp.xz.cn
2. Custom coding

There are several tutorials online about adding icons (sometimes images) to a menu. This one from WPBeginner provides the options above. How to Add Image Icons With Navigation Menus in WordPress (wpbeginner.com)

It could also be done using CSS code which can be added to the Additional CSS tab in the customizer. For example, I added a house icon to your “An Invitation” menu link using:

li#menu-item-13395::before {
    content: '\F424';
    font-family: Bootstrap-icons;
    margin-right: 3px;
}

This theme already uses Bootstrap icons, so I was able to do this quickly.

NOTE: The id# of: menu-item-13395 is the id of that particular menu link. This CSS code targets and adds the icon only to that item.

You are very welcome 🙂

I will make this as a setting in the theme’s customizer on the next update (today or tomorrow).

Greetings! The side panel/sidebar column is ideal for what you have planned, but let’s get this solved for you.

My guess is that when viewing in a mobile device, such as a phone or tablet, the full image is getting cut off–or rather too much is getting cut off. Is this the the issue?

If so, I have an easy fix–plus a possible theme update to give the end-user the ability to adjust the image header height from the customizer.

Best Regards,
Andre

Good to hear the bio info worked.

For the fonts, I’m not too familiar with the Google Fonts plugin, but it sounds like you want to change the font for most if not everything. But, once you choose the font that you want to use, the theme’s default font is applied to the body tag. For example:

body {
  font-family: var(--fifty50-font-primary);
}

I won’t bore you with the nerdy stuff about what var(–fifty50-font-primary) is, but you can apply the font you choose to the body tag. We will use the font Arial as an example like this:

body {
  font-family: Arial;
}

Adding that to the Additional CSS tab in the customizer should work, where this one will change the font for everything (or should). The only exception are page titles, headings, etc. This would be done with:

h1, h2, h3, h4, h5, h6 {
  font-family: Arial;
}

Buttons: For Jetpack, I’m not sure what classes they use to apply their style to the buttons they use. So, this is something I’m not able to help too much on my end as that is a plugin I don’t use. You might want to post to their plugin support.

Buttons for Fifty50 will depend on if you are using the classic or block editor. You can find the “button” styling in the theme’s style.css file around line 1974. It starts off with…

/* Buttons */
.button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
  background-color: var(--fifty50-colour-tertiary);
  border: 1px solid transparent;
  border-radius: 0.563rem;

Hopefully some of this helps.

NOTE: I just uploaded an update to version 1.0.5, but need to make a slight correction to that one. Watch for a new update later today for version 1.0.6.