I cant seem to find a way to exclude my layout in express. I tried doing
response.render("index",{layout: false});
but that disables the css for the page. Is there something im missing here? What is the best way to disable the layout but keep the css?
Also, I'm using app.use(express.static("public")); and my css is in the public folder.
This is happening because your layout is including the CSS. Try instead making a layout that just has the code to include your css and nothing else. Like so:
/* Using handlebars templateing for this example */
<link rel="stylesheet" type="text/css" href="styles.css" />
{{{ body }}}
This will just include the css and then display your content.
<link rel="stylesheet" type="text/css" href="styles.css" /> is the code to include your css
{{{ body }}} is the code to include your content.
However it is not possible to include css without a layout unless it is in your content.
So if you want to use {layout: false} the css inclusion code(<link rel="stylesheet" type="text/css" href="styles.css" />) has to be in your content
Related
I have CSS order like this:
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style1.css">
What I want to achieve is order like this:
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
The ideal would be if this can be done when page loads.
I don't see why you need to have to do it with JavaScript, but here's the answer:
$("LINK[rel='stylesheet']")
you can use this jquery code in order to get the all the link tags for stylesheets. Using array manipulation, you could change the order. More info about this specific snippet here
then once you are ready, you could loop over the code. More info about this from here
$('head').append('<link rel="stylesheet" type="text/css" href="lightbox_stylesheet.css">');
obviously, change what you are appending.
I am very new to using templates. My CSS is not working if I put my html in another folder.
I have realised the css was being applied through JavaScript which I am also new too. I have guided the link for css/js the correct folders and files but it still wont work.
The relevant files are /Linear/index.html and /Linear/builds/index.html(where the error is) and the js and css folders
https://www.dropbox.com/s/cmmdybvbhvff0w4/Linear.zip?dl=0
In your template used skel.js and the style base path defined into it. So if you want your other html file that exist in other child folder work well, you must change the skel.js file.
Also in your index.html file used "noscript" tags. Its mean is if your browser dose not support JavaScript then load the css file, So if you remove this tags it works well like file that exist in root Folder.
<script type="text/javascript" src="../js/skel.min.js"></script>
<script type="text/javascript" src="../js/skel-panels.min.js"></script>
<script type="text/javascript" src="../js/init.js"></script>
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
</head>
Removing the noscript tag around the css link will solve this;
So, instead of
<noscript>
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
</noscript>
You have;
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
You can download the modified version here
https://www.dropbox.com/s/lewnpt0iy980i53/Linear-Modified.zip?dl=0
I'm using Kickstrap to theme my bootstrap app and my client wants users to be able to change themes on the fly. I know that to change the theme, all you have to do is change the directory in the themes.less file but I don't know the best way to go about this. Also, I want to remember a user's theme preference so I need to store a cookie to do this, but I'm not entirely sure if it's possible to read cookies straight into LESS as variables.
Basically, I just want a dropdown menu that allows users to select a theme from a list.
Any suggestions would be great! Thanks!
Assuming you're just using plain HTML/CSS/JavaScript and not a server-side framework, there are a few ways to do this. One involves actually modifying the LESS source code but let me offer some simpler ways:
I would try keeping theme.less blank, so it will just show a default Bootstrap theme.
then you can load your Kickstrap theme on a separate line like this:
<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="mytheme.less" />
<script src="less.js"></script>
Two theme files
Of course, your theme might have two files, like variable.less and bootswatch.less which may not work keeping them separate:
<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="variables.less" />
<link rel="stylesheet/less" type="text/css" href="bootswatch.less" />
<script src="less.js"></script>
So instead, you can just #import the variables.less file into bootswatch.less.
#import "variables.less";
And then use the original example from above.
<link rel="stylesheet/less" type="text/css" href="kickstrap.less" />
<link rel="stylesheet/less" type="text/css" href="bootswatch.less" />
<script src="less.js"></script>
By the way, if you're not using LESS client-side, no worries. Just use the compiled CSS files for each instead.
<link rel="stylesheet/less" type="text/css" href="css/kickstrap.css" />
<link rel="stylesheet/less" type="text/css" href="css/bootswatch.css" />
Writing to the DOM
As far as changing this in the DOM, I would try taking advantage of the cssIfy() function already in kickstrap.js. This will take a string (the .css filename) and write it as a stylesheet to the DOM. If you need to write it as a .less file, you can probably just manipulate this function easily. Maybe something like this:
function lessIfy(filePath) {
var linkElement = document.createElement("link");
linkElement.setAttribute("rel", "stylesheet/less");
linkElement.setAttribute("type", "text/css");
linkElement.setAttribute("href", filePath);
document.getElementsByTagName('body')[0].appendChild(linkElement);
}
If you do it this way, you'll need to make sure less.js loads afterwards, so try either appending it before that or (worse) loading less.js again after that.
Take a look at how the "Included Themes" option changes the themes as you select them.
I have a page where there is a lot of text, probably 15 pages, I wan't to be able to add a header at the begining of every page when the user prints the document.
Is this possible with CSS or JavaScript/jQuery????
You can use classic CSS by targeting media using media attribute.
Example:
<link rel="stylesheet" type="text/css" media="all" href="all.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Add your <header></header> in your page, position it with CSS, if you don't want it to be included in a browser do:
header {
display: none;
}
in your all.css
And in your print.css:
header {
display: block;
}
Print layouts change depending on the browser, default fonts installed, and any other custom settings used. How would you know where the page divisions are?
Your best bet may be to produce a PDF of your documentation.
I am trying to load my print.css but it does not seem to be loading. it work Fine in FF and Safari but the problem is only in IE.
I have the regular external css for the page inbetween the head tags
And when the user click on the print link . it loads the print css .
<div class="linkPrint">
<a target="_blank" href="?format=print">Print</a>
</div>
var format = getUrlParam('format');
if (format == 'print') {
$('head').append('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');
}
But,in IE it load the standard css instead of the print.css.
How do can this be fixed for IE6?
Thanks
You can have the print CSS and your screen CSS both loaded at the same time on the page without them interfering with each other - you need to specify the media attribute on the link tag:
<link href="/theme/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="/theme/screen.css" rel="stylesheet" type="text/css" media="screen" />
No need to go through the javascript trickery.
As for IE6 - it does support this, as can be seen on the comparison list on this page.
Try removing the <link> to the other css file when you append the print.css
try with document.write,
document.write('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');