Adding Body Classes

AlanW · January 7, 2019, 4:21pm

Hi all,

Is there a way to add distinct classes to the <body> tag depending on the page being viewed? This would be extremely useful for theming purposes.

Any information will be greatly appreciated.

AlanW · January 7, 2019, 9:54pm

OK, I was able to solve this with JQuery.

add-body-classes.js

$(document).ready(function() {
if(location.search == “”){
$(“.fixed”).addClass(“initial”);
}
if(location.search == “?page=home”){
$(“.login”).addClass(“loginpage”);
}
if(location.search == “?p=subscribe”){
$(“.fixed”).addClass(“subscribe”);
}
});

Dragonrider · January 8, 2019, 8:52am

Can you explain further please, so as to offer help to any one else who would like to do this? Cheers.

AlanW · January 8, 2019, 4:38pm

Here’s an improved version of the script.

The JavaScript searches for a specific string in the URL and, when a match is found, it will append an additional class attribute that we define to the <body> tag. It’s not fully automatic since we still have to tell the script what string to find in the URL and also what class to append.

$(document).ready(function() {	// This executes the script once the page is loaded.
 if(location.search == ""){		// If the URL of the page is the root and does not have a path string, then...
$(document.body).addClass("initial");	// Append the 'initial' class to the `<body>` tag.
}
if(location.search == "?page=home"){	// If the URL contains the string '?page=home', then
$(document.body).addClass("loginpage");	// Append the 'loginpage' class to the `<body>` tag.
}
if(location.search == "?p=subscribe"){		// If the URL contains the string '?page=subscribe', then
$(document.body).addClass("subscribe");	// Append the 'subscribe' class to the `<body>` tag.
}
});

The script was saved as “add-body-class.js” and placed in the admin/js directory. Then I added the following line via the administration settings:

Config -> Settings -> subscription-ui settings -> Footer of public pages

  <script type="text/javascript" src="admin/js/add-body-class.js"></script>
 </body>

AlanW · January 9, 2019, 3:04pm

One thing that would help make the script automatic would be to ‘clean’ up the URL and remove the query string that is generated on the URL. Drupal and WordPress use the htaccess file to create some server-side rewrites and remove the “?p=” variables. They call it “Clean URLs” or “Permalinks”.

It would be mighty nice if phpList could do the same trick.

samtuke · January 11, 2019, 6:44pm

You mean for public pages (subscription pages) or admin pages? If admin pages, what kind of theming are you doing there? It is probably easier to create a new phpList theme based on Trevelin (aka Bootlist).

Absolutely; that is supported in phpList 4 but not 3.

AlanW · January 11, 2019, 8:01pm

Thank you Sam for the response. I mean only to theme the public facing pages, not the admin or internal pages. That is not really necessary since the current administration theme is quite visually awesome. However, much more flexibility is needed for the public front end and subscriber pages.

AlanW · January 11, 2019, 8:03pm

By the way I tried tackling the problem with URLs (with the mighty help at Stackoverflow) and got some weird problems. But I’m going to open a new thread.

AlanW · January 15, 2019, 7:44pm

Just to clarify the purpose of having body classes for theming purposes. We turned the mundane links into classy buttons, which only affect this page.

Before:

After:

samtuke · January 17, 2019, 10:58am

Wow, nice. That’s a much clearer use case, thanks.