child theme css

[Zane Winberg]

Hello Bill,

I made a child theme and I am using style.css from the themes/united-child folder, where I am defining some of my own styles.

The question I have is… now that the style.css is ‘moved’ to this child folder, I am noticing that my blockquotes are not working where they show the fancy quote. Is this because the ‘content’ property can’t read the location of the fancy font or media it is looking for?

Here’s what is in my style.css:

blockquote:before {
content: “e0c8”;
left: 5px;
top: 0;
position: absolute;
color: #ccc;
font: 60px ‘Icons’;
}

I am not sure what “e0c8” is unless it’s just a hex color. And not sure if it is finding the ‘Icons’ font property because the style.css being utilized is in a different folder.

Thanks much once again for a great theme!

Zane

[Bill Robbins]

Great question. The path to the icon font is set relative to the style.css’ location. So it thinks that it can find the font inside the child theme itself instead of looking in the parent.

There are two ways to fix that. The first is to copy the fonts folder from the parent theme and place it in the child.

The other option is to change the path for the font in your child theme’s style.css file. To do that, find this spot:

@font-face {
	font-family: 'Icons';
	src:url('font/Icons.eot');
	src:url('font/Icons.eot?#iefix') format('embedded-opentype'),
		url('font/Icons.woff') format('woff'),
		url('font/Icons.ttf') format('truetype'),
		url('font/Icons.svg#Icons') format('svg');
	font-weight: normal;
	font-style: normal;
}

and change where it says font/ to

../united/font/

You’ll have to change each instance, but that should take care of it for you.

If you run into any trouble, let me know,
Bill

[Zane Winberg]

Thank you Bill! I decided to copy the font folder into the child theme folder and it works like a charm!

Thanks again for the help,

Zane

[Bill Robbins]

Fantastic. If you need anything else, just let me know.

[Author]

Posts