Hot answers tagged

10

You can, just by naming the file with a .css extension, and then accessing it just like any other template in there. For example, you could have the file craft/templates/styles/styles.css, and that would be accessible from http://example.com/styles/styles.css. Craft will even serve it with a text/css Content-Type header. However, this is only a good idea in ...


10

In most cases, the best place to store CSS is in a publicly accessible directly, not managed by Craft at all. Such as: public/assets/css/master.css Storing your CSS and other front-end assets outside of Craft reduces the overhead of accessing those files. While Craft allows you to store css files in your Craft templates folder, there is additional overhead ...


7

There are several plugins that can do this. With my plugin Stamp, you can add a timestamp to the filename or path in the following formats: <script src="/assets/build/js/1399647655/scripts.js"></script> <script src="/assets/build/js/scripts.1399647655.js"></script> <script src="/assets/build/js/scripts.js?ts=1399647655"></...


7

Set up a local development environment, and invest in a workflow as described here: Database & Asset Syncing Between Environments in Craft CMS


6

This is what I currently do to add a class Bibliography to all generated <ul> tags from my articleBibliography field. Because there's never other content in this field, I'm save to replace them all. {{ entry.articleBibliography|markdown|replace({'<ul>': '<ul class="Bibliography">'})|raw }} -- Update: You can also use the awesome Retcon ...


6

As a more detailed answer than in my comments. You should never make such huge changes in a running live system without deactivating it. No matter how experienced you are with twig, craft, php... you can easily make mistakes and you do not want users/customers to see them because they may not return to your page. There are many reasons why it is necessary to ...


5

This question is really more about S3 than about Craft. What you need for the assets is not the file path, but the url. And yes, S3 assets do have a url. This page describes the format for the host: <bucket-name>.s3-website-<AWS-region>.amazonaws.com They give these examples: This URL requests the photo.jpg object, which is stored at the ...


5

In general, Craft doesn't normally come into the equation when we're talking about general frontend assets. Things like minification, preprocessing of SASS/LESS/Coffescript/WHATEVER, image compression (asset images, not content images) etc. should preferably be handled by a tool like Grunt or Gulp (my favorite). Even when it comes to CSS/JS for your ...


5

I sincerely appreciate the responses! I've since resolved this issue, below is the changed code. My controller was extending the Craft web controller (\craft\web\Controller) which has its own renderTemplate() method that I switched to, which fetches the Control Panel assets I wanted for styling the page. The template twig file remains identical as is above. ...


4

You can simply add it inline to your body tag like so: <body style="background-image: url({{ myGlobal.myAssetsField.first().url }})"> If you want to only use it with selected templates, you'd better use Craft's includeCss tag: {% set bodyCss %} .myBodyClass { background-image: url({{ myGlobal.myAssetsField.first().url }}); } {% ...


4

I tend to use a config.php variable (called assetVersion) for the production site, and just generate a random value for the dev site using Twig's random function. Looks like this: <link rel="stylesheet" href="/assets/css/style-min.css{{ craft.config.devMode ? '?v=' ~ random() : '?v=' ~ craft.config.assetVersion }}">


4

Here is my eye-friendly code: /* Redactor|Fonts */ [class^="redactor-"], [id^="redactor-"] { font-family: inherit !important; } /* Redactor|Toolbar */ ul.redactor-toolbar a { padding: 12px 13px !important; height: auto !important; } div.redactor-dropdown, ul.redactor-dropdown { font-size: 13px !important; } a.redactor-dropdown-h3 { font-...


3

I'm guessing that the path is not accurate. If you're 100% sure that the path is correct, then check your file permissions. Small chance the permissions are locked down too tight.


3

You can include CSS for your plugin one of two ways. 1) Inline CSS You can include CSS snippets by using {% includeCss myCss %}. This is great if you are just wanting to include a few lines of CSS. Read more here: http://buildwithcraft.com/docs/templating/includecss 2) Reference a Resource CSS file Usually contained in your /resources folder inside your ...


3

You will want to include the siteUrl variable before the file path to normalize all the resource URLs. That will also help when you move to production. For example: {% includeCssFile siteUrl~'assets/html/css/slidestyle.css' %} In your general config file, you can set different site URLs based on the server you are on. return array( '*' => array(), ...


3

I have never used it, but there is a method craft.request.isMobileBrowser(). {% if not craft.request.isMobileBrowser() %} <td>non-mobile browser column</td> {% endif %} or even better, you could give that column a class, and then include a mobile css file to layout the table for mobile: {% if not craft.request.isMobileBrowser() %} {% ...


3

Unlike some other CMS systems, Craft doesn't specify what your front-end templates should look like in any way (you could output your content as .txt files if you wanted to). It also doesn't add anything to your rendered page output that you didn't specify (with the exception of error info if 'devMode' is set to true). The default templates are really just ...


3

You can use the {% includeCssFile %}, you just need to make sure and wrap all of the styles in the print stylesheet with @media only print { } or @media print { } @media only print { nav { display:none; } p { color:#000000; } .etc { } }


3

I would use the slugify twig filter: {{ block.contactLinkName | slugify }} It will handle apostrophies, spaces, and anything else that might come along.


3

A single line in my gitignore file, CSS was preventing the Admin CSS from deploying to the live server. While this problem isn't specific to Craft, I'm leaving it here in case others encounter the issue. That line only prevented folders named CSS from deploying, which is why the public site CSS deployed without a problem, making the problem less obvious.


3

Whenever Craft receives an URL request, it tries to figure out what resource to serve the client. Among other things, it'll look inside your templates folder and try to find the requested resource there – which is why a request to styles/index.css works if that file exists inside your templates folder. However, Craft only looks at files in your templates ...


3

So to close the loop on this one, I actually ended up using a different grunt tool that essentially accomplishes the same goal called purifycss. I was able to target purifycss at the craft template folder, get it to look at bootstrap css selectors actually in use in the templates, compare it to the full bootstrap css files, and then have it output only the ...


3

You can register your file with Twig at the place you need it {% do craft.app.getView().registerCssFile(alias('@assetUrl') ~ '/path/to/css') %}


3

You can check a specific URL segment. For example if you need to load some CSS on the About page and that URL is yoursite.com/about you can do this: {% if craft.app.request.segments|first == 'about' %} {# Load CSS #} {% endif %} You could also check by entry.id {% if entry is defined and entry.id == '123' %} {# Load CSS #} {% endif %} Replace "...


3

There is a function called alias that returns a defined alias. A default alias is @web and it represents your base url, background-image: {{ alias('@web') }}/path/to/image.jpg; Would display the file image.jpg in web/path/to/


2

You could put the class on the parent element, and then target .Bibliography > ul in your css.


2

You can chain filters to achieve what you want. The example for the twig replace filter in the Craft docs shows this in action. So you could replace: {{ block.contactLinkName | lower }} with: {{ block.contactLinkName | lower | replace('/ /', '-') | replace("'","") }}


2

Generally, I'll have a div that picks up on the position's value. For example: <div class="image-{{ entry.myPositionHandle }}"> <img src="my-image.jpg"> </div> That renders something like: <div class="image-left"> <img src="my-image.jpg"> </div> Then I'll have a css rule like this: .image-left img { ...


2

Easiest way I can think of is just to use some math. If your grid columns need to add to 12, keep a current column count while iterating over the matrix blocks. I'd imagine you'd want your content blocks have some sort of built-in "column" width to begin with... a text content block might be 8 columns and an image would be 4. Or 6 and 6. If the current ...


2

Is your css file located in the /resources/ folder of your plugin? So your path should be something like: <plugin folder>/resources/css/sitemaphtml.css I've tried it myself and whilst you do get the /cpresources/ part of the Url in your markup, the CSS file is loaded on the front end. EDIT: If you take a look in the docs, it says the following: ...


Only top voted, non community-wiki answers of a minimum length are eligible