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.
Related
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 know my question is similar to: Bootstrap popup does not appear when include bootstrap.min.css
However it was not resolved and I am practically having the same issue (minus the JS).
I am currently designing my Bootstrap website using Pinegrow, everything looks fine in the software however I realized when I actually preview or upload the code to a browser parts of the website is being overridden, I just found out it's because of the bootstrap.min.css file.
The strange thing is my 'home', 'about me' pages are fine, however when it gets to 'skills', 'portfolio' etc pages the css from my custom file is overridden.
For example:
This is what my software shows
Preview from Pinegrow
And this is what happens when it is in a browser:
Preview from Browser
Things I have done
Some people suggested just deleting the .min file, however doing that mucks up the website.
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css"> The custom css file is placed at the bottom in the html (someone said it provides priority to the custom file)
Using the !important rule doesn't work and I don't think it's the right to use it
I am using ID selections in CSS
Is the only solution to go into the .min file and edit the code from there? Is there a way to get my custom CSS code to override the .min instead? Would it help if i posted some of my code? Many thanks for your time.
I would have done so:
If a few page works, my opinion, problem in markup. If you don't use one header section for all pages, try to copy content from skills to about, then I would check the wrapper, and deeper structure first. Do you see any strange rules in development tools on skills page? (I'm learning, and I can only give you simple tips.)
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 use Less with my site. Let say the code look like below.
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
</head>
<body>
...
</body>
</html>
When I updated the styles.less file, and refresh the page, Less.js will compile the less file and apply to the page. But I just wonder where is the compiled CSS file stored? Does less.js call lessc to compile the less file?
In the setup you gave (the HTML page), you are letting the client to worry about interpreting the Less file.
To be exact, Browser loads the JavaScript library you link to, and then this JavaScript interprets the styles.less file.
The actual css file is not stored on the server, as it is all the browser-sided work, and I doubt the browser stores it somewhere except RAM.
This does not sound like a good approach though. We, generous site owners with high-end servers love to lift the computational bit off the clients as much as possible. We do not want to upset an iPhone user running low on battery without neccessity.
Alternatively, you run lessc styles.less > styles.css on your styles file after you finished editting. And then use styles.css in HTML directly, also remove the less.js from HTML.
Question you might want to ask: How do I make compiling to css automatic then?
There are several solutions:
Automate the compilation of less file on it being changed, using some software to watch a file or directory.
The Editor you are using might have compile less feature, or be added as an extension.
You might want to consider strat using a web framework. It is an overkill for just compiling less, but if you get other advnatages from web framework or are already using it - that is a good option. An example of using Less middleware with Express framework.
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.