Could I just get the CSS code please? (It's not my homework, I promise)

July 30, 2017 2:55 PM

Can someone please help me figure out how to change the title/subtitle font and color in wordpress' Twenty Seventeen?

So, to keep things simple, I decided to commit to using the yearly theme that comes with wordpress, and just make changes in the child/additional CSS section. But I'm not having much luck.

I've looked everywhere for the code to change the title/site identify and subtitle font and color. And can't seem to find it. I did find something but it was either wrong or I needed to add more to it, as it did make changes, but not to what I wanted. (I don't remember what that code was)

* I want to have the title be IM Fell English Small Caps, and the subtitle to be Sacramento, both of which are Google fonts. I just need them in any brighter/cream/off white color.

Might someone be so kind as to let me know what code I need? I have a minimal cut and paste understanding of coding, and is over 100 degrees here, so I'm lost.

* Also, is there a good repository of CSS snippets I could access to make basic changes (change menu background color, change borders around images-kind of stuff?)

I've always been able to root around the internet to find what i need and cobble it together, but that skill seems to have left the building...

Thank you. Thank you.

posted by Vaike to Computers & Internet (17 answers total)

Link to site? I'm not familiar with the specifics of how Wordpress lays stuff out, but I can easily craft some CSS rules given an example page.
posted by jraenar at 3:24 PM on July 30, 2017

Response by poster: Thank you. It's in my profile (and in the midst of a total overhaul...).
posted by Vaike at 3:59 PM on July 30, 2017

Some samples that may help you.

Tips for using google fonts in wordpress. Use method d, "Enqueueing Google Fonts".


Are you making the changes in a child theme? (I hope?) otherwise your adjustments will be overridden with theme updates.
posted by stagewhisper at 4:32 PM on July 30, 2017

Try this:

.site-title {
  font-family: "IM Fell English Small Caps";
}
.site-description {
  font-family: "Sacramento";
}

The colors appear to be white, and a slightly opaque white. To change those, add a color: #______; inside the curly braces, and fill in the blank with a six-digit hex code. You can get the specific code by Googling "css colour picker" and the top of the results will have a built-in color chooser. Whiter colors will tend to have all "high" values, e.g. #fffadd.

You could also search for how to enable "Developer Mode" on your web browser; this will usually add an "Inspect" context-menu item when you right click on parts of a page. This will bring up a window with the HTML code for that section of the page. It should also show you the CSS applied to the item you clicked off to the side, you can change things there (will change how it looks only for you), to see how things will look, before making the change in your Wordpress configs.

For snippets, maybe try looking at things published for the Stylish browser plugin. Lots of people post little bits of CSS to change how certain websites look, that should give you a feel for how to change your site's CSS. The base code for pages changes a lot between site to site, so this is mainly useful for the bits inside the curly braces. The parts that come before will vary a lot more. You can learn how those are built by looking up "CSS Selector Rules"; 95% of the time, you can get by with period in front of names from class (e.g. .site-title) and # in front of names from id (e.g. #masthead).
posted by jraenar at 4:36 PM on July 30, 2017 [1 favorite]

jraener is generally on the right track with this, but style inheritance comes into play here along with the way wordpress stylesheets intersect so those suggestions aren't going to work as-is. Although a good explanation of how to trouble shoot and change css in general.

You aren't going to be able to reference the google fonts unless you point to them from within wordpress somehow. The proper way to do this is adding a snippet of code (a function in this case) that grabs the fonts in essence when the site loads. In flat file (not Content Management System -CMS- sites like wordpress you could just add a link in the header section of your page html, but in Wordpress you'll need to add this snippet of code in your functions.php file

BTW- this should happen in a child theme! Otherwise every time you update the site for security (which should be often) it will all be overwritten.

How to create a child theme

*************************************************

so in your (CHILD THEME!) file called "functions.php" add:

function custom_add_google_fonts() {
wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css?family=Sacramento|IM Fell English SC', false );
}
add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );




*****and then****

in your child theme's style sheet your css should look something like this (I am assuming you mean the text under your site title when you say subtitle- wordpress calls that the "site description") I threw in some sizes and a color which you will want to adjust:

.site-title, .site-title a {
color: #ffffe6 !important;
font-family: 'IM Fell English SC', serif; !important;
font-size: 30px !important;
}

body.has-header-image .site-description, body.has-header-video .site-description {
color: #ffffe6;
opacity: 0.8;
font-family: 'Sacramento', cursive !important;
font-size: 23px;
}


*******note******

This is going off memory from a Twenty Seventeen site a customized some months ago so I have not tested it on your site to see if it works, apologies, but from memory the font styles need the "!important " rule or else those child css styles will always be overwritten by the parent style sheet for whatever reason.
posted by stagewhisper at 5:13 PM on July 30, 2017

One final suggestion because maybe I had some web developer disease going on here- if all you want to change is some font styles and text and not customize anything much past that the easiest thing might be to not mess with coding anything and use a plug-in instead
posted by stagewhisper at 5:21 PM on July 30, 2017

I had trouble with my wordpress theme and my custom google font, and it came to be that the it was not the COLOR, but the FONT WEIGHT that was making my posts grey instead of black. I went into the google font embed code and took out the weight which was 100???, if I recall. It took me days of trying to find where to change it by color, but changing the WEIGHT is what did it for me. Good luck. Here is a link about font weight in css and it explains why 100 is not NORMAL http://htmldog.com/references/css/properties/font-weight/
posted by coevals at 6:37 AM on July 31, 2017

Response by poster: Thanks all. So, I already had the Easy Google Fonts plugin, so went ahead and added stagewhisper's code:

.site-title, .site-title a {
color: #ffffe6 !important;
font-family: 'IM Fell English SC', serif; !important;
font-size: 30px !important;
}

body.has-header-image .site-description, body.has-header-video .site-description {
color: #ffffe6;
opacity: 0.8;
font-family: 'Sacramento', cursive !important;
font-size: 23px;
}


which did change the fonts, but not to Fell English/Sacramento.

Then I deactivated the easy google fonts plugin and added the function code from above:

function custom_add_google_fonts() {
wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css?family=Sacramento|IM Fell English SC', false );
}
add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );

Now that got me a blocky font and a cursive font, which appear more closely related to the fonts I'm trying to get, but still not Fell Englis/Sacramento.

Any idea what the last part of the puzzle may be?

(Everything is in the 'additional code' section of Twenty Seventeen, which I believe was specifically created as and automatic child's theme style sheet. Other changes work in there.)
posted by Vaike at 9:03 AM on July 31, 2017

Ok sorry I had a typo and probably the incorrect path to the first font- try this :

(for the css):



.site-title, .site-title a {
color: #ffffe6 !important;
font-family: 'IM Fell English SC', serif !important;
font-size: 30px !important;
}

body.has-header-image .site-description, body.has-header-video .site-description {
color: #ffffe6;
opacity: 0.8;
font-family: 'Sacramento', cursive !important;
font-size: 23px;
}


(change in functions.php):



function custom_add_google_fonts() {
wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css?family=IM+Fell+English+SC|Sacramento', false );
}
add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );





*******************************************************************

If that doesn't solve the problem I will take a look at your site late tonight or tomorrow and track down the issue.
posted by stagewhisper at 3:20 PM on July 31, 2017

Response by poster: Ok. Changed the CSS. For the functions code, I'm not sure if it matters where I put it in the functions.php, and a warning comes up to not make the change while the theme is active. Do either of those matter (venturing past my skill set)?

(Also, for what it's worth, I did try the the functions code in the child's theme/additional CSS and did delete and reinstall the easy google fonts, just in case. Neither changed anything.)

And, thank you again, stagewhisper.
posted by Vaike at 4:30 PM on July 31, 2017

Okay, so- curiosity got the best of me since I haven't worked with Twenty Seventeen much at all and so I was able to get this working on a test site *without enqueuing the font at all* in the functions.php file.

All I did was go to "appearance>customize >additional css" and paste in:

.site-title, .site-title a {
color: #ffffe6 !important;
font-family: 'IM Fell English SC', serif !important;
font-size: 30px !important;
}

body.has-header-image .site-description, body.has-header-video .site-description {
color: #ffffe6;
opacity: 0.8;
font-family: 'Sacramento', cursive !important;
font-size: 23px;
}


And it changed the fonts to what you want.

As for the functions.php file- you'd want to create a child theme, and then copy in (or create a new blank) functions.php file within that child theme folder and paste the enqueuing code in there. For future reference. But it looks like Twenty Seventeen must do something natively now with google fonts so ??? I don't think you need to deal with adding that to a functions.php file after all.

I'd disable your font plug-in for sure when doing any of this this (and maybe even uninstall it?) But according to my 10 minute test all you need is to paste in the custom css snippet and you should be good to go.
posted by stagewhisper at 6:23 PM on July 31, 2017

Okay, I am back. I am looking at the default Twenty Seventeen functions.php code and there's a pre-connect function that links to google's fonts- so it appears having to do this manually to customize with different fonts in order to reference them in your stylesheets and have them display is no longer necessary. So no need to mess with creating a new function / functions.php file.
posted by stagewhisper at 6:36 PM on July 31, 2017

Response by poster: Thank you so much for your help, stagewhisper. I made the changes, it's still not quite the actual font, but I'm getting the feeling that maybe this is the way it shows up?

text image

I might have been being unrealistic, but I am closer.
posted by Vaike at 7:15 AM on August 1, 2017

Your site header

Did you clear your cache? Because this is what I'm seeing now on your site.

Both of your fonts are displaying.

A note- jraenar's description of how to develop, trouble-shoot, and track custom css won't work if you are using the "custom css" option to paste in code in the dashboard because as you can see from my screenshot the custom css is written to a javascript file rather than being in a child style sheet that you can pick through to test changing sizes, look at inheritance, etc. If you are going to be doing a lot of custom css work on this site I'd suggest following the steps to create a child theme and put all of your custom css in the child theme's style sheet instead of using the "custom css" option. That way you can see what you are working with, test adjustments before you make changes, and see what's going on behind the scenes when custom styles aren't showing up.
posted by stagewhisper at 8:45 AM on August 1, 2017

Response by poster: Sorry, I think I didn't give enough info with the picture I posted. I'm getting the fonts that are in the top section of the image, but I'm trying to get the bottom ones. The two fonts have changed, as in your screenshot, but they are not actually Fell English/ Sacramento, just much closer. I'm not understanding why they look like they are in the same family (?), but not the actual fonts.

(Sigh. I actually committed to Twenty Seventeen, and only changing fonts/colors/images so I could easily update and stay current whenever a new version comes out.)
posted by Vaike at 11:37 AM on August 1, 2017

Hi,
I'm not sure what to tell you then, those are the web version of Fell English TC and Sacramento as far as I can see. The Sacramento font in the tagline /subtitle under the header is italicized in Twenty Seventeen by default so removing the italics by setting the font-variant to "normal" might get it closer to what you want, like so on the last line:

body.has-header-image .site-description, body.has-header-video .site-description {
color: #ffffe6;
opacity: 0.8;
font-family: 'Sacramento', cursive !important;
font-size: 23px;
font-variant: normal !important;
}

But other than that I'm really not sure what to tell you at this point, maybe someone else can figure out why these aren't displaying the way you'd like.
posted by stagewhisper at 8:37 PM on August 1, 2017

Response by poster: Ah! So the web versions show up a differently than the print versions of fonts? That might explain why I'm not getting the results I'm trying for, and what I was going after wasn't even possible. Also makes sense why the fonts were looking similar but not exact.

Thank you so much for all your help. It was generous and I did learn useable information. I'll settle for this now, and at least can get on with my day.
posted by Vaike at 7:26 AM on August 2, 2017