Theme editing clarification CSS Edits

[Terry - AKA Dumbledore]

It is being debated in other forums,but what is the official line on making CSS edits. Are all edits suppose be placed only in the custom.css file.

If so why is editing of other CSS files allowed? It is being stated that any CSS edits made will always be over written on code upgrade. This is in contradiction to what I have been advised.  What is the IPS proper procedure?

[Rikki]

We would strongly advise making all edits in custom.css, simply because it'll make your life easier in the long run - when we make updates to the core CSS files, you won't have any conflicts if you've left them as-is and only made changes to custom.css.

That said, we don't prevent editing the core CSS because it's conceivable that some admins in some situations will need to make a change (and we assume they understand the implications of doing so).

So a good rule of thumb: unless you absolutely can't avoid it, stay away from editing the core CSS files and instead work in custom CSS files

[Terry - AKA Dumbledore]

Then that is going to stop me from making themes any more as I have always edited core CSS files in manual mode. To make my themes.

[steve00]

Then that is going to stop me from making themes any more as I have always edited core CSS files in manual mode. To make my themes.

​Why does it stop you ... there is nothing stopping you doing it your way if you want ..... it is just by having custom.css it is easier in the long run ... believe me it is as been using custom.css from beginning and so much easier when upgrades are released

[Terry - AKA Dumbledore]

The placing all edits in custom, will now double my work, as I us firebug in ff to find the bit needing editing, searching the CSS files for it them making change. Using custom will now require me finding the bit copy, edit, then in whole placing the bit in custom. If there is no problem then fine,but there is the possible conflict of the two bits, original and custom. I understand this may not be an issue, but I am live by one rule, that if any thing can go wrong, it will.

[steve00]

The placing all edits in custom, will now double my work, as I us firebug in ff to find the bit needing editing, searching the CSS files for it then making change. Using custom will now require me finding the bit copy, edit, then in whole placing the bit in custom. If there is no problem then fine,but there is the possible conflict of the two bits, original and custom. I understand this may not be an issue, but I am live by one rule, that if any thing can go wrong, it will.

​In fact it will lessen your work ...

When you upgrade a skin ... you will not have to find all those css bits again as upgrading will not overwrite the custom.css file but all the other css files will get overwritten and your 'edits' would get overwritten and so have to do them all again

Pain to get used to but once tried and seen then trust me you will think a lifesaver

NOTE: obviously major upgrades (e.g. 4.0.0 to 4.1.0) may require starting again but from 4.0.0 to 4.0.1 should not unless IPS add or remove coding that makes your custom.css useless but that used to happen in 3.4.x and earlier versions

Am only referring to css not changes to template files

[Terry - AKA Dumbledore]

Steve for me it is a therapeutic activity. It is that time of life that I have to find things to keep me busy, but I also don't want to cause

the young sysops extra work by having to reinstall a theme on upgrade, just to give me something to do, or make a theme that is

majorly functional and I then only have to make changes once every couple of years. In this scenario I will become bored quickly.

This is the fact of live that I have always believed in the your are dammed if you do, and dammed if you don't. 

[The Jimmo]

I don't see how it would be more work? If anything it is less work as you are already looking for the element to on-page to do change the styling of. Now you don't have to go digging through CSS to find it in IPS' style sheets you just go to custom -> paste -> add your styling. If you want to separate, for editing purposes, your CSS into separate files you can create new files that get compiled into the custom.css file on import. Very easy and what I did, I separated everything by global, app, and profile.

IMO I am very, very happy IPS added this in. I just wish a CSS compiler like LESS or SASS could be added to render in ACP but that's just wishful thinking :laugh:

[Terry - AKA Dumbledore]

FP

 Can I assume you use the designer mode? If this is correct then yes that would be a viable way of working, but I work in manual mode only, I am not

as schooled as others in the ways of development. I picked IPS because it had a very simple skinning/theming system which produced good results,

but now with the innovations that are being added it is just like life, I.E. I was forced out of my career of 30 years because I was considered a dinosaur.

Granted I most likely am, but this is the only way I know to achieve my gold. As the old saying goes it's hard to teach old dogs new tricks.

[Detorkville]

Albus is simple. If you work for yourself you can change the entire framework. But when you add in the marketplace, the situation changes... I hope you get the idea.

You should ensure continuity for your customers.

[The Jimmo]

FP

 Can I assume you use the designer mode? If this is correct then yes that would be a viable way of working, but I work in manual mode only, I am not

as schooled as others in the ways of development. I picked IPS because it had a very simple skinning/theming system which produced good results,

but now with the innovations that are being added it is just like life, I.E. I was forced out of my career of 30 years because I was considered a dinosaur.

Granted I most likely am, but this is the only way I know to achieve my gold. As the old saying goes it's hard to teach old dogs new tricks.

Can still do the same in manual mode. IPS made both very flexible. Unfortunately, in technology things change like the wind. If you can't keep up, you get left behind or if you get too set in your ways that you can't adapt. The great thing about IPS is this has been implemented and is very flexible. It makes life so much easier and all you have to do is stop searching in the core files and use the custom file  . It's not like they are asking you to learn a new language  

[Mark Round]

The problem with only editing the custom css file only is this,if there is an !important declaration on an element you are changing then how do you get around that without editing the core? I havent looked fully but i notice that there are quite a lot of !important declarations throughout the new default theme so this would make things very troublesome.That said its alwayys advisable to clients not to upgrade there software if they wish to remain on a custom theme.We arent mind readers so occasionally we have to update our themes to keep up to date with the software changes this has always been the case.

[Terry - AKA Dumbledore]

The problem with only editing the custom css file only is this,if there is an !important declaration on an element you are changing then how do you get around that without editing the core? I haven't looked fully but i notice that there are quite a lot of !important declarations throughout the new default theme so this would make things very troublesome.That said its always advisable to clients not to upgrade there software if they wish to remain on a custom theme.We aren't mind readers so occasionally we have to update our themes to keep up to date with the software changes this has always been the case.

​That is my point.

[steve00]

have you tried adding !important to the same style in custom.css ?

[The Jimmo]

The problem with only editing the custom css file only is this,if there is an !important declaration on an element you are changing then how do you get around that without editing the core? I havent looked fully but i notice that there are quite a lot of !important declarations throughout the new default theme so this would make things very troublesome.That said its alwayys advisable to clients not to upgrade there software if they wish to remain on a custom theme.We arent mind readers so occasionally we have to update our themes to keep up to date with the software changes this has always been the case.

​Custom.css overwrites all so if you add !important to your element in custom.css you will overwrite it  I've done it plenty of times already.

[Mark Round]

Having to put !important in front of everything is not good practice.Also what about the template system,sometimes its necessary to add things in to templates is that all going to be overwritten as well?

[The Jimmo]

Having to put !important in front of everything is not good practice.

​I've only HAD to use !important a few times, only 8 in over a couple thousand lines.

[Terry - AKA Dumbledore]

There also an issue that I have found in the past. If you are looking for a style bit and edit it, but the edit is no applied, only to find out that there is a second

instance of the bit that is overriding the first. That is not the main course, but it still does happens, by either intention or just accident.

[The Jimmo]

There also an issue that I have found in the past. If you are looking for a style bit and edit it, but the edit is no applied, only to find out that there is a second

instance of the bit that is overriding the first. That is not the main course, but it still does happens, by either intention or just accident.

Custom.css overwrites all standard IPS CSS  but I would suggest using Chrome's developer tool as I found this the easiest to tell what is being overwritten or inherited (I haven't used Firebug is a while as I found it well, buggy).

[Terry - AKA Dumbledore]

For personal reasons I don't use Chrome.

[Detorkville]

So to clarify things for all.

Why use custom.css?

1. Is easy to mantain
2. Allows you to update to future release of IPS without breaking your custom.css 
3. You may need to modify your custom.css just for major updates like change the class.

That's why @Rikki we recommend using custom.css, and I also recommend.

 

 

[Woodsman]

I have tried the custom.css a few times and every time it blew up in my face. Obviously I am not doing something right, missing an important step or otherwise. I don't know where I missed the boat.

I get and understand both Terry's and Steve's concerns where sometimes the old way can still be the best way for us old farts. I had to go the other way 1st to wait until Designer mode actually started to behave for me without its constant turning itself off prior beta 4a. Learn how to make it work for me rather than the other way around. Then there was the whole IDE learning curve, locating templates and css and so forth. This was also a time eater for a few themes. Now I have a basic test skin of my own leaving the default theme completely alone. So far knock on wood (in my case the top of my head.) I have had no issues with it up to the first RC where I had to go through every css file to find all the "//" in regards to fontawesome and change them not just on the test skin but any built on it. Today I have not seen any issues between the 1st RC to RC 5a that I am presently running.

There should be away to safeguard what Steve and Terry are going through. And now even so it seems my method is still incorrect...

Somebody has to come up with a difinatve answer to the correct methods. Or come final there are going to be a lot of angry customers and designers wearing egg makeup.

And I don't look good in any makeup let alone egg...

((((Where is Rob to see if he got the yoke.))))

[The Jimmo]

@Woodsman if you want to provide an example of what "blew up" in your face using the custom.css file, I'll take a look and see if I can help you. Once you're used to it, it will save you time, not just writing your theme initially but of course later down the road.

[Woodsman]

@ForeverPontiac When I say blew up in my face I seriously meant it... I got a huge page of errors... going back to remove the css file didn't fix it via the files in the uploads folder, lost the ACP everything.... The only thing I could do was to rebuild the test site... So I have no clue what the heck I did but I think after the 3rd attempt I figured to leave it alone until somebody actually gives me a "how to" approach for dummies on this.... And btw this was when I was trying to do them manually before the Designers mode and IDE bit sunk in.

 

‌

[The Jimmo]

Yikes! I thought you meant the style blew up. That's weird.