changing font of Expound comments

  • Unknown's avatar
    ivystoryblog · Member ·

    I changed my blog to a WordAd worthy theme and I want to change the font to Georgia (because I noticed with the ads fonts from the customizer make the blog load slower). So I’ve changed everything except other people’s comments.

    Any ideas on how to change the font of other people’s comments?

    I’d also like to ask if I get some help fixing the copyright and WP information at the bottom of the homepage. I just want the site/copyright info to move with the WP info when readers go to the homepage from the posts and vice versa.

    Thank you. I know I’m here a lot, but I really enjoy customizing themes with CSS. Thanks again.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    To set the default font for the site (which is what is affecting the comments made by your visitors) then try out the following:

    body {font-family:Georgia;}

    I’m not clear on what you’re trying to achieve with your footer but I assume you want it to be left aligned on your homepage as it is on your individual posts, you can do that with this line of CSS:

    .site-info {text-align:left;}

  • Unknown's avatar
    ivystoryblog · Member ·

    Thank you. Wow – what a simple change for something I found to be very complicated!

  • Unknown's avatar
    hallluke · Member ·

    No problem, the more you play around with it the more it makes sense.

    I find the inspector in the Firefox browser really useful – it lets you right-click on the bit of page you’re interested in and see which CSS rules are being applied so you can tell what you need to override. You can even test out your own CSS straight in the browser before pasting it into your custom CSS section.

    Other browsers offer similar tools so if you’re a Chrome or IE or Opera user you don’t have to switch.

  • Unknown's avatar
    ivystoryblog · Member ·

    I’ve used Firebug before, but for the most part, old WP themes are easy to figure out or at least searchable.
    What I can’t find is how to make the featured section (has most of my biology posts) or at least the top most featured post say its the category biology.
    Someone looked at my blog and was confused as to which posts where science and which were not.
    Thanks.

  • Unknown's avatar
    hallluke · Member ·

    Here’s one way to do it, it will insert a little green box with the category name (not a clickable link I’m afraid) slightly offset from the featured post image – just like in the four smaller examples just below. Paste this code in below your existing custom CSS:

    .featured-content .post {
	position: relative;
}

.featured-content .post .entry-thumbnail::before {
	position: absolute;
	top: 8px;
	left: -6px;
	padding: 4px 8px;
	color: #0a2828;
	background-color: #3ca2a2;
	text-transform: uppercase;
	font-size: 14px;
	z-index: 30;
}

.featured-content .post.category-biology .entry-thumbnail::before {
	content: "Biology";
}

    If you intend on using posts from other categories in this spot you’ll need to duplicate the very last section and change both places where it says biology to the names of the other categories, once each per category.

    Let me know what you think.

  • Unknown's avatar
    ivystoryblog · Member ·

    Wow. That’s exactly what I wanted! With Firebug, I was trying to figure it all out this morning! Thanks.

    I was afraid readers would get confused as to where the biology posts are. Now, I don’t have to worry about that.

    Thanks, again!

  • Unknown's avatar
    hallluke · Member ·

    No problem, make sure you test your site at tablet and mobile sizes just to make sure it doesn’t go crazy when the size is different. I think it should end up looking acceptable!

  • Unknown's avatar
    ivystoryblog · Member ·

    It looks a little crazy on my tablet, but it’s nothing you did. I made the header title a little big and it’s bit tight. On a computer, it looks great.

  • Unknown's avatar
    ivystoryblog · Member ·

    Do you know how to fix the header to it’ll be still large, but look OK on a mobile device?

  • Unknown's avatar
    hallluke · Member ·

    The two rules you have for site-title and site-description should be wrapped in the following code so that it only affects larger screen sizes, then when viewing on a mobile the default header rules will apply:

    @media screen and (min-width:640px) {

...existing rules go here...

}
  • Unknown's avatar
    ivystoryblog · Member ·

    Wow. Thanks. That’s much better! Everything looks good on the mobile except that my custom CSS fonts aren’t showing up. I hate to keep you, but is there another secret piece of CSS I’m missing?

    This is so cool. I’m learning so much about CSS.

  • Unknown's avatar
    ivystoryblog · Member ·

    Oh, no! Actually, that CSS code you just gave me deleted all my code. Fortunately, I had a back up code saved. (Just wanted to let you know, in case you give that code to someone else and they loose all their stuff).

    I’m not using the above code now, instead I just made the header title smaller. My fonts still don’t show up on the mobile theme too.

  • Unknown's avatar
    hallluke · Member ·

    Did you put all of your existing CSS in the middle of the code I gave you? You should only put the two sections I mentioned so that it looks like this:

    @media screen and (min-width:640px) {
  .site-title {
  	text-align:center;
  	font-size:63px;
  	font-family:Palatino Linotype
  }

  .site-description {
  	position:absolute;
  	top:114px;
  	right:20px;
  	font-family:Book Antiqua !important;
  	font-size:16px;
  	font-weight:700
  }
}

    and leave the rest as normal, then it should work OK.

  • Unknown's avatar
    ivystoryblog · Member ·

    Oh. OK, sorry. I wrapped the code around the site title and the description each. I must have forgotten a bracket in there.

    Thank you so much!

  • The topic ‘changing font of Expound comments’ is closed to new replies.