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.
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.
There are two stylesheets for Wordpress theme - Trending:
style.dev.css (30kB) uncompressed ( „dev” means it’s for development).
style.css (23kB) compressed.
Doesn’t matter which file I change in many variations and upload through FTP it doesn’t work! That means layout takes no changes. Edited CSS, uploaded to the server but no change is taken.
Tried out many ways –
1.edited „style.dev.css”, loaded it to the server (don’t work), then renamed to „style.css” (still don’t work).
2.after editing „style.dev.css” compressed it and then loaded to the server (don’t work), then renamed to „style.css” (still don’t work).
when both are on server, server chooses the dev version „style.dev.css”, when I delete it, server jumps to „style.css”.
tried to edit one of them and then send to server (there is still no chage in layout).
Please someone give me a hint where the problem could be?
I have no idea where the problem could be, searched for a solution like for 2 days already.
Link to my site on which I'm working
At the moment your site is pointing to
<link rel="stylesheet" href="http://cfs-gometzlaville.fr/cfs/wp-content/themes/trending/style.css" type="text/css" media="all"> for its style, to replace the stylesheet you will need to rename the updated / modifed sheet AFTER you have named the orignal style.css to something like style_orig.css and then change the name of the updated / modifed file to style.css. Once you have done that you will need to reset the cache from any caching plugins that you use. If this still doesn't work clear your browser cache.
EDIT
If i change the style.css in the websites HTML to style.dev.css changes are made.
As an alternative maybe you should look at Child Theme's here as this will be much more manageable for you. All you will have to do is follow the instructions on the link and then copy and paste the css from your dev.css into the child themes css and it will override the parent styles.
The website is currently referencing style.dev.css, which doesn't exist. It could be a problem with some caching plugin.
Read this page
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.