How to make basic changes?

[rick4him]

Hi, I'm trying to figure out how to make some basic changes like font, font size, etc to the magazine theme.

Would someone mind helping me figure this out.

 

Thanks so much.

[marybaum]

Are you at all familiar with CSS?

You would make those changes in the style.css file.

What I actually do is keep a clean copy of the magazine theme - then copy the entire child theme to another folder named something like MagazineProjectName. (Or, MagazinePN for short.)

Then, I make all my changes for that site in the new folder. If something blows up, I can always start over with a clean copy of whatever file I made the mistake in.

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[rick4him]

@Mary,

 

Thanks for your help. I'm trying to learn some CSS, but am still learning. 🙂

Is there an easy way to figure out how to make simple changes to fonts, colors, etc?

[marybaum]

That IS the easy way. 😉

I started learning it more than five years ago, when I was but a girl of 47.

I'm also a big fan of http://css-tricks.com.

That said, the changes you most want to make are in the Headlines section, which starts at Line 896 in the Magazine style.css file.

The first block of code shows you the main typeface for all the headlines; change from Play to the one you want in that block. (See below.)

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Play', arial, serif;
margin: 0 0 5px;
}

You probably know you have some other work to do before you stick in any old font there, depending on whether you're using a font you're planning to upload yourself to the server or one that's coming from a service like Typekit, fonts.com or Google Fonts. And you want to keep the references to Arial and serif, in case someone can't see your webfont (ewwww ... )

So follow the directions from your service, or else upload your fonts and follow the directions from the place where you bought them, or from fontsquirrel. Don't use any of those free-font-download places like dafont. Those fonts are often stolen.

(What I usually do is make a folder called 'type', dump all my font files in there, along with the css files that came with the fonts [each of which I've renamed to the name of the typeface: typeface.css], and then, FOR EACH TYPE FAMILY, add this to the top of style.css:

@import url(type/typeface.css);

Below that basic headline block, you'll see that style.css sets up some special cases where the headlines occur at specific sizes. There's where you can change headline sizes to whatever you want.

Now, you probably also want to change the body text throughout.

You do that with the body tag, which is higher up in the file. I should have addressed that first, but I only thought of it now.

You mess with it in two places: line 97, in the Defaults, and on line 152, in its own section, where the file declares its background. I have an ongoing debate with certain members of the male of the species, ages 40 and up, including my own husband, who claim not to be able to read any body text smaller or lighter than 20px Arial Bold.

My answer: Neither can I, without my reading glasses - in fact, I can't read the numbers on a tennis ball, or see the lines on my hand!

But I'm not willing to sacrifice decent typography on the altar of don't-wanna-wear-glasses, and nor should you be. So feel free to spec the type that's right for your site. <grin>And if you get any trouble from your dear brother-in-law on this issue (you couldn't possibly be 40 yet) just tell him to put his glasses on. They're really NOT coated in nerve gas, as he may have persuaded you. </grin>

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[rick4him]

Thanks so much for your help. This is great!

[Author]

Posts