Well i got style.css which it includes in all pages a logo . I'm intrested only to include the logo in one page , so the idea is to edit a copy of Style.css and call it in the script .
Well in pages i got it called like this
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
We have in style.css
.body1 {
background:url(../images/bg_img2.png) no-repeat;
width:262px;
height:397px;
position:absolute;
top:0;
right:6px;
z-index:2;
}
when i delete these lines cause i want to remove the logo , save it as style1.css
and call in the script using this line
<link rel="stylesheet" href="css/style1.css" type="text/css" media="all">
it bugs the pages and deletes all the design , like i have deleted the whole script (like this https://ibb.co/fOsAXz )
i don't think it's needed to upload the whole css , but in request i'll , please help me i'm frozen
What if you just don't include .body1 class to the page you don't wan't to have the logo ?
Related
I'm creating a simple HTML/CSS based website for a certain assignment and I've run into a smaller issue.
I had around 500 lines of code in my main.css file and it was getting hard to read and scroll through, so I've decided to split it into several .css files and link all of them into one with the #import function.
Now then, I've still got the main.css file in my main folder, and inside it the following:
#import url('/css/first.css')
#import url('/css/second.css')
.
.
.
#import url('/css/last.css')
I'm using Brackets as an editor, and while everything works perfectly with Brackets live preview, apparently, when I run the page manually via Chrome (by double clicking the index.html), the CSS doesn't appear at all.
Yes, /css/ is the folder inside the main folder containing all other .css files. And yes, the live preview from Brackets also uses Chrome.
The #import rule could calls in multiple styles files. These files are called by the browser or User Agent when needed e.g. HTML tags call the CSS.
try this below code
#import url("../css/first.css");
#import url("../css/second.css");
#import url("../css/last.css");
Or you can add your css by using link tag in html between tag
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="../css/first.css" type="text/css" />
<link rel="stylesheet" href="../css/second.css" type="text/css" />
<link rel="stylesheet" href="../css/last.css" type="text/css" />
</head>
<body>
</body>
</html>
I've looked at some other threads on Stack Overflow regarding this problem, but for some reason they don't seem to be working. I've checked things like the path directory for the image, and I think that it's correct.
Here's a link to my repo for the website on github pages: https://github.com/lawrencecheng123/lawrencecheng123.github.io
In my repo there is a "Seattle.jpg" image that I'm trying to set as the background of the first page of my website, which is referenced by the "fstPage" class on line 81 of the "index.html" file and line 321 of the "index.css" file in the repo.
Thank you for the help!
It fails because you named your file wrong. Inside of your index.css, you wanted to use a file named Seattle.JPG.
Your file is named Seattle.jpg. Fix the ending and add https://.
Here's the right link: https://lawrencecheng123.github.io/Seattle.jpg
Complete CSS:
.fstPage {
background-image:url("https://lawrencecheng123.github.io/Seattle.jpg");
/*background-color: lightgray;*/
height: 700px;
width:100%;
background-size:cover;
}
Working snippet:
.fstPage {
background-image:url("https://lawrencecheng123.github.io/Seattle.jpg");
/*background-color: lightgray;*/
height: 700px;
width:100%;
background-size:cover;
}
<div class="fstPage"></div>
first import index.css file in your index.html file like
change (1) :
<link rel="stylesheet" href="index.css">
and then you have to update your class as mentioned below
change(2):
.fstPage {
background-image:url("Seattle.jpg");
/*background-color: lightgray;*/
height: 700px;
width:100%;
background-size:cover;
}
and I hope it will work fine for you also
I was searching for all the forums. But none of which worked for me.
Only workaround for me was to change the order of stylesheets in the head
I mean , if you are using multiple stylesheets, including those from bootstrap cdn with the locally saved one, always keep the local stylesheet on top.
Like this
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.
The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css
However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?
Heres how im loading in my css
<link rel="stylesheet" type="text/css" href="css/main.css">
Here is how my file structure looks
Here is my main.css file inside the css folder
my main.css file is within the css folder, i am working off of the interface.html file
Try this instead:
<link rel="stylesheet" type="text/css" href="./css/main.css">
notice the ./ in front of the href
otherwise include full path name:
<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">
this is what i have tried and it is working for me
<link href="./main.css" rel="stylesheet" type="text/css" />
thanks
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
app.use(express.static(__dirname));
Then you can include like bellow
<html>
<link rel="stylesheet" href="/css/style.css">
</html>
The relative path kicks off from your html path so
<link rel="stylesheet" type="text/css" href="main.css">
should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"
I was facing same problem as you are facing but i tired below code and it works.
body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}
<html>
<head>
<link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p>
</body>
</html>
Thanks,
hope it will help you......
I'm also facing this problem... But I found a solution and its working. Try the below code line:-
<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />
For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.
Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.
I'am new in wordpress theme development. Now i have some problem with ordering some css.
My wordpress generate head tags like this
<head>
...
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/muarif/style.css">
...
<link rel="stylesheet" id="normalize-css" href="http://localhost/wordpress/wp-content/themes/muarif/inc/css/normalize.css?ver=4.1.1" type="text/css" media="all">
<link rel="stylesheet" id="bootstrap-css" href="http://localhost/wordpress/wp-content/themes/muarif/inc/css/bootstrap.css?ver=4.1.1" type="text/css" media="all">
...
</head>
*edit for wp_enqueue_style
function site_script(){
wp_enqueue_style('normalize',get_template_directory_uri().'/inc/css/normalize.css');
wp_enqueue_style('bootstrap',get_template_directory_uri().'/inc/css/bootstrap.css');
//jquery script
wp_register_script('jquery',get_template_directory_uri().'/inc/js/jquery.js');
wp_enqueue_script('jquery');
//angular script
wp_register_script('angular',get_template_directory_uri().'/inc/js/angular.js');
wp_enqueue_script('angular');
//bootstrap script
wp_register_script('bootstrap',get_template_directory_uri().'/inc/js/bootstrap.min.js',array('jquery'));
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts','site_script');
Style.css is load automatically if it exist in theme. Now i want to put style.css below than other css and put normalize.css on top for overriding on each stylesheet. I use wp_enqueue_style and fill $deps parameter. But it dont make anything happen.
Any advice?
Can you try this code instead of yours in the question. Also search and remove any other wp_enqueue_style, I think the default one is being loading somewhere else before. Also check if it's hardcoded in header.php
function site_script(){
wp_enqueue_style('normalize',get_template_directory_uri().'/inc/css/normalize.css');
wp_enqueue_style('bootstrap',get_template_directory_uri().'/inc/css/bootstrap.css');
wp_enqueue_style('theme_name',get_template_directory_uri().'/style.css');
//jquery script
wp_register_script('jquery',get_template_directory_uri().'/inc/js/jquery.js');
wp_enqueue_script('jquery');
//angular script
wp_register_script('angular',get_template_directory_uri().'/inc/js/angular.js');
wp_enqueue_script('angular');
//bootstrap script
wp_register_script('bootstrap',get_template_directory_uri().'/inc/js/bootstrap.min.js',array('jquery'));
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts','site_script');
You might also need to update the jQuery part like this:
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery',get_template_directory_uri().'/inc/js/jquery.js');
wp_enqueue_script('jquery');
}
FYI: http://codex.wordpress.org/Function_Reference/wp_register_script
I want to apply single font for each html pages through out my website.
So far I tried this:
* { font-family:Nyala; }
but this works for only one page.
You should include this CSS style to each html page you wish it to take affect in.
Each HTML page should include this:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
And the mystyle.css is:
* { font-family:Nyala; }
Note: see #Raptor comments in order to improve your code.
Move * { font-family:Nyala; } in to a external css file like style.css and call it to the head section of the all html file you want like below.
<link type="text/css" rel="stylesheet" href="style.css" />
Don't forget to give exact file path where you keep your .css file.
Add Below css
body{font-family:Nyala;}
To make a css global you can place it in one common css file and make it's reference on every page.
Another point is if you are using master page in your website then you can place the reference of that css file once in the master page and it will automatically inherited on every content page which have master page applied.