Mantra Custom CSS field syntax

Forest Skills
(@forest-skills)

13 years, 3 months ago

Hi folks. I’m very new (1 month-ish) to websites, WordPress, CSS, etc and want to make a few changes to my site (www.forestskillsltd.co.uk).

I’ve read that I should have my headings (pages/posts/etc) in h1. However I want to determine the height of h1-h6 as I don’t like the default SHOUTING size text that firefox etc provides for h1 text (there doesn’t appear to be a setting to change it, nor a global/font size element to the style.css file). Apparently I can do this in Jetpack, but for some reason it has failed to install on my testbed website (via WAMP on my laptop), so I’d like to add the font height myself (seems cleaner that way).

Q1: Does the Mantra custom CSS field require any other syntax to it (as you would put in for a child theme) after the line;
/* Mantra Custom CSS */

Q2: Can anyone give me the code for changing the size of the h1-h6 text please as I’ve seen several variations on it while searching through this forum over the last few weeks?

Q3: I’ve a custom wording on my 404.php file & various google, norton, etc stuff in my header.php file. As these php files get overwritten when the updates come out, can I just copy and past my own version into this window (& if so how)?

Thanks in advance!

Chris

Viewing 7 replies - 1 through 7 (of 7 total)

Andrew Nevins

(@anevins)

WCLDN 2018 Contributor | Volunteer support

13 years, 3 months ago

Q1: a) I think it requests CSS syntax only, it wouldn’t make sense to mix any other

Q2: a) The code is font-size

All modifications to the theme’s files will be erased once the theme updates. Always make modifications to a Child Theme.

Chris G

(@chris-g)

13 years, 3 months ago

But to do child theme I need ftp access which I don’t have…

Andrew Nevins

(@anevins)

WCLDN 2018 Contributor | Volunteer support

13 years, 3 months ago

Chris, if you need further support, create your own thread and I’m sure someone will be able to help.

Thread Starter

Forest Skills

(@forest-skills)

13 years, 3 months ago

Sorry, ‘Chris G’ & ‘Forest Skills’ are one and the same person, ie me.

Andrew Nevins

(@anevins)

WCLDN 2018 Contributor | Volunteer support

13 years, 3 months ago

What happened to your FTP credentials?

Thread Starter

Forest Skills

(@forest-skills)

13 years, 3 months ago

I have an ‘IT Man’ who does the hosting, etc for me…..

Anyway, I’ve just been testing some stuff on my testbed website… and it works!! Well, sort of. :\

For future reference the code I used is:

/* Mantra Custom CSS */
#content h1 {
	font-weight:bold; /* Making the titles bold */
	font-size:1.25em; /* Increasing the font size */
}

#content h2 {
	font-weight:bold; /* Making the titles bold */
	font-size:1.13em; /* Increasing the font size */
}

#content h3 {
	font-style:italic;/* Making the titles italic */
	font-weight:bold; /* Making the titles bold */
	font-size:0.5em;  /* Decreasing the font size */

Now to figure out how to import my custom 404.php page into there as well…

Chris

Thread Starter

Forest Skills

(@forest-skills)

13 years, 2 months ago

Just thought I’d add a little to this so that most of the options are covered, should anyone want to copy this example;

Delete the /* Mantra Custom CSS */ as it doesn’t do anything, then paste in the following code;

#content h1 {
	font-style:normal;	/* Options are; 'normal', 'italic', 'oblique' */
	font-weight:bold;	/* Options are; 'lighter', 'normal', 'bold', bolder' */
	font-size:1.5em;	/* 1em = font 16. Divide required font size by 16 to get em value */
	font-variant:normal;	/* Options are; 'normal', 'small-caps' */
	color:#0a8bf5;		/* Changing the font colour */
}

#content h2 {
	font-style:normal;	/* Options are; 'normal', 'italic', 'oblique' */
	font-weight:bold;	/* Options are; 'lighter', 'normal', 'bold', bolder' */
	font-size:1em;	        /* 1em = font 16. Divide required font size by 16 to get em value */
	font-variant:normal;	/* Options are; 'normal', 'small-caps' */
	color:#0a8bf5;		/* Changing the font colour */
}

#content h3 {
	font-style:normal;	/* Options are; 'normal', 'italic', 'oblique' */
	font-weight:italic;	/* Options are; 'lighter', 'normal', 'bold', bolder' */
	font-size:0.75em;	/* 1em = font 16. Divide required font size by 16 to get em value */
	font-variant:normal;	/* Options are; 'normal', 'small-caps' */
	color:#D41019;		/* Changing the font colour */

}

#content p{
	font-style:normal;	/* Options are; 'normal', 'italic', 'oblique' */
	font-weight:normal;	/* Options are; 'lighter', 'normal', 'bold', bolder' */
	font-size:0.9em;	/* 1em = font 16. Divide required font size by 16 to get em value */
	font-variant:normal;	/* Options are; 'normal', 'small-caps' */

}

Enjoy 🙂

Still haven’t figured out how to import my custom 404.php code… 🙁

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Mantra Custom CSS field syntax’ is closed to new replies.

Tags