I asked this question before and the solution worked at that time when I asked! However it is not working anymore for some odd reason. I was hesitant to 'ask' the question again but I can't seem to find a solution. So what I am asking now is how to properly add css to a website using the functions.php.
Here is my functions.php code to add the css:
<?php
function fearnothing_script_enqueue(){
wp_enqueue_style('customstyle', get_template_directory_uri().'/css/fearnothing.css',array(), '1.1.1', 'all');
}
add_action('wp_enqueue_scripts', 'wp_enqueue_style');
Here is my fearnothing.css (i've been working on my website offline and the css works properly there so I don't know what the issue is with my functions.php file not adding css to my website):
html,
body {
margin: 0;
color: #91f213;
background: black;
font: sans-serif;
cursor: pointer;
}
body{
padding: 20px;
}
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
header.php
<!DOCTYPE html>
<html>
<head>
<title>lonely spaceship</title>
<?php wp_head(); ?>
</head>
<!-- <div class="video-container">
<video autoplay="true" muted="true" loop="true">
<source src="wp-content/themes/fearnothing/earth.mp4" type="video/mp4" >
</video> -->
</div>
<body>
<p> This is a test text</p>
index.php
<?php get_header(); ?>
<p>Test index text</p>
<?php get_footer(); ?>
footer.php
<footer>
<p></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
I asked this question before and the solution worked at that time when I asked! However it is not working anymore for some odd reason. I was hesitant to 'ask' the question again but I can't seem to find a solution. So what I am asking now is how to properly add css to a website using the functions.php.
Here is my functions.php code to add the css:
<?php
function fearnothing_script_enqueue(){
wp_enqueue_style('customstyle', get_template_directory_uri().'/css/fearnothing.css',array(), '1.1.1', 'all');
}
add_action('wp_enqueue_scripts', 'wp_enqueue_style');
Here is my fearnothing.css (i've been working on my website offline and the css works properly there so I don't know what the issue is with my functions.php file not adding css to my website):
html,
body {
margin: 0;
color: #91f213;
background: black;
font: sans-serif;
cursor: pointer;
}
body{
padding: 20px;
}
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
header.php
<!DOCTYPE html>
<html>
<head>
<title>lonely spaceship</title>
<?php wp_head(); ?>
</head>
<!-- <div class="video-container">
<video autoplay="true" muted="true" loop="true">
<source src="wp-content/themes/fearnothing/earth.mp4" type="video/mp4" >
</video> -->
</div>
<body>
<p> This is a test text</p>
index.php
<?php get_header(); ?>
<p>Test index text</p>
<?php get_footer(); ?>
footer.php
<footer>
<p></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Your add_action() is incorrect:
add_action('wp_enqueue_scripts', 'wp_enqueue_style');
The 2nd argument is supposed to be the function that you enqueue your stylesheet in. In you case that's fearnothing_script_enqueue():
add_action( 'wp_enqueue_scripts', 'fearnothing_script_enqueue' );
wp_head()in the header? – Jacob Peattie Commented Nov 28, 2018 at 12:12<?php wp_head(); ?>– user154455 Commented Nov 28, 2018 at 12:13