my problem is that the css which is located in a different file does not work for a button.
My button:
echo "<p><i><input type='button' id='register' value='register'/></i></p>";
My css:
#register {
background: red;
}
#register:hover{
background: black;
}
For some reason the :hover works perfectly but the #register not at all
Thank you all.
Here is a JSFiddle : http://jsfiddle.net/Bm9E4/
please make sure that your link href is correctly put in your header.
If you are using a relative path, please make sure it links correctly.
Alternatively you can use an absolute path for linking to your css
Check here the differences
Most probably your #register is overwritten by another one . Please give more code ( or the order in which the css is loading ) or search through other or the same css
CSS works on specificity. The more specific you are, the higher priority that style takes.
For example:
HTML
<div id="myDiv"></div>
CSS
#myDiv {
height: 200px;
}
div#myDiv {
height: 0;
}
In this example the height will be set to 0 because div#myDiv is more specific. You can run in to this problem a lot if you're not careful.
Related
I downloaded a free css/html template for a work, but I have a massive problem... I tried to change the background, but even if I saved and I deleted (yes, I did erase the previous image from my PC!) it still didn't change.. I tried to define the background directly in the html, but then it hasn't shown any photo as a background. What is the problem?
I searched for methods, but none of them worked.. I tried to analyze with the Inspect function on the page, after it had loaded, and if I changed the code in the console, the background changed. Even though, if I replaced the css file with the one I made in the browser, the first image came back, I think I can't get rid of it ever...
What I want:
.main-home {
background: url('../images/background.jpg') no-repeat;
height: 100vh;
}
<section id="home" class="main-home parallax-section">
<div class="overlay"></div>
<div id="particles-js"></div>
</section>
And the code my browser shows:
.main-home {
background: url('../images/home-bg.jpg') no-repeat;
height: 100vh;
}
I expect to see the background.jpg as the actual background of the site, not this... And yes, I saved the css, I refreshed, tried other browsers, other stylings etc
Use property !important it's allows you to increase the priority of style.
.main-home {
background: url('../images/background.jpg') no-repeat !important;
height: 100vh;
}
try add background-size and background-position
.main-home {
background-image: url('../images/background.jpg');
height: 100vh;
width: auto;
background-repeat: no-repeat;
background-size: center;
background-position: center;
}
maybe your section id which is #home have another CSS. or please try using !important. like as below
background: url('../images/home-bg.jpg') !important;
Look every css rules in the css file containing the image path
'images/background.jpg'(eg:).
Sometimes the image may be called from different css rules, like from
media query part.
Open Chrome inspector Network tab and check the Initiator column
against the 'images/background.jpg' image request. Hover on it and
it will show the code that triggered the image request.
Example, if the image was triggered from a JS file the particular line
that caused the action will be shown in the Initiator section.
Also just as like every time, Clear Cache.
I'll try to explain the issue the best I can: I have two css uploads methods. The first one is with link rel and is working fine.
The second one (for performance issues), goes inside the css file and print directly the css into the page.
<!-- <link rel="stylesheet" href="<?php echo URL_SITE; ?>style/index.css" /> -->
<style>
<?php
$urlstyle = URL_SITE.'style/index.css?m='.(int) IS_ON_MOBILE;
$style = file_get_contents($urlstyle);
echo $style;
?>
</style>
There is absolutely no doubt about what is loaded. Those two methods returns the same css.
As an example we can use this part of the css
.wrapper-accueil .scroll:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
As you can see, there is an url inside.
When trying to load the css with the first method, the path is fine. Everything works fine.
But here comes the issues, when I try my second method writting this css inside the file where it's called. The url path of the css is wrong. (I shouldn't have the first ../ to make it works.
But here is the thing. Even if this code shouldn't be working with the second method. The file is loaded properly with no problem. And I can't understand why it's working. (And the cache is cleared ne doubt about that neither).
More stranger things, when I upload the website on server and i'm no longer in localhost, then there is indeed an issue and the file isn't found as it should be.
So working in localhost while it shouldn't. Not working in server while it should indeed not be working.
But I have something more stranger again, I got an other website. Same framework (that means same folder/file structure), same css file, same way of including the file. And with this one using the second method, the file is found in localhost and in server too...while it shouldn't be working with none of them.
I hope you have any idea cause I'm lost at this point. Thanks.
.wrapper-accueil .scroll:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: url("../../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
May be you have a folder containing picto has on another folder
I'm not sure I get 100% what your problem is, but it seems that you load your css with relative paths from two different starting points:
Loaded with link:
www.example.com/path/to/your/application/style/index.css
=> this loads the asset from:
www.example.com/path/to/your/application/assets/img/picto/arrow-down.svg
Included in site:
www.example.com/path/to/your/application/site.php
=> this loads the asset from:
www.example.com/path/to/your/assets/img/picto/arrow-down.svg
^^^
note the missing path due to "../" in your svg path
Maybe this is the answer to your problem, feel free to clarify if I didn't get you correctly! Please also check the developer console, especially the "Network" tab in Chrome and see what exactly is requested and double check the paths there.
I've got a Wordpress site using WooCommerce, and I've got a plugin that isn't working how it should. So, I managed to find a particular line in the PHP code that triggers when I need it to do something my way. Problem is, I need to change some CSS styling within the PHP code.
How exactly would one do something like this?
<woocommerce class="a.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>
<woocommerce class="button.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>
Mind you that code above is incorrect. It is just an example of what I'm trying to achieve.
As for a more detailed breakdown, I'm trying to change/override a CSS style that already exists on my web page. Overall, the trick is to change some CSS style that already exists into doing something else. The CSS for the item I found (from Firefox's HTML debugger/inspector) is:
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt
And I need it to apply these styles instead:
background: #FF8282;
pointer-events: none;
If you need more information, just let me know.
Thank you.
I think that adding an !important behind would do the trick.
{ background: #FF8282 !important; pointer-events: none !important; }
Also, make sure u only link this after all other css occurences.
Would this help?
SOLVED
I included in the logic that was tripping some PHP code:
include '/wp-content/themes/my_theme/400.css';
And that CSS file (400.css) contained:
<style>
.woocommerce a.button.alt { background: #FF8282 !important; pointer-events: none !important; }
</style>
Thank you everyone for your help. Much appreciated.
Have you tried adding !important at the end of your css line ? This will force your new property to overide the one from your plugin :
background-color : red !important;
I guess something like this is your looking for. Just comment if you want modification.
$('button').click(function(){
$('div').addClass('changed');
});
.woocomerce{
background: cyan;
}
.changed{
background: #FF8282;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change CSS</button>
<div class="woocomerce">
Hello World
</div>
I need my administrator to be able to change/update the banner of my site.
This is the banner code
<div class="containertop">This depends on the background of the div</div>
and this is the CSS for that
.containertop
{
width:1000px;
height:300px;
**background:url(../images/1.png) no-repeat center;**
margin: 0 auto;
margin-top: 40px;
}
What I would like to happen is the same as a Facebook cover photo.
When a new banner is uploaded, the CSS will be updated(something like that).
But of course, the new banner must be fetched from the database.
So I am thinking that the CSS would become like this:
Fetch the saved banner source and then:
background:url(<?php echo $row['image']; ?>);
but can I do the PHP connection to database (include 'dbname.php') inside a CSS txt?
There's nothing preventing you to serve a css generated by PHP. That's even easy.
Simply start your php file like this :
<?php
header("Content-Type: text/css");
I agree with Ben. If you make a little embedded css section in your page, you could put the .containerTop css code there. Then, put your code in the page.
So, in your actual web page, put this:
<style type="text/css">
.containertop{
width:1000px;
height:300px;
background:url(<?php echo $row['image']; ?>);
margin: 0 auto;
margin-top: 40px;
}
</style>
Of course, your background url will not update until it is reloaded. If you decide to do it this way, don't forget to take the .containerTop definition out of your existing css.
Having said all that, I really like dystroy's answer. Very nice. I never thought of doing that.
You can set containertop background while loading php file.
<?php
echo "<style>.containertop{ background:url(../images/".$row['image'].") no-repeat center;}</style>"
?>
This will set the background fetched from db.
Well, You can use jQuery to change/overwrite the CSS file.
Example -
$('.containertop').css('backgroud','url(images/change.jpg) repeat');
or
$('.containertop').css('backgroud','url(<?php echo $images_url ?>) repeat');
I am trying to display a banner on a report while printing but it doesn't print. What I did was I set the display status to display:none in my regular CSS
#transfer_head2
{
display:none;
}
and I changed the display status to display:block in my print CSS
#transfer_head2
{
display:block;
}
but this is not working. Why? Can anybody help me?
Check the ordering of your CSS files and the media defined. Your print.css should come last so that it can override any CSS with media=all. Using Firefox with the Web Developer plugin you can change the CSS in your browser to display as if it were print media. You might want to try that in conjunction with the inspection facilities of Firebug to see what CSS is being applied from where.
Maybe your display: none is overwritten by another property later defined. Try !important
display:block !important;
Is #transfer_head2 a TABLE? If so, you need to use:
#transfer_head2 { display: table; }
Is it a TR?
#transfer_head2 { display: table-row; }
Is it a TD or a TH? Then it's the following:
#transfer_head2 { display: table-cell; }
Note that those are not supported in IE6 or lower. In which case you might want to use something like the following:
#media screen {
#transfer_head2 { height: 1px; width: 1px; overflow: hidden; visibility: hidden; }
}
#media print {
#transfer_head2 { height: 60px; width: 468px; visibility: visible; }
}
EDIT: I forgot to specify this in my original post but keep in mind that most browser configurations have background printing disabled by default, so if you have something like the following in your CSS:
#transfer_head2 { background-image: url('../image/print_banner.jpg'); }
it will not print no matter what the display mode. If you have control over the user's browser configuration, this is a non-issue, but in most cases, you will want to use an IMG tag for your banner.
Make sure the container divs (if any) is not hidden
Check the generated source with web developer toolbar to see the inherited properties of the div.
Without seeing the code of #transfer_head2 it's hard to tell, you should paste it into your question.
One possible reason could be that you have made the banner a background for #transfer_head2 element, and browsers are usually set not to print backgrounds by default.
EDIT: ugh, Andrew has covered that already...