New to .org and CSS – several questions

Hi there, I will answer your questions in batches, and not necessarily in order. ??

4. WordPress.com had a “font” option to change font and font size in the Customize menu. I used Ubuntu and was happy with it. This option is absent on the self-hosted site–what do I need to do to get it back?

Ubuntu is a Google font, so you can try a Google font plugin on your self-hosted site to use it. There are many available:

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

2. How do I get rid of the “Read More” button underneath each of these featured page images, and retain the link and mouseover effect on the images?

Try adding this to your custom CSS:

.featured-page .more-link {
  display: none;
}

Learning how to target different elements in your custom CSS will help you make CSS changes. Here are some places to help you learn how to do that:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

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

https://thewc.co/articles/view/web-inspector-tutorial

https://cssworkshop.wordpress.com/

5. Similarly, the .com Customize page had more options in the Colors menu. In the .org framework, I can only choose the Background color (not the link color, etc). Is there a way to gain this functionality back, or a way to change the link and mouseover colors in the menu?

Colour palettes are a feature of WordPress.com. On a self-hosted site, you’ll need to locate the elements you want to target with custom CSS, as I mentioned above.

Try reading up on how to target an element with CSS – the links above are a great place to start – and see if you can make the changes you want. The more you learn about CSS, the more you’ll be able to do. ??

Also, on a WordPress.com site ,if you view the browser source and look in the section that starts with this line, you’ll find all the CSS customizations made via the custom colour palettes, which may be useful for you:

<style type="text/css" id="custom-colors-css">

Let me know if you get stuck.

1. The thumbnails on the Home page were automatically cropped and resized on my wordpress.com site using the Edin theme (see seiplegroup.com), but on the new domain using the .org framework does not automatically crop the images. I know about Post Thumbnail Editor, but have not yet attempted to use it. What is the best way to edit these featured images on the home page?

You shouldn’t need to manually edit or crop the images.

If you’ve switched themes on your self-hosted site, you may need to run the Regenerate Thumbnails plugin before doing anything else.

https://www.ads-software.com/plugins/regenerate-thumbnails/

Give that a try and let me know how it goes. If you still have trouble, could you provide a link to your self-hosted site so I can take a look directly and see what might be going on?

Thanks, Kathryn!

Your helpful responses, as well as more reading, have helped me resolve all but question 3. I have also read up a little bit on that how to resize the frames, and realize that it may actually be much more difficult than I originally anticipated. I can live the height of the featured image frame if necessary. But if there’s an easy workaround, I’m all ears!

My self-hosted site is seiplegroup.ucsf.edu. It currently has a dated https certificate, so you will get an error when attempting to access it (I’m working to get a new cert). If you ignore the warning, you’ll get right in.

Thanks again!

Your helpful responses, as well as more reading, have helped me resolve all but question 3.

Great, glad to hear that!

3. I would like to change the height (make it smaller) of the featured image on each page, especially the home page, so that the content has a little bit more room to breathe before the user scrolls down.

Something like this will reduce the height of the featured image on the homepage on large screens:

@media screen and (min-width: 1230px) {
 .home .hero.with-featured-image .has-post-thumbnail {
   height: 200px;
 }
}

To reduce the height on all pages (not just the homepage) you would remove the first .home selector:

@media screen and (min-width: 1230px) {
  .hero.with-featured-image .has-post-thumbnail {
   height: 200px;
 }
}

Thanks!

I used the @media screen CSS you posted, without the .home selector. I saw the effect as I lowered the px count from 200 all the way down to 10, but the featured images are still VERY large (half of the screen’s height). Additionally, the featured text on the home page is no longer centered vertically. Any way to make them even smaller, and to re-vertically-center the text?

Hmm – could you let me know exactly where you added the CSS code? I just tested the same again in a browser inspector and it kept the text centered vertically, so I’m not sure why it didn’t work on your end.

Hi Kathryn,

I added the code directly to the Edit CSS option in the Appearance menu that is enabled with Jetpack. Here is my entire Edit CSS code:

.site-info {
display: none;
}

.more-link {
display: none;
}

@media screen and (min-width: 1230px) {
.hero.with-featured-image .has-post-thumbnail {
height: 200px;
}
}

If I lower the “height: 200px” to, let’s say, 10px, I start to see the text get very off center and bleed out of the image.

Why would you lower the height to 10px though? That’s nowhere near tall enough to accommodate all your text on the homepage?

Actually, lowering the input to 10px does not seem to set the actual height to 10px. It is still huge, and takes up over half of the vertical screen height on my macbook pro. If you check my website now, it’s set to 10…

Not sure why this is.

Here’s a screenshot of what it looks like with it set to 10px. There’s still a massive amount of gap between the top of the image and the text.

image

Hmm, I’m still not sure I understand why you would choose to set it to 10px high when that doesn’t look correct. That isn’t tall enough to fit your text. In my testing, 200px was a good height that just fit your text, and still looked good on mobile devices.