Why doesn't WordPress (.org) recognize my css stylesheet? - css
I'm making a wordpress template from scratch.
I've eliminated many of the files and kept in just the header.php, footer.php, index.php, and style.css to rule out many of my potential problems.
I've played with the code, looked up questions, googled for my solution, but I'm not sure why my style isn't being recognized when i go to my site
the following are my 4 files:
style.css
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* MAIN STYLE */
html {
font-size: 20px;
}
body {
}
#bodywrapper {
background: gray;
font-family: arial, sans-serif;
font-size: 5em;
}
header {
height:20em;
background: #000;
color: #fff;
margin: 0 auto;
}
#nav {
}
#nav ul {
list-style-type: none;
}
#nav ul li {
display: inline-block;
padding: 1em;
}
#nav ul li a{
padding: 1em;
text-align: center;
text-decoration:none;
}
#nav ul li a div{
height: 5em;
width: auto;
padding: 1em;
background-color: black;
}
#sandwichwrapper {
margin: 2em;
border: 1em solid black;
}
#sidebar {
float: right;
width: 15em;
margin: 2em;
border: 1em solid green;
}
#main {
float: right;
width: 15em;
margin: 2em;
border: 1em solid blue;
}
#comments{
clear: both;
margin: 2em;
border: 1em solid yellow;
}
#comment-form{
}
footer {
clear: both;
margin: 0 auto;
padding: 1em;
background: #000;
color: #fff;
}
/* BUNDLED STYLES */
header, footer{
width:100%;
margin:0 auto;
padding: 5em;
overflow:auto;
}
nav #sandwich {
width: 50em;
}
/* TEXT RULES */
h1 {
size: 10em;
color: green;
}
h2 {
size: 8em;
}
h3 {
size: 6em;
}
h4 {
size: 4em;
}
h5 {
size: 2em;
}
header.php
<!doctype html>
<html>
<head>
<title>The Logic Spot</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
header("Content-type: text/css");
</head>
<body>
<div id="bodywrapper">
<header>
<h1><?php bloginfo('name')?></h1>
</header>
<div id="nav">
<?php wp_nav_menu();?>
</div>
<div id="sandwichwrapper">
index.php
<?php get_header()?>
<!--div#bodywrapper contained in header.php-->
<!--div#sandwich contained in header.php-->
<?php get_sidebar()?>
<div id="main">
<?php while(have_posts()): the_post()?>
<h2><?php the_title()?></h2>
<p>By <?php echo get_the_author_link();?></p>
<?php the_content(__('Continue Reading'))?>
<?php endwhile?>
</div>
<!--div#sandwich contained in footer.php-->
<!--div#bodywrapper contained in header.php-->
<?php get_footer()?>
footer.php
</div> <!-- close div#sandwichwrapper-->
<footer>
<?=date('Y')?> Copyright
</footer>
</div> <!-- close div#bodywrapper-->
</body>
</html>
Add this line in the <head> tag
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Hey you need to specify absolute path to the stylesheets, for example
<link type="text/css" rel="stylesheet" href="http://www.yourwebsite.com/wp-content/themes/yourtheme/style.css" />
Also as Matt stated, you can use functions like get_stylesheet_directory_url() or get_stylesheet_uri() to make your path more dynamic.
Related
Alter page style because of screen inches
I'm doing a program where every time a user enters the page, a message of 'Hello' appears for 2 seconds.
I have set the message to appear in a position of ‘left: 75%’ and ‘top:0’
The problem is that I fixed that position when I was testing the style on a 25 '' screen but when I went to my laptop that is 14 '' the message has 'hidden' and I can only see part of it.
Is there any way that the position of the posted message works for all the inches of the screens?
How could I solve this? Can someone tell me if this has a solution? Thank you.
Here is my code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script>
function customAlert(msg,duration)
{
var styler = document.getElementById("welcomeMessage")
styler.setAttribute("style","" );
styler.innerHTML = "<h1>"+msg+"</h1>";
setTimeout(function()
{
styler.parentNode.removeChild(styler);
},duration);
document.body.appendChild(styler);
}
</script>
<style>
#welcomeMessage{
font-family: Arial, Helvetica, sans-serif;
color:#4d4d4d;
background: rgba(0, 0, 255,0.6);
position:fixed;
padding:10px;
text-align:center;
left: 75%;
top:0;
margin-left:-5px;
width:500px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
}
#div2 { /* Style the header */
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/*Navigation bar*/
ul {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;/*f1f1f1/*#333*/
}
li {
float: left;
}
li a {
display: block;
color: #333333; /*333333*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: white; /*#f9f9f9*/ /*Background colour when mouse on top*/
}
li a.active {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div id="welcomeMessage"></div>
<script> customAlert("Hello!", 2000)</script>
<div id="div2">
<h1>Project</h1>
</div>
<div class="tab" id="navbar">
<ul>
<li><a class="active">Tab 1</a></li>
<li><a target="_blank">Tab 2</a></li>
<li><a target="_blank">Tab 3</a></li>
</ul>
</div>
</body>
</html>
We say that 'responsive'. You can google it and find many examples about that.
If you want a quick tutorial:
Add this inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
And you can define your styles in css with media
#media only screen and (min-width: 768px) {
#welcomeMessage {
left: 50%;
}
}
This code will only work if window size is larger then 768px
Header cut off on mobile devices
The header is being cut off on mobile devices, this is causing the top of the logo to be cut off. The issue occurs on this website: http://development.blackcountrydesigns.co.uk
I am building a custom theme for the website. This issue does not appear when inspected in browser tools, only when actually viewing on a mobile device. Tested on an iPhone 6 and Sony Xperia XZ1.
Here is my header.php file:
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=0'>
<title><?php echo get_bloginfo('name'); ?> | <?php echo get_the_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div class='bravo-logo'>
<?php if(function_exists('the_custom_logo') && has_custom_logo()) {
the_custom_logo();
} else { ?>
<a href='<?php get_bloginfo('wpurl'); ?>'><?php echo get_bloginfo('name'); ?></a>
<?php } ?>
</div>
<div class='bravo-main-menu bravo-menu'>
<?php wp_nav_menu(array('theme_location' => 'main-menu', 'item-spacing' => 'discard')); ?>
</div>
<div class='bravo-mobile-menu'>
<i class='fas fa-bars fa-2x' id='bravo-hamburger'></i>
</div>
</header>
<div class='bravo-vertical-nav'>
<?php wp_nav_menu(array('theme_location' => 'main-menu', 'item-spacing' => 'discard')); ?>
</div>
Here is all of the relevant CSS for my header - please note there are approximately 600 lines of CSS so I have just stripped the file and only included CSS that is relevant to the site header:
/* Global/General Styles */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
background-color: #eee;
color: #4d4d4d;
font-family: 'Montserrat', sans-serif;
}
body {
padding-bottom: 270px;
position: relative;
min-height: 100vh;
}
/* Header */
header {
min-height: 150px;
display: flex;
align-items: center;
border-bottom: 3px solid #1abc9c;
background-color: #fff;
}
/* Logo */
div.bravo-logo {
padding: 1rem;
margin-left: 1.5rem;
}
div.bravo-logo img {
height: 100px;
width: auto;
}
#media only screen and (max-width: 450px) {
div.bravo-logo img {
width: 90%;
height: auto;
}
}
div.bravo-logo a {
text-decoration: none;
font-size: 1.5rem;
color: #4d4d4d;
}
/* Menus */
div.bravo-menu ul {
list-style-type: none;
}
div.bravo-menu ul li {
display: inline-block;
}
div.bravo-main-menu {
align-self: flex-end;
width: 100%;
margin-right: 3.5rem;
}
div.bravo-main-menu ul {
float: right;
}
div.bravo-main-menu ul li a {
display: block;
padding: .5rem .75rem;
text-decoration: none;
color: #4d4d4d;
font-size: 1.5rem;
font-weight: 200;
letter-spacing: .15rem;
transition: .3s;
}
div.bravo-main-menu li.current-menu-item a {
font-weight: bold;
}
div.bravo-main-menu ul li a:hover {
background-color: #1abc9c;
color: #fff;
}
div.bravo-mobile-menu {
display: none;
margin-right: 1.75rem;
}
div.bravo-mobile-menu i {
cursor: pointer;
}
div.bravo-vertical-nav {
display: none;
}
div.bravo-vertical-nav ul {
list-style-type: none;
}
div.bravo-vertical-nav ul li {
text-align: center;
cursor: pointer;
padding: .85rem 0;
background-color: #eee;
border-bottom: 2px solid #1abc9c;
}
div.bravo-vertical-nav ul li a {
text-decoration: none;
color: #1abc9c;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: .1rem;
}
#media only screen and (max-width: 1160px) {
header {
justify-content: space-between;
}
div.bravo-main-menu {
display: none;
}
div.bravo-mobile-menu {
display: block;
}
}
#media only screen and (max-width: 1070px) {
body {
padding-bottom: 570px;
}
header {
margin-top: -32px !important;
}
div#wpadminbar {
display: none !important;
}
}
#media only screen and (max-width: 782px) {
header {
margin-top: -46px !important;
}
}
The negative margin top that I've set on two breakpoints is to get rid of the space left when hiding the admin bar - I have tried with and without these values and neither has seemed to make a difference. I have tried adjusting the padding on the header and logo containers, but I'm struggling as I can't seem to replicate the errors within my desktop browser.
Please see below a screenshot of the issue:
It's caused by bravo.css?ver=0.0.1, line 483:
#media only screen and (max-width: 782px) {
header {
margin-top: -46px !important;
}
}
... which overrides the rule set at line 456 (same file):
#media only screen and (max-width: 1070px) {
header {
margin-top: -32px !important;
}
}
You probably want to set a different value for that margin-top. -10px looks like a good candidate.
You are doing something wrong when hiding admin bar, you don't need that negative margin-top, leave it at 0. Install "remove admin bar" plugin or add add_filter(‘show_admin_bar’, ‘__return_false’); to functions.php for properly hiding it when logged in.
White bar between my nav bar and main text?
After looking on stackoverflow for really long i could not find an answer to my question, so that's why i am asking it instead!
There's a strange white part between my navigation bar and main container, which i tested by just typing a under the bar
This is my code:
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: gray;
}
#wrapper {
margin: 32px 160px 0 160px;
background-color: white;
height: 90%;
}
#nav {
background-color: #48D1CC;
margin: 0;
padding: 0;
}
#nav ul li {
margin: -7px 4px 1px 0;
background-color: #48D1CC;
width: 19.5%;
height: 42px;
display: inline-block;
text-decoration: none;
text-align: center;
color: black;
}
#nav a {
line-height: 42px;
font-family: arial, serif;
font-size: 20px;
}
#nav ul li:hover {
background-color: #40E0D0;
}
#right {
margin: 0;
width: 15%;
height: 10px;
color: black;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home</li>
<li>Help</li>
<li>Contact</li>
<li>Forum</li>
<li>Info</li>
</ul>
</div>
a
<noscript>Please enable JavaScript, you have it disabled</noscript>
</div>
</body>
</html>
I am not sure why this happens, so some help would be great to have.
Your ul has a 16px bottom margin
#nav ul {
margin-bottom: 16px;
}
NOTE the next time you face a similar problem try using Chrome Dev Tools (prssing f12) or FireBug to analyze the elements with an unexpected behaviour
Your <ul> tag is adding padding by default. Override it by adding:
ul{
margin-bottom: -1px;
}
href appears on a separate line to my form in IE
I am trying to create a simple search bar with a background, and an 'Advanced' href on the side. It is rendered correctly in Chrome, Mozilla, however in IE 8 the href appears as a separate block on the line below?
My HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>FireFox HomePage</title>
<!--[if lt IE 9]>
<script src="../HTML5Shiv/dist/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="MainPage1.css" />
</head>
<body>
<header>
<div class="wrapper">
<img src="../../IMG/FireFox.png" alt="FireFox Logo" title="FireFox Home" />
<span id="usernav">Logout<a href="#">My Profile</span>
</div>
<form action="" method="Search">
<p>
<input type="search" />
<input type="submit" value="Search"/>
Advanced
</p>
</form>
</header>
</body>
</html>
My CSS code:
/* CSS Reset */
* { margin: 0; padding: 0; }
html { height: 101%; font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif; background: #fff; }
body { font-size: 62.5%; font-family: Helvetica, Arial, sans-serif; line-height: 10%; }
img { border: 0;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Main CSS */
header { width: 1000px; margin: 0 auto; clear: both;}
.wrapper { width: 1000px; margin: 0 auto; margin-top: 10px;}
#usernav { position: relative; margin-top: 20 px; font-size: 12px;}
#usernav a { color: #444; text-shadow: 0px 1px 1px #ddd; text-decoration: none; float: right; padding: 8px;}
#usernav a:hover { text-decoration: underline; }
form{background-color: #eee; border-bottom: 1px solid #dadada; height: 50px;}
/** #group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
Ok I've solved the problem after playing around with the code a little. It seems that removing the <span id="usernav">Logout<a href="#">My Profile</span> from within the div and placing it directly within the header solved the IE bug. Not sure why though, suggestions are welcome. I can't post the image as I don't have more than 10 reputations points :(
Css link not working in firefox
i have a very annoying problem. i have made a design of my site using CSS and it seems to work perfectly in Google Chrome and IE but the CSS designing is not all working in Firefox. what Could be the problem , i tried lots of things its still not working.
As new users are not allowed to post the image. i m unable to explain with the screen shot.
My code in Index.php
<!Doctype html>
<html lang="en">
<title>Online Voting RTC</title>
<head>
<link type="text/css" rel="stylesheet" href="css\style.css">
<script type="text/javascript" src="js\create_text_box.js">
</script>
</head>
<body>
<div id="wapper">
<!-- Define Header -->
<?php include("header.php"); ?>
<!-- End Header -->
<!-- Main content area -->
<?php include("maincontent.php");?>
<!-- End of Main content area -->
<!-- Left Sidebar -->
<?php include("sidebar.php");?>
<!-- End Left Sidebar -->
<!-- Footer -->
<?php include("footer.php");?>
<!-- End of Footer -->
</div>
</body>
</html>
This is the Css portion
body {
background: #ffffff;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #dddddd;
}
#header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #403cf7;
}
.logo {
float:left;
position:relative;
left:20px;
top:20px;
}
.pagetitle {
float:left;
position:relative;
left:550px;
top:20px;
}
.usermenu {
float:right;
position:relative;
right:20px;
top:20px;
}
#sidebar {
width: 20%;
height: 600px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #ffff99;
text-align: center;
}
#maincontent {
width: 80%;
height: 600px;
margin: 0;
padding: 0;
border: 0;
float: right;
background: #95dff8;
}
#footer {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #272727;
}
/*-----------------------------------------CSS for navigation Menu------------------------*/
#navMenu{
color:#d4d3d3;
font-family:Geneva;
float:left;
}
#navMenu ul li a{
text-decoration:none;
color:#989694;
}
#navMenu ul li a:hover{
color:#f46322;
}
#navMenu ul{
padding:0;
margin:0;
margin-left:25px;
list-style:none;
position:relative;
left:20px;
top:20px;
}
/*----------------------------------------------------------------------------------------*/
i would be very grateful if someone can help me out in this case. Actually i was checking for browser compatibility, and i came across this problem.
Thanks in advance :D
The character “\” (backslash) is not allowed in a URL; change it to “/” (normal slash). Some browsers implicitly convert the incorrect “\” to “/”.
try to remove the type="text/css". Your code should be look like this: <link rel="stylesheet" href="css/style.css">
You need to close your link tag <link type="text/css" rel="stylesheet" href="css/style.css" /> If your css folder is off the route dir of your site you would be better using <link type="text/css" rel="stylesheet" href="/css/style.css" /> as this will still work if you move your page to a different folder. You also need to move your title tag within the HEAD element to make the HTML valid.
I had this problem too. Once I removed the z-index of -1 from the container class. the links started working again.