Wordpress custom CSS for specific page not loading - html

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>
Page link</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;
}

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>
Page link</div>
</body>
</html>

Related

How to open a local file in html?

Hi i started learning html a say or two ago and i was just messing around with some features when i thought of making a website which stored my school stuff in a arranged manner then i wanted to make a button that opens a local file but i just couldn't make it happen but i tried searching it on web but nothing worked for me
here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>body{background-image: url(x.jpg);
background-size: cover;}
</style> <div id="red">
<button><a src="C:\Users\laksh\Mywebsite\jkoj.html">jkoj</a></button>
</div>
</body>
</html>
don't use src attribute in a tag, use href in place of src

How to add a relative URL to the web page?

I have written a code using HTML to practise how to add a relative URL to the web page. But it doesn't work properly.
Folder structure for your project.
website(Main folder)
-links.html (html file)
-gb(Sub folder)
-currency-converter.html (html file)
links.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first website</title>
</head>
<body>
<p>Let's start creating html links.</p>
Visits to I Love PDF
Visits to Currency Converter
</body>
</html>
currency-converter.html file inside the gb folder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My second website</title>
</head>
<body>
<p>Welcome to currency converter page.</p>
</body>
</html>

How to display SVG Sprite Icons in HTML file while working locally?

I am using SVG icons (from IcoMoon), the problem is I can't see the icons while working locally, but when I upload the page online it works fine.
<!doctype html>
<html>
<head>
<title>SVG Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<svg class="ico ico-menu"><use xlink:href="icons/symbol-defs.svg#ico-menu"></use></svg></td>
<script defer src="icons/svgxuse.min.js"></script>
</body>
</html>
I am not using any local server. It is a plain HTML file. I wonder how can I fix this issue?
Thank You

Polish specific characters in ejs

I have set up a node js based server. I need to display specific polish characters in one of my pages. I have tried to add few lines I found in internet but there was no success, I'm still getting "?" instead of getting polish character. For views I use ejs.
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta charset = "UTF-8">
<meta http-equiv="refresh" content="10" >
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id = "NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
My actual result is "Niepubliczny Zak?ad medycyny rodzinnej" instead of "Niepubliczny Zakład medycyny rodzinnej". (you can find it in div).
You could try this:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id="NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
For me, this code works OK :
http://next.plnkr.co/edit/DKvMsvAwoxMPu36J?open=lib%2Fscript.js&preview

Firefox: no CSS errors/warnings in the log

I created a site with a bogus CSS code:
a {
foobar: 8888;
}
Then opened the page in Firefox. I looked in the web console and I can see no errors/warnings. Why?
My html head is:
<head>
<title>title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="http://localhost:35729/livereload.js"></script>
</head>
There is no warning in web console because wrong CSS rules simply has no effect in the page.