Newbie question as stated above. How do I access the public folder of laravel in .css file? I have a custom css and I want to get the url of the image.
You can not use the asset() or public_path() functions there, they will not get called from a css file but you can use the traditional way to access file like this
../css/want_to_import.css
This is the only way you can access a file in a css file, unless you're writting your css dynamically then possibilities are different.
If your domain points to your public folder, you can reference it using /
Let's imagine you want to display a JPG file as a background image.
public/image/background.jpg
In your CSS, you can use background-image:url('/images/background.jpg')
Related
Using Webpacker I can load css files and they get output in the stylesheet pack files, but sometimes I'd like to access the CSS in these files from within javascript for use say in a WYSIWYG editor's config (specifying some extra styles for the IFRAME). The other option is to be able to access the public path of a css file loaded in like so:
import froala_style from '../../../css/froala.css'
My suspicion is that it's to do with the css loader that comes with Webpacker. Its job is to load the css and compile it out to a seperate file. I think that one can't have two css loaders at the same time? Could the answer be to apply filters to a custom loader so that it takes effect on only the file I'm wanting to load in as text or the path?
One can override the existing loaders for a particular import like so:
import froala_style from '!css-loader!../../../css/froala.css'
Prepending the ! overrides existing loaders allowing us to specify our own. In this example one can call froala_style.toString() to receive the contents of the CSS file.
For reference: https://webpack.js.org/concepts/loaders/#inline
I was working on translating Alfresco share to Arabic i.e to RTL format.
Reading a comment from here I found out that the best way to proceed is to Create a custom extension pulling in an additional CSS file with the styling modifications.
Now coming to the question, I've encountered a problem while altering the css files to support RTL. The problem was that some css files were situated inside aikau-1.0.101.10.jar file. Can anyone help me on how to alter these css files ? or Can I override these files somehow ?
Some ways to do this:
You can create your own theme
Override LESS variable link
Fork Aikau and build your own jar link
Create an extension to include your own css file link
I'm trying to refactor a nodeJs project and my css is in my .ejs file. I need to put some dynamic data in my css file. I need to have dynamic data in my css, when my css is in my EJS file it's good.
But when I put my css into an external file, nothing happens!
So, how can I inject ejs tag in my external stylesheet file?
This is one of the questions to which one has to ask you - why do you want to do that? You are asking about a solution to a problem that you didn't describe.
By suspicion is that you are trying to use a templating system for something that could be done with a CSS preprocessor like Sass or Less. Particularly Less can be easily used on both the client side and server side. See http://lesscss.org/#client-side-usage
Now, if you really want to use a templating system created for HTML to generate CSS then you will have to take few things into account: You need to store your CSS templates somewhere where your HTML templates are stored, not where you store your static assets like images. Then, your server will have to serve your generated CSS with a correct MIME type. Then, your HTML will have to reference the styles using a URL to your generated CSS that will be generated on every request instead of being served directly from disk.
Can't style my menu css,i tried to change in master-ccda(my site www.blobus.on.kg)It helps for 5 minutes than changed back.Please help me to find place where i can change it.
You use a rocketheme/gantry template. Your website has compression/caching enabled for the css. This is enabled either by the template settings or another compression/caching system plugin. Therefore what you get as a final css file, is a dynamically generated compressed css file. Any edits you are doing on this file are getting lost, as soon as the system will generate a new final master.css file.
You need to disable these functions while you are building your website. Doing so will stop the compression of all the css files into one and you will see what rules and from which files your menu and other elements/sections of your website inherit their styles.
In addition keep in mind that it is best to avoid making changes on the core files of your template/extensions.
Gantry templates allow you to create a custom css file where you can put your own css overrides.
The custom css file need to be place inside the css folder of your template and usually needs to have a name of this convention: rt_templatename-custom.css.
as you all know, ASP.NET includes each CSS stylesheet in the App_Themes's Theme folder inside the page. No discussion.
But now, I'm facing a little problem having lots of CSS files in a theme and willing to use a static content domain. I would like to load all the static content of my website from the static domain (not only CSS, but also icons, images, etc.), but let's now pay attention only to CSS.
My question is
Is it possible to override the behaviour of Page class, and for each CSS file found in Theme's folder, rewrite the <link> tag with the correct URL of the static content domain? I have nothing preventing me to deploy files into http://static.domain.com/App_Themes/Theme path, so at least adding a prefix to the tag is fine.
Thank you in advance.
Yes, you can. You can have a custom base page class write the CSS files it finds in the folder. Though, I'm not sure you can override the default behavior of the themes feature, so the easiest way is to move the CSS files outside of the default themes. Then, you can use the System.IO objects to read the directory, access the file, and generate the link.
HTH.
An alternate method is to write an http module. Have the module inspect the html being sent back to the client.
If it detects a style sheet reference, change the location that the style sheet is pulling from.
This works for the other items as well, such as images etc.