I am having an issue as I cannot override the styles of the elements on my website with my custom stylesheet. The issue is because of the foundation.css file as well as the normalize.css possibly. For some odd reason though the styles do override while being in a mobile resolution which has me completely lost. For example in my custom stylesheet (app.css) I have the following line:
li a {background-color: orange;}
Just for testing measures obviously. As the code above is shown you should be able to tell that any list with a link should have an orange background color. When viewing the website in my native resolution (1920px x 1080px) none of them are shown with an orange background. You can view an image of what I have explained.
As you can see the blue button shown with "Right Button Active" inside of it is the default color that the foundation.css stylesheet makes it. Now when I change my Google Chrome window to a thin window and take a look at the "Right Button Active" button it actually turns the button orange as you can see at the following picture.
I have looked at the other question mentioned on stack overflow: How do I get my #import stylesheet to override the main stylesheet?
and tried to follow that solution but that didn't work for me in solving my issue. What makes me confused about my situation is the fact that my stylesheet will work on the mobile dimesion window but when I am in my native resolution and have the window showing on fullscreen it does not show up as I have it styled in my custom stylesheet.
Here is my head.php file to show you how my stylesheets are sorted and / or arranged:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation example</title>
<link rel="stylesheet" href="foundation/css/normalize.css">
<link rel="stylesheet" href="foundation/css/foundation.css">
<link rel="stylesheet" href="includes/app.css">
<script src="foundation/js/vendor/modernizr.js"></script>
</head>
<?php
include 'header.php';
?>
Any ideas?
The Proper Selector
You need more specific selector to make it work like you need.
The better way is to set up variables in Foundation's settings.scss file. However, SCSS compilation is needed in this case and if you don't want to do it (or if you simply can't) these lines will be enough:
.top-bar-section li.active:not(.has-form) a:not(.button) {
background-color: #FFA500; /* orange color */
}
.top-bar-section li.active:not(.has-form) a:hover:not(.button) {
background-color: #F09600; /* darker orange, lightness -6% is Foundation's default */
}
Note: You don't need using !important if you include app.css style file after the Foundation's one. It is better to avoid of usage of this keyword.
CodePen working example
Note: If you don't use the proper selector then you take a risk than some other stuff change their color too which shouldn't be the correct behaviour. However, if you want to change blue color to the orange one in general you should use SCSS distribution of Foundation, change $primary-color variable and then compile your own CSS.
How To Find Proper Selector
You need some web development tool, e.g. Firebug, which is abailable for all modern browsers. Then use it as is described below:
Select inspect element tool.
Click on the element which you want to inspect.
Search for the attribute which you want to change - in your case, you are looking for attribute background-color. Then you can see the selector and you are also able to redefine color in the Firebug tool in place to see results immediately.
If your foundation.css has more specific rules to what you are trying to change, they could override your code done in app.css. One way to try this is to put the !important at the end of your CSS-statement, before the ; of the row.
In a case if that changes something, you should inspect your website via your browser's inspector in order to figure how it is being styled and what overrides what.
Please refer to this question for more information about load order and rule priorities.
You have set the orange colour here in app.css
ul.dropdown>li>a{background-color: orange !important;}
This is only pointing to the drop down list for styling, not the button you hover/click to get there. Add this to your app.css style sheet and I am confident it will fix it.
ul .has-dropdown a:hover {
background-color: orange;
}
Related
I have a bootstrap4 project where the user needs to be able to print the page. I have a print.css file that I have a few obnoxious styles it just to see if the styles are taking effect and they are not.
My styles are
#media print {
body{background-color:green;}
p{color:red;}
}
Could there be something with bootstrap preventing the styles? The print is not even taking on bootstrap styles.
My link looks like this
<link href="css/print.css" rel="stylesheet" media="print">
I have also tried changing the media type to all and that was a fail as well.
This is not about the background color. I have many display:none;'s in there as well that are not being read either. I only used the background color as a test and example.
I may be wrong but give it a shot,
<link rel="stylesheet" type="text/css" href="print.css" media="print">
I believe you're actually missing the Type and with my understanding it's not needed but may be for a print doc.
Let me know how it works or if it does, make sure this is at the top of the list of Links just to clarify that's not the problem too.
Just read a comment on your question and I believe they're right about bootstrap having it's own print stylesheet but I'm sure it can be overwritten. If not don't worry too much about it. I've just finished developing a site and as long as your code is correct and layed out right it should sort itself out, or atleast mine did :'D
You could try adding it to your main stylesheet with an #media and see if that works
#media print {
/*styles here*/
}
My assignment was to make a website using Dreamweaver with three pages: leftnav.html, rightnav.html, and colorchange.html. The base is leftnav with a left orientated navigation bar, rightnav is the same except the nav is on the right, and colorchange is the same except that the header and footer image is different.
I styled each page with a .css stylesheet and embedded styles. All of those style rules were applied across the board to each .html and are functioning well when I open them on Dreamweaver CC or github. However, my embedded styles are not working when I upload them to my university's server using WinSCP. I've used WinSCP for the duration of this class and haven't had any issues before.
All the files are up to date and are equivalent to the files in Dreamweaver and on Github, so the code itself shouldn't be a problem. Just in case, here are the embedded style rules from changecolor.html:
<head>
...
...
<link href="project7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#banner, #footer {
background-image: url(beigebg.jpg);
}
#content {
border-left: 250px solid #F0E1BA;
}
</style>
</head>
If anyone could give me something to try, or if you need more info to get an idea of what's going on, please let me know. Thanks!
The beige is actually coming from "colorchange.html" as seen in the style sidebar
If you want the green color, you can either increase specificity, use background-image: url(...) !important or figure out how that additional colorchange.html is being included
If you want the beige color, you can add the style to project7.css or figure out how to include colorchange.html
I am modifying my CSS3/HTML5 site to work with different Medial Queries.
The site pages are in the Root directory. The CSS files are within a folder in the root directory called css.
Within the HEAD tags of my page, I have one CSS file for the default stuff and then I have another one for iPad in an external CSS file called ipad.css
When I am in the Developer Tools within Google Chrome, it doesn't seem to be applying the rules within the ipad.css file. I know this because I am wanting to change the text size of an element and it is not changing. Nothing is happening.
This is what I have within the HEAD tags:
<link rel="stylesheet" type="text/css" href="css/default.css" title="Default Styles">
<link rel="stylesheet" type="text/css" href="css/ipad.css" media="screen and (max-device-width: 768px)" title="iPad Styles">
According to the Google Chrome Developer Tools, an iPad width is 768px. I have referenced this within the link tag. Any ideas or suggestions welcome.
Use max-width: 768px rather than max-device-width: 768px.
Also, remember to specify a viewport meta tag in the head section of your html.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Also, you might want to check
What is the difference between max-device-width and max-width for mobile web?
Also, keep in my you're not targeting devices, you're targeting resolutions.
Another possible source of your problem might be that you are using less specific selectors in your ipad.css. Don't forget that the styles from your default.css are also used on resolutions lower than 769px!
To test this, put this css rule on the very top of your ipad.css:
* { display: none !important; }
If your site vanishes then, your stylesheet is loaded and applied.
I tried the max-width as well and the style isn't applying. Even if I change the font-color of the text within the div class (p tag), nothing is happening.
As an example, I have a div class called banner-textoverlay so, in my ipad.css file, I wrote the following to see if it would change the text color and nothing happens at all.
.banner-textoverlay p {
font-color:#000000;
}
I am developing a website that must print a page that contains Font Awesome icons. The issue is that when you go to print, the Font Awesome icons will not print in color.
In the browser they show up in color, but when the page is printed the icons are solid black. Is there anyway to make the Font Awesome icons print in color? Perhaps through CSS with #media print { }?
EDIT: Also, I am developing in firefox.
It turns out that the item that you actually need colored isn't the i itself but its :before element. Thus:
<style type="text/css">
.fa:before { color:red; }
</style>
If you are using bootstrap you need to edit its CSS since it's specifies black color for "#media print"
I just put together a simple HTML example using font-awesome and it seems to work fine in Chrome and Firefox for me. I see the icon in red onscreen and it also prints in red without any further action. Having said that, creating a separate media CSS is a good idea if your HTML page warrants it, since it can provide a better user experience (onscreen view isn't always ideal for printing).
Are you sure you don't have a printer setting modified to not print in color? Is the printer out of that color and thus defaults back to just plain black? Have you tried it in another browser (Chrome, Safari, Opera, IE)?
Here is the simple code I used for testing:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<title>Fontawesome Test</title>
<style type="text/css">
.fa { color:red; }
</style>
</head>
<body>
<i class="fa fa-camera-retro"> Testing color</i> fa-camera-retro
</body>
</html>
I have an application that prints html files, the quailty looks good when printed from IE. However I've noticed when printing from FireFox the checkbox's look very light. It's almost difficult to tell if the box is checked or not. Is there a easy way to darken these checkboxes
As it's Firefox you are talking about, you probably could define a special print stylesheet like this:
<link rel="stylesheet" media="print" href="print.css" />
And inside you could do:
input[type=checkbox] { background: #000000; }
However: Most browsers are configured to ignore background colors when printing. In addition to that form element rendering is usually up to the browser and by definition you can't really influence checkboxes.
Maybe you can find something useful in the related questions. For example here: How to change checkbox's border style in CSS?