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;
}
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'm having trouble with a print in html, because my background color web-site is black and when window.print() is activated i need the background color switched to white.
How can I do this? considering Time X Work.
I´ve tried to change Css, transform to PDF and others.
I can´t use PHP.
You should be able to do this in a stylesheet with an #media print directive.
You can configure a separate stylesheet for printing. Take a look online at print stylesheets.
E.g. http://www.alistapart.com/articles/goingtoprint/
The key part being
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
You can then add this in the print.css stylesheet
body {
background: white;
}
to get rid of the background
Is there an easy way to overwrite all text/header styles to let the browser handle the text formatting in the print stylesheet?
Edit:
I have lots of styles such as
#id .class .class #id .class p{}
Make sure that any styles you have applied to the text / header which you do not want applied during "print" mode are specified as;
#media screen {
.headerStyle { color: green; }
}
They will then be ignored during the #print screen mode.
No. You can only cascade downwards, and you can't refer to other styles. Limit the CSS you have to the media types you want in the first place.
I have learnt that any CSS formatting created in a stylesheet specified as screen does means that the printing page will be unformatted.
In my example, I can't touch the HTML and the CSS media has not been specified, so the problem remains, but you should always make sure you set this to avoid problems in other medias.
Set the CSS globally (including print)
<link href="style.css" rel="stylesheet" type="text/css">
Set the CSS just for screen (excludes any media, including print format)
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
Google Maps used to do this bit where when you hit the "Print" link, what would be sent to the printer wasn't exactly what you had on the screen, but rather a differently-formatted version of mostly the same information.
It appears that they've largely moved away from this concept (I guess people didn't understand it) and most websites have a "print version" of things like articles and so forth.
But if you wanted to make a webpage such that a "printer friendly" version of the page is what gets sent to the printer without having to make a separate page for it, how would you do that?
You can achieve this effect by creating a css stylesheet which is targeted directly to printing, and another targeted directly for the screen.
Use the link tag:
<link rel="stylesheet" type="text/css" href="print.css" media="print, handheld" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
to embed your stylesheet into your document.
To hide is easy, just set your block style to hidden in whatever stylesheet you want and it wont be displayed. For example:
.newStyle1 {
display: none;
}
Then anything set to the style of newStyle1 will not be displayed.
The #media rule in CSS can be used to define alternate rules for print.This is often used to hide navigation and change the style to fit print better:
#media print {
.sidebar { display: none; }
}
You can also link a seperate stylesheet for print:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You can do this with the css when you specify media as print.
Another way, if desired, is to have the 'print' button on the page change the page in some way that you decide, then perform a javascript 'window.print();' to bring up the browser's print dialog.
There are several options available to you:
You can open a new window with slightly different data to be printed.
There are also CSS styles which you can use to alter the page layout.
Finally you can specify completly different style sheets for screen, printed media, Braille readers etc.
e.g. <link href="css/print.css" type="text/css" rel="stylesheet" media="print" />
See also CSS2 Print Reference
Use a print stylesheet.
Edit: Regarding the followup, you can't, in general, add things to a page with CSS.
One option is to include your print-only content in the page, and hide it for screen stylesheets. You should make sure that the page still makes sense without CSS though.
Another option is to use generated content, but this isn't supported by Internet Explorer 7 and below, and can be quite limited.
If the print-only content is an image, you can swap that out using one of the popular image replacement techniques.
The easiest way is to use CSS media types. For each CSS file you include, you can specify where it ought to be used: on-screen, when printing, for handhelds, for screen-readers, or various combinations of these.
Example: <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
This has been a standard since CSS2, and most browsers support it now. More information is available here: http://www.w3.org/TR/CSS2/media.html
CSS allows you to create stylesheets for particular types of media, meaning that you can have a stylesheet that only applies when you're printing a page, allowing you to cause it to be formatted differently.
Just include a media="print" attribute on your stylesheet link for that stylesheet.
This A List Apart article seems to be quite good on the subject.
I tried using different style sheets based on the media, but I ran into trouble getting all the options I needed in. Since then I usually redirect to a different entrance of our (Fusebox) framework (i.e. print.php in stead of index.php) which in essence is the same file except it sets an extra flag/constant.
In the XSL file associated with the page I then do additional work based on that flag/constant like leaving out the menu, columns of a table etc.
i.e. (Page shows a link that the user has to click to display the password on the screen. The print version has the password printed.)
if (!BOOL_PRINT)
echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{\$team_id}\" onClick=\"RevealPassword('{\$team_id}','{\$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n";
else
echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";
You can define css rules that are specific to a media type. The following is a css example (copied from http://www.w3.org/TR/CSS2/media.html, section 7.2.1) that specifies different font sizes what gets displayed on a web page and what gets printed.
#media print {
BODY { font-size: 10pt }
}
#media screen {
BODY { font-size: 12pt }
}
#media screen, print {
BODY { line-height: 1.2 }
}
Alternatively, you can specify what media a stylesheet should be applied to when including it in a page:
<link href="webstyles.css" type="text/css" rel="stylesheet" media="screen"/>
<link href="printstyles.css" type="text/css" rel="stylesheet" media="print"/>
<link href="commonstyles.css" type="text/css" rel="stylesheet" media="screen,print"/>
Yet another option is to have a hidden IFRAME that you call iframe.contentWindow.print() on. That will allow you to create an invisible layout that prints exactly as you want it to.
Of course, an even better solution is to export the file to a PDF and let the user print it out that way. PDFs produce the highest quality output, period. However, it is one more hoop for the user to jump through, so the rule of thumb is:
PDFs for when the print layout matters
HTML for when the pure text is more important than the layout
Anything you can do with CSS you can do in a print stylesheet. This means you can hide content in the print version which is shown in the screen version or hide content in the screen version which you want to show up when printing.All you do is apply display:none to the appropriate sections in the appropriate stylesheet.
Also it is a good idea to size your text in points for the print version (which is a bad idea for the screen version - stick to pixels, ems or percentages here). There is universal agreement as to what printed point sizes are where as mappings of pixels to points will vary with different resolution devices.
nsayer mentions having a print button change the layout of your screen and then kicking off a window.print()
This is a solution that will probably have been overlooked by a lot of people and should be considered when you think your users want a little more of a WYSIWYG. It should probably be a "printer friendly" link though that changes the media type of your sheet sheets rather than "print this".
Using jquery, you could do something like this (not checked):
$(document).ready(function(){
$("#printFriendly").click(function(){
$(link[rel=link][media=screen]).remove();
$(link[rel=link][media=print]).attr("media","screen");
});
});