Issue
I am trying to change some css for a specific wordpress page. It should be that I can just add .page-id-# before the new css rule. It seems simple but I just can't get it to work. I've tried different selectors, adding !important, trying different browser, checking the id, trying different pages etc but the custom css never loads.
Eg. In the code I've tried below the text on page 2 should be blue rather than red but the custom css doesn't load and so it stays red. Am I missing something obvious?
Page 1 -------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
<meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
<link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
<?php
wp_head();
?>
</head>
<body>
<div class="change_colour">Hello</div>
<div>
<a href="http://localhost:8080/testing/?page_id=2">Page link</a></div>
</body>
</html>
Page 2-----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
<meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
<link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
<?php
wp_head();
?>
</head>
<body>
<div class="change_colour">Hello</div>
</body>
</html>
CSS------------------------
/*
Theme Name: Testing
Text Domain: Testing
Version: 1.0
Decription:
Tags:
Author: Jonny
*/
.change_colour {
color: red;
}
.page-id-2 .change_colour {
color: blue;
}
Solution
You have to add <?php body_class(); ?> inside your opening body tag then you have to inspect the page and check the body tag for your .page-id-** class and then write CSS as per the class you get in the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
<meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
<link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
<?php
wp_head();
?>
</head>
<body <?php body_class(); ?> >
<div class="change_colour">Hello</div>
<div>
<a href="http://localhost:8080/testing/?page_id=2">Page link</a></div>
</body>
</html>
Answered By - Aman
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.