Adding class or tag to #bodyrow

Paul Gingell · #1 Jan 18, 2019, 05:47 PM

Following comments in this post about the unruliness of my CSS inserts

, I've been tidying things up a bit (work in progress still).

Quite a lot of coding goes into creating different colour schemes for different pages, using Page-ID selectors. This gets confusing as more pages are added. E.g.

Code:

.page-id-30 div.widget-title h3,
.page-id-32 div.widget-title h3,
.page-id-201 div.widget-title h3,
.page-id-252 div.widget-title h3,
.page-id-257 div.widget-title h3 {
	border-top-color: #A29D8F; 
}

It would be simpler if I could replace this code with something like:

Code:

.yellow div.widget-title h3 { border-top-color: yellow; }
.blue div.widget-title h3 { border-top-color: blue; }

The .yellow or .blue class would need to be appended to the #bodyrow ID, because the colour scheme only varies here, not in the header or footer.

In the wordpress page editor is an options box [Page Attributes > Parent & Template], where the multicolumn option is. Ideally I'd have something similar, which allowed me to mark each page/post as either a Yellow or Blue page, which then added a suitable selector to the html.

Has anyone found a plug-in which might do this (or could be tricked into doing this)?

juggledad · #2 Jan 19, 2019, 05:13 AM

did you try a google search with 'wordpress plugin add class to page'?
Try https://wordpress.org/plugins/wp-custom-body-class/

Paul Gingell · #3 Jan 19, 2019, 07:06 AM

Epic! Thanks. This is so simple it could almost be included in Wordpress.

For those who might be interested, the Custom Body Class plugin allows you to add an additional .class selector to the <body> via a small box in the page/post editor screen. In this case, I used it to group different pages. So it changes what was this:

Code:

.page-id-8 #bodyrow,
.page-id-50 #bodyrow,
.page-id-39 #bodyrow,
.page-id-279 #bodyrow,
.page-id-12 #bodyrow {
	background-color: #AEB49B;
	box-shadow: 0 0 11em #9CA28B inset;
	-moz-box-shadow: 0 0 11em #9CA28B inset;
		-webkit-box-shadow: 0 0 11em #9CA28B inset;
}

to this:

Code:

.sand #bodyrow {
	background-color: #AEB49B;
	box-shadow: 0 0 11em #9CA28B inset;
	-moz-box-shadow: 0 0 11em #9CA28B inset;
		-webkit-box-shadow: 0 0 11em #9CA28B inset;
}

If you had a 100-page website, with 50 of one colour and 50 of another, that saves an aweful lot of typing!