Rails: prevent a css file from being added to asset pipeline - css

We're accessing a 3rd-party iFrame (dialog) in our web app. This is loaded by javascript and served via the 3rd-party's server. If we provide them with a link to a custom CSS file we can change the appearance of the dialog.
How, in the Rails pipeline, can we create this file and then provide the 3rd-party with a URL that will, hopefully, respect (read: use) our CDN?
Does the file belong in vendor/assets/stylesheets/? I'm pretty sure that becomes part of asset pipeline as well...
Thoughts?

Related

Custom Domain not loading CSS (Azure)

The custom domain I've been using (which is already linked to an App Service in Microsoft Azure Portal) is not loading the my current styles files (.css files). Actually, it's loading older versions of those files, which I didn't create (they've had been created previously by another employee).
Has someone experienced this same issue? If I go to the website created by the App Service, the .CSS loaded there is correct (the one I've created), but whenever I go to the custom domain linked with this website, the .CSS loaded is older.
Clearing the browser cache will work locally. However, other repeat visitors will have the same issue you are having. A global method would be to rename your CSS file. That will force the browser for repeat visitor's to load the new/ current CSS file.
ex. "style.css" --> "styles.css"
Rename the CSS file and don't forget to rename the meta link as well.
Try clearing browser cache memory. CSS files are often get cached in the browsers.

In sitecore, where can I add my own custom CSS?

Our sitecore developer quit suddenly and I need to make a small change. I'm a front end developer and have no real experience with the sitecore backend. I just need to add some CSS styles to the main style.css file or I need to add my own file. I've got full access to the CMS, but no access to the hosting account. I'm trying to find the main CSS file through the CMS browser, but I'm not having any luck.
Can you help me either:
A) Locate the main CSS file so I can add some classes (preferred)
B) Add my own link in the tag to my own CSS file hosted on another domain
C) Use the home page link to CSS file where I can add some classes
A note about OPTION C... I'm in the CMS and I see there is a system folder and in that a CSS folder where I can add a custom.css file. Then I go to the home page and I can actually call that CSS file from a field in the home page BUT, when the site loads, even though it's calling this file, it comes over as .aspx and it's blank so no styles I set are applied.
you can find the location of file as suggested by Maciej or use firebug or any other developer tools to find the location of main style.css. Once you get the location you can browser the physical file on server by going to Sitecore start menu -> All Application ->File explorer . Download file using File explorer make your changes and upload it back, make sure you check override existing file when you upload. Also make sure you upload file to delivery server once you test your changes, typically you will be accessing Sitecore using Authoring Server so instance you are accessing might not be same as CD server.
You could right-click in your browser to figure out where your css is coming from relative to the server root. Although not completely fool-proof, this method may give you a quick answer.
According to documentation for sitecore 6.2, style sheet location is determined by the developer so it could be anywhere that the developer has chosen.
Take a look at this answer for more details.
You should also be wary of how code gets built and deployed. Most Sitecore developers have very specific methodologies for how they include code (including front end) in their solutions.
Make sure you're aware of any deployment methodologies your developer used, so that your work doesn't get overwritten in a future deployment.
Did they use a source control management solution (like Git or TFS)? Did they use an automated tool to do deployments (like Octopus Deploy)?
If you can find main CSS file in physical location, you can update the file with new CSS styles.
If you want to add your own CSS as an additional CSS style, you might need to create a new template for css link and use that template when you create new page with your own CSS.
Just for future reference, by default the location of the used css files is described in Sitecore.config like this:
<!-- WEB SITE STYLESHEET
CSS file for HTML content of Sitecore database.
The file pointed to by WebStylesheet setting is automatically included in Html and Rich Text fields.
By using it, you can make the content of HTML fields look the same as the actual Web Site
-->
<setting name="WebStylesheet" value="/default.css"/>
Paths are relative to the root of your sitecore installation, you can find default.css in the root of the sitecore application on the webserver.
In Chrome Browser, Inspect element and select source tab
and open required css file and make changes.

CSS/JS bundle in single file in mvc when publish with release option

I have created MVC application. When I publish the application on Azure with release option, all css and js file load in a single bundle in page. (Open view source of page then displays a single link for css).
When I publish a site with Debug option in publish profile then all CSS load individual.
My problem is when publish site with release option theme not load correctly, but with debug option theme loads correctly. I want to publish my application with Release option only. If anyone face this issue before and get any solution then please help me.
I have experienced this before when using bundling.
Say for instance your css file is located at: /Content/css/css.css
This css file then makes a reference to another file, or for example an image at /Content/images/image1.png via url('../images/image1.png').
You then set up your css bundle # /bundles/css.
All appears great in debug mode. However, when you set <compilation debug="false" .... in your web.config, suddenly the references made in the css file breaks. If you open your console in Firebug/Chrome dev tools and check the network tabs, you'll see resources failing to load, from an incorrect URL.
This happens because when debug mode is off, all the files are bundled and minified like they would be in production. In this case, the CSS file would be bundled and served from the URL /bundles/css. This results in the relative URL reference breaking. Where it once referenced /Content/images/image1.png, it now references /images/image1.png.
You have a few options to solve this:
Serve your bundled css files from the same folder as the actual css files. eg. /Content/css/cssbundle. This can become very tedious quickly.
Change all relative references in your css files to absolute references. eg. ../images/image1.png would become /Content/images/image1.png. This does mean you can't use a lot third party CSS bundled out of the box, you would have to check/change relative references if you wanted to bundle them.
Use the BundleTransformer nuget package. It automatically transforms relative urls to absolute ones during the bundling process.
The main differences of StyleTransformer and ScriptTransformer classes from a standard implementations: ability to exclude unnecessary assets when adding assets from a directory, does not produce the re-minification of pre-minified assets, support automatic transformation of relative paths to absolute in CSS-code (by using UrlRewritingCssPostProcessor), etc.
I personally recommend 3 as it is the easiest to maintain long term.

Retrieve embedded static resources (css/img/etc) using Virtual Path Provider instead of GetWebResourceUrl

I have an asp.net 4.0 webforms website with a CSS stylesheet which I've embedded into a separate assembly.
If I load the css using ClientScript.GetWebResourceUrl it loads, but does it with that /WebResource.axd?whateverlongstringofstuff
I was hoping that I could use a Virtual Path provider so that i can simply reference it by linking to say ~/Custom/my.css
where ~/Custom/* would go through the VPP and serve it from the embedded resource.
the reason I was doing this is I want users to be able to easily override my css by adding the actual css file in that location so it serves that one instead.
However, no matter what I try, I get a 404 on that resource url, even though in my custom ResourceResolver, the fileExists resolves to true (because it does find it in the resources assembly).
So I suspect this is because IIS is configured to serve static files (css, jpg, png, etc) directly, bypassing anything I could add to the pipeline, and the only way around this would be to have my users change their web.config or IIS settings.
Is this true? because if it is I'll abandon this and go back to the WebResource.axd, but it would really be nice if this could be done

How to pre-complie css style sheets in rails 2.3?

I have developed a new requirement for my client, I had added some css rule to an existing style-sheet file and these changes were reflecting on my local machine during development. But when I moved the changes to an staging server and restarted nginx all my functionalites are working but my css rules are not getting applied, when I checked the firebug console that particular file is getting included but my new css rules are not in there, should I pre-compile my css style-sheets if so how to do it in rails 2.3.x ...?
Thanks in advance.
Rails 2.3 does not have asset pipeline. So there is no need to precompile assets. Your assets should already be located in the Rails.root/public/stylesheets folder
Anything in Rails.root/public/ folder is served by the web server directly and it does not involve rails.
Your problem is most likely some sort of caching. You can try fetching the stylesheet directly using its URL like this
http://server.domain/stylesheets/mystyles.css
and see if your changes are reflected.
You can also check your Firebug -> Net tab to see if the style sheet is being downloaded from the server (http return code: 200 OK) or it is being picked up from the cache (http return code: 304 Not Modified)
There are ways to handle this type of issues, which rails 3.1 asset pipeline incorporates.
Using a different file name when content changes
Using the ETag header
Appending a unique hash (calculated using timestamp of the file) as a query string. For example http://domain/style.css?djfhsfhkkjdsfh where djfhsfhkkjdsfh will change every time style.css is modified.
are couple of commonly used tricks.
If you are keen on using asset pipeline with rails 2.3 you have options such as Jammit

Resources