I'm trying to build dynamic CSS stylesheet changer, as simple as possible, for Bootstrap / Bootswatch. I've seen many sources, but I found that most examples relies on additional title attribute of link tag. And thus, doesn't work in all browsers or works wrong (mainly because of this problem).
I also noticed, that using title or rel="alternate stylesheet" isn't perfect idea, as though styles listed this way are "ignored" (not rendered) upon initial page load, they are somehow parsed, making browser unbelievable slow. I've added two or three Bootswatch styles next to default Bootstrap stylesheet and I nearly killed my Chrome, though page was rendered only with default styling.
Can someone show an example of dynamic stylesheet changer or proper use-case of title and rel="alternate stylesheet" attribute, that would not consume all my computer resources?
Turned out to be as simple as declaring "default" stylesheet using title attribute:
<link href="assets/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen" title="main">
Then adding some links in form of list (can be used for building Bootstrap's dropdown):
<ul class="dropdown-menu">
<li><i class="icon-fixed-width icon-pencil"></i> bootstrap.min.css (Default)</li>
<li><i class="icon-fixed-width icon-pencil"></i> bootstrap.cyborg.min.css (Cyborg)</li>
</ul>
with rel attribute poining with full path to additional stylesheet.
And then adding a very simple jQuery function:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($)
{
$('body').on('click', '.change-style-menu-item', function()
{
$('link[title="main"]').attr('href', $(this).attr('rel'));
});
});
/*]]>*/
</script>
Works like a charm.
If you have only one stylesheet in entire page, you can omit adding title attribute to link tag and "catch" it using simple $('link') selector instead of $('link[title="main"]'). Since I had other stylesheets included (bootstrap-responsive.min.css), referencing "changeable" stylesheet with title attribute was obligatory.
I would take a look at the twitter bootstrap project, they in my humble opinion have extremely cleanly written code and also should be every browser compliant.
http://twitter.github.io/bootstrap/
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
and you should take a look at this page.
http://twitter.github.io/bootstrap/scaffolding.html#responsive
Related
I want to use ng-href to load different Themes.
The problem is that the unstyled content is shown before the stylesheet is applyed.
I made a Plunker if you compare the last 3 Versions, I just changed Line 8
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link ng-href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link ng-href="//netdna.bootstrapcdn.com/bootstrap/{{styleVersion}}/css/bootstrap.min.css" rel="stylesheet">
If I use ng-href instead of href you can see the unstyled HTML for a second what I need to avoid.
So my Question is if it is possible wait till the stylesheet is loaded or is there a better solution for this problem then ng-href
I edited the Plunker based on feedback I found on Dynamically loading CSS in angularjs (loading delay)
Basically it does 3 things:
Load a start.css file with:
html, body{
display: none
}
Load your ng-href css
Load an end.css file that sets the style of the body back to display: block
It's a hack, but it seems to work.
So I just discovered the bootstrap and I'm trying to implement it into my small webpage/app so that I can make my form/console box more visually appealing.
After integrating bootstrap as an external resource in jsfiddle, the prototype of my app/page still works. See:
code to make the red box go away
jsfiddle
As you can see, the jsfiddle version of my app is working properly
But when implementing bootstrap into the actual site, everything is out of wack...
Actual site
As you can see, the main image and output of text is completely gone and the structure of the form/console is also gone.
Can anyone explain what's going on here?
Am I integrating the CSS file incorrectly or am I just implementing bootstrap incorrectly, in general? Here's some the of the HTML file uploaded to the server:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
...
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="textualizer.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Or does it have something to do with the CSS selectors and maybe they get altered after integrating bootstrap and that's why it's not working in the actual site? I'm totally lost here as to why it works in the jsfiddle but not with the actual site. (usually when I'm completely lost on something of this magnitude, the answer ends up being the most simple thing that I just happen to overlook)....
As you can see in bootstrap docs, it has some markup with css classes to get what you wanted. example, <div class="container"> </div>, <button type="button" class="btn btn-default">Submit</button> etc. It will not get applied automatically to your html page by just adding the css reference. Since you used your custom css styling in jsfiddle it works fine. However, since you have not used your custom css in your website, it will render as plain html markup without any styles.
Hence, please change the markup with bootstrap layout and classes for your website and see the result. If you wish to override colors, etc, you can use a custom css file just after the bootstrap core css file as:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mycustomstyle.css">
You can make overrides to the bootstrap core styles in mycustomstyle.css file. Just read bootstrap docs thoroughly to get an idea about using it in a website/web application.
edit: I just realized the classes I was trying to have styled are NOT included in the ThemeRollers CSS. I was trying to style .ui-li elements, but these are not included in ThemeRoller. Very misleading and aggravating. I don't recall this ever being addressed on their website.
I have made my first custom theme through JQM's ThemeRoller. The JQM structure CSS that is to be included keeps overriding my custom ThemeRoller CSS. I've tried placing it in the <head> section of the HTML code above and below the JQM structure:
<link rel="stylesheet" href="myCustomTheme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
or
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<link rel="stylesheet" href="myCustomTheme.css" />
I've also tried the !important thing in the custom CSS for the elements that have the incorrect style, but this still is overridden by the structure CSS. Not sure why this is so. How can I use my custom ThemeRoller css so that it overrides the unthemed JQM Structure CSS?
Seeing the clarification in your question.Have you tried giving data-role="none" with the elements you want to give the customized css?
It will prevent those element from getting applied the jquery mobile structure css.
And also you are always allowed to edit the jquery mobile css to your customized styling. We need to use unminified version of jquery mobile css for debugging purpose.
So I'm using the VideoJS plug on this site that I'm building. I'm implimenting here like this:
<link rel="stylesheet" href="css/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
<style>
#import url(css/vim.css);
</style>
</head>
And vim doesn't seem to override the video-js.css calls. I've tried this with other skins and the same result happens. I attempted to change the placement in reverse, but that did not suffice. Please let me know if there is something that I could be missing.
I think #import rules usually need to come before other rules, or they'll be ignored in some browsers. Why can't you just link to the second stylesheet as you do the first? Do you need to import for certain media?
Nevermind, folks. I forgot to add the function at the top of the page to enable this.
I understand that using JavaScript and window.print() has limitations around setting certain print options (due to security issues). I also understand that CSS has the ability to set certain elements (like #page) for setting a document to landscape.
Is there a way to use CSS to set print options like zoom, margins, and hide header/footer? If so, does anyone have any code samples for doing this? If this is not possible using JS or CSS, is there any any other tools I could use to put a print button on a page that automatically sets certain print options?
UPDATE: Okay, I appreciate everyone's responses, and now that I have dug in a bit, I have more clarification on what I need... I do not need to modify the CSS on the page. I need to automatically set the local print options when the user clicks the button. I am in a .Net application. Any ASP.NET controls for this? Thanks.
I don't even think JS is required. You can just use the media attribute when linking stylesheets:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
This is the stylesheet that the browser uses when it prints, and it overrides the one you see while browsing the site. Now, inside of print.css, you could change whatever you want and it will only affect the printed document.
As for printing, you could just make a quick button or an element which triggers window.print():
<input type="button" value="Print" onclick="window.print()" />
Good luck!
You can simply add another style-sheet that is specific for printing:
<link href="print.css" type="text/css" media="print" />
And in that stylesheet you just put stuff like:
#header {
display: none;
}
/* etc */
You can add a reference to a CSS file that will only be used for printing using the media attribute:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Or for a inline style block:
<style type="text/css">
#media print{
#heading{ display:none; }
}
</style>