Social Icons too small, and all same colour

Hi @grapejuicemedia, love the site! Thanks so much for using Kale. ??

I see what you mean about the size and colors…it looks like we’ll need to account for the size issue in our next update. In the meantime, you can add this CSS in Appearance > Customize > Additional CSS and it should allow your size selections to take effect:

.wp-block-social-links .wp-social-link a {
    font-size: inherit; 
}

On the colors, it looks like you may have a bit of custom CSS added with an !important rule that is overriding the icon and label colors. Here’s what it currently looks like:

a {
    text-decoration: none !important;
    font-weight: bold !important;
    color: #7161aa !important;
}

If you can remove !important it should solve this, but I’m guessing you’re probably using it on purpose and prefer to keep it that way…in that case you could just add an exclusion by changing it to look like this:

a:not(.wp-block-social-link-anchor) {
    text-decoration: none !important;
    font-weight: bold !important;
    color: #7161aa !important;
}

If you need anything else just let us know, we’d love to help. Take care!

Thank you! I was able to get them to the right colours and sizes. Sadly, I can’t get them all in there without them dropping to another line. If I try to force it all on one line, they go over past the container edges and look weird. I dropped a couple of my links so they would fit. Not ideal, but… it’ll work in a pinch.

Ah, gotcha…that sounds like a pain. A few other possible options could be:

• Going with icons only
• Keeping the text with the icons but reducing the size of the text (while keeping the larger icons)
• Moving the playlist to the top of the sidebar and splitting the social links into two separate blocks- one on the top left and one at the top right, one could be purely social links and the other could hold the remaining links.

What you have now looks nice though! ??

If you need help with anything else just let us know…thanks again!

All great ideas, thank you! I will have a play around with that!

One other question and I’ll leave you alone for a bit… lol…

How can I change the text size for the blog entries on my site? That font is so teeny tiny. I’d like to bump it up just a smidgen if possible. I’ve managed to do it for the text on the rest of the site, but the blog ones are playing things on their own terms. ??

I really do love this theme, btw!

Also, I have noticed that when I try to make the icons bigger, I guess the space between them gets larger too? I would really like to keep them a bit closer together. Is there a place to change that, perhaps?

You’re right, it is super small. Something like this should do the trick (or you can increase it further if you like):

.single-content { font-size: 16px; }

Good point on the icon spacing…it’s a default WP style, but you may be able to use something along these lines to reduce the flex gap:

.wp-block-social-links.is-layout-flex { gap: 0; }

If you give that a shot and it doesn’t do what you need, let me know! ??

And thanks so much for the kind words about the theme, that means a lot!

Thank you! The font thing worked great! I ended up making it 14 to match the rest of the site and that works fine, I think. The text for the little excerpt like things on the main blog page is still SUPER tiny though. ?? Can you tell me what the code is to change those? I don’t want to make those huge, as I fear there won’t be room with there being multiple ones on there, but just a bit to make it more readable. I don’t know what the default size is but I struggle to read it, myself.

As for the social icons, I got a wild hair last night and just decided to move them all to the footer area instead – because I couldn’t make the left and right come together and look like I needed it to – this was FAR easier and ya know what? I actually like it better. I don’t know why I didn’t think to just do that in the beginning. ??

Thank you for all of your amazing help! I think I nearly have it to where I want it, which will be nice, because I can just get in there and blog from now on! Yay! ??

Oooh, nevermind! I figured it out on my own. I have now learned how to use the “inspect” thing. *takes a bow*

It was:

.entry-summary { font-size: 14px;
}

Now it matches the rest! Thanks so much!

Hey…congrats and nice work! Looks great now.

Thank you for all of your amazing help! I think I nearly have it to where I want it, which will be nice, because I can just get in there and blog from now on! Yay! 

Sure thing, love what you’ve done with it so far and looking forward to following along! Good luck!