CodeIgniter CSS files - css

I have a designer who makes the design for me and I want to start with CodeIgniter.
But the problem is to place the CSS and images file. I can put them in the root of the application but it is not supported in IDE (DW).
What I mean is the path is not working in DW to show CSS styling in live view and my designer can't make change without seeing styling.
I would also like to enable the intellisense feature on DW if possible.
Any help will be helful. Thanks.

You shouldn't rely on DW. The quickest thing you can do is to render him a HTML page which he can open and edit and DW, and then just copy the CSS changes to your CI project.

I always save CSS files in the root directory. That way, I can quickly access them using the shortest of paths inside CI's URL helper functions.
Such as...
echo site_url('css/style.css');

Related

Stop caching in Django

I am using Django with Bootstrap 4 in project with my own custom css for design.
Every time when I make new design change in css file I have to clear my browser cache and reload the page to view changes or if I rename the custom css file then my design changes are visible.
Is there any way I can disable caching just for development and I can enable while it is in live environment. I am new to this and Django is huge. Please share what is best practice to do this.
Append ?n={{random_number}} in your template to the css path.
You can write a custom template tag to get a random number like this

How to alter CSS files inside aikau-1.0.101.10.jar in Alfresco

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

How to check CSS loaded size in Angular Application

Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.

PyCharm: How to disable certain CSS file code complete?

Django REST framework uses Bootstrap and has its own CSS files in it. It seems like PyCharm imports those files for code completion popups. The things is, I don't want those as I use different CSS framework and in fact, it's confusing me because all those Bootstrap autocomplete popups when I'm trying to set CSS classes and so on.
So my question is, is there any way I can disable code completion popups from certain CSS files?
I did not face with this problem until now,but I think you should disable these folders is Pycharm, try this :
Settings|Directories -> Use Exclude button on folder

Do I have to use Compass to modify CSS with Django-Grappelli?

I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)

Resources