I am trying to make my first Sinatra + Mustache site but I am having issues including css files for my mustache templates to use. Including them like a normal css file won't work and neither will putting them in a /public/css/mystyle.css format.
Does anyone know how to do this properly?
thanks
I'm not sure that I'm understanding your question properly, but if your css file is in public/css/mystyle.css you should include it with
<link rel="stylesheet" type="text/css" href="/css/mystyle.css">
There are several reasons I can think of, for it not to happen. You have:
omitted leading /
reconfigured public_folder like this: set :public_folder, "path to other folder"
changed root folder, so now your public folder is new_root/public
set up some paths in your configure.ru file
Related
I downloaded the minified version of bootstrap and put it in the root directory of my project. Then in a HTML file in /views/ I added:
<link rel="stylesheet" href="/bootstrap.min.css">
However, the page continued to look the same because Bootstrap styles weren't added. I know I can use a CDN, I did and it worked, but for now I want to try including it locally. I tried to similarly include Semantic-UI but it didn't work too. What am I doing wrong?
I think I figured it out. Assuming that you have your stylesheet in /public then you have to add this line to your application file (usually app.js):
app.use(express.static(path.join(__dirname, 'public')));
From now on you can link to your stylesheets from anywhere in the project using this code:
<link rel="stylesheet" href="/bootstrap.min.css">
Note that we no longer have to specify the full path, which is "/public/bootstrap.min.css" - we omit the "/public" (in fact href="/public/bootstrap.min.css" would be an error).
If anybody reading this can explain why the first line is necessary please comment below. I believe I understand what it does but why the Express creators insisted on doing it that way i.e. why can't I <link> to my local files normally is what I don't get.
Disclaimer: This is my first ever website project, in order to learn about html, css etc. I probably need a 'for idiots' guide'
I have a jekyll/github pages site here. I have read the jekyll documentation here, which suggests all you need to do is stick the liquid tag in. Which I have, for example here.
Further research has pointed out I need to set up my config file, like this which I have here. I also have a .css I copied from a site called sciviews which is here and I've made a link into the .css to call it here.
However, my page still displays in black on white in code blocks. What have I missed?
EDIT: I believe I've made another error, the source of my syntac .css was (i think) here. Is .scss maybe not compatible with this process as I've implemented it?
In your html ( inside the head tag ), you are referencing an incorrect path to "syntax.css"
Change:
<link rel="stylesheet" href="/css/syntax.css" type="text/css">
To:
<link rel="stylesheet" href="/Pokemon_FieldStudies/css/syntax.css" type="text/css">
Edit
Following your edit, it seems the code inside syntax.css is a raw scss file. Such files need to be processed before they could be served to the client.
I suggest you read about SCSS and how to compile it ( A simple google search will yield more than enough tutorials ).
In case you're interested in a shortcut, you can use an online compiler such as http://www.sassmeister.com/ but that will require you to define a value for some of the missing variables defined in the scss file.
I wanted to post out to the community in an effort to try and pin down a recent issue I've been having in regards to pulling in custom fonts.
When I initially set up my site to try and import a custom font, I followed the guide here (http://www.concrete5.org/documentation/how-tos/designers/how-to-add-a-custom-font-face-to-your-theme/) and thankfully I was able to pull in my fonts.css file that I needed.
Unfortunately, just recently I went ahead and made some customizations to the theme I was using (Under Page Settings > Design). After I had saved those changes however, I noticed that my fonts we're no longer being referenced and I was getting 404 errors when trying to pull that fonts.css file.
Now in my header file, I was referencing the fonts.css file relatively which worked until I made the customizations to the theme. Now it seems as though it's changed the 'location/directory' of where these pages, or at least the header file is. The differences in what I've put into the header file, and what's being appended are below.
Before:
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('../fonts/raleway/fonts.css')?>" />
Now:
<link rel="stylesheet" type="text/css" href="/index.php/ccm/system/css/page/157/../fonts/raleway/fonts.css" />
In particular, I'm noticing that
/index.php/ccm/system/css/page/157/
is now being appended, which is obviously causing the reference to fail. My question is, is there any way that I can reset concrete5 so that I will stop appending this reference, or a way to set a direct path (which is /application/files/cache/css/fonts/raleway/fonts.css) in my header file?
As for other information, I do have Pretty URL's enabled all appropriately (as far as I can tell). And I've set the location of all my pages within their own page, rather than all being built from the index.php page.
If there's anything you guys might need from me, just feel free to let me know. Again, if there's any way that I can get this resolved, I'd greatly appreciate it!
Despite its name, getStylesheet in concrete 5.7 and greater only works with LESS files, not .css files. It's also not set up to handle ".." in the path of files. If you pass a .css file to getStylesheet it will run the file through the LESS parser, which may double-encode things. You might not notice any problems with this, but it's best to avoid it altogether if possible.
Here's how I would add a custom font face to my theme.
First, make sure your theme's directory contains the "fonts/fonts.css" file with your custom font face directives in it.
Then, include the file this way in your theme:
<link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/fonts/fonts.css" />
This will only work if "fonts" the directory appears at the root level within your theme's directory – but it should be all you need to do.
I am new to LESS and I'm using less.js as to my development environment. The problem is, when I declare a variable, it doest not working like nothing happen.
#bground: #c0c9c8;
body{
background-color: #bground;
}
As you can see, the #bground does not pass it value. If I put direct value it will apear which is proof the .less is set up correctly. I'm using latest version of Chrome and running locally on Mac. Everything is working except variable. Without variables in work, I cannot use the LESS feature.
If you`re using apache, create an .htaccess file in your root folder, if you already have one, just add this line:
AddType text/css .less
This will tell apache to send the right content-type header for the .less file
Please make sure you loaded less js file in your page to accommodate less file.
use
<script src="//cdn.jsdelivr.net/npm/less" ></script>
for that.
Also while loading your less file use following syntax
<link rel="stylesheet/less" type="text/css" href="dist/css/<your less file>.less" />
make sure you use rel and type attributes on the tag, as mentioned.
I've even looked at CSS Crush, Minify, SmartOptimizer, CSSTidy and a slew of other PHP CSS compressors. But they all have one major flaw.
You can't use this:
<link rel="stylesheet" href="css/styles.css" type="text/css">
When using dreamweaver, this is the only way to see the DESIGN in DESIGN VIEW. If you replace that styles.css file with styles.php, it breaks, even if you HAVE css code in the file..
I am using minify for my JS and it is working beautifully, but if I use it with CSS, Dreamweaver gets scared and doesn't know how to render it. haha. Of course, it IS server side though.
Does anybody have a workaround for a situation like this? I do prefer to use dreamweaver because of the immediate changes that can be made in design view, as well as the FTP capabilities and code hinting, but even the new CS6 seems to whine when you use anything BUT a .css file.
I can't verify that this solution will work, but it should theoretically.
First, you'll want to add .css files as PHP, so you don't have to change the file extension. This is good practice regardless, since the file extension should indicate what content is being delivered. I don't know that there's any standard that states this outright, but it's good practice. If you're using Apache, you can add this to your .htaccess or global server configuration file:
AddHandler php5-script .css
Then, just <link rel="stylesheet" href="css/style.css" type="text/css" /> after renaming your file back to CSS. For more details on this, see the Apache docs on AddHandler.
Second, you'll want to 'comment out' your PHP code within your CSS. For example, you could do something like this at the top of style.css:
/*
<?php include 'your-file-compressor.php'
// Put any PHP code for compression here
?>
*/
That way, Dreamweaver will still read the actual CSS code, but PHP should be able to compress before delivering it to clients.
As Kishore pointed out, Minificaiton should be part of build process. While development you should use the raw css file.
Instead of href="css/styles.php" its better to use href="compresscss/path/css/styles.css". Here compresscss/path/css/styles.css is mapped to compresscss.php?path=css/style.css. This can be done by mod_rewrite in apache.
This way dreamweaver will see it as an css file and also you will compress it.