CSS question...or disappointment

[SeNioR-]

Matt, you have to understand that most of the customers previously edited the theme by modifying the changes directly in the cores's CSS. Hence such a big disappointment.

We both know that this is not a good practice and this change was needed, but nevertheless put yourself in the role of a customer without much technical knowledge who just wants to modify his theme, as he has done so far and knows this type of editing also from others CMS.

This is a big change and it strongly influences the way the theme is edited. I understand both sides.

In the end, I think it will be good for all of us, both for the customers and for the software itself.

Edited September 21, 2022 by SeNioR-

[DudeThatsErin]

The claim of the CDN is a load of bull****. If you needed to secure a site/speed up a site/etc. for a CDN/with a CDN there is CloudFlare and other CDNs that don't limit customers in this way.

There was ZERO reason for this change other than Invision wanting to collect customer data and check for unlicensed websites in a "more efficient" way. Any other claims are false.

This is NOT customer friendly in ANY WAY. The claim of "because it is CSS means you should be able to make changes no matter what" is false. Eventually you won't be able to overwrite something and then you are screwed. I don't care what IPS says.

I am never recommending IPS to anyone ever again and I am never using it anymore. They don't care about customers anymore. They are just here for the bottom line screw everything else.

[Matt]

There's a lot of confusion here, so I'll do my best to address it all.

Why have you removed CSS editing?
First off, we have NOT removed the ability to edit and add CSS to your themes. When we released Invision Community 4.0 way back in 2012, we added a "custom.css" file and asked everyone to add their custom CSS to this file. This means that when we make changes to the core CSS, you do not have to merge changes, or re-apply edits. Your custom CSS is untouched.

This is exactly what CSS is designed to do. The core CSS may contain something like this.

body {
  font-size:14px;
  font-family: Helvetica;
  margin: 10px
  color: black;
}

So, what do you do if you want to change the colour to red? In the past you could edit this core CSS file directly and make it like so:

body {
  font-size:14px;
  font-family: Helvetica;
  margin: 10px
  color: red; /* Changed color here from black */
}

This would work fine BUT if we changed our core CSS to change the font-size to 16 like so:

body {
  font-size:16px;
  font-family: Helvetica;
  margin: 10px
  color: black;
}

This will now overwrite your changes, which means you'll need to re-edit it back to:

body {
  font-size:16px;
  font-family: Helvetica;
  margin: 10px
  color: red;
}

This does work, but means you are constantly having to compare your changes to ours.

Fortunately, CSS (cascading style sheets) is designed to allow new CSS files to overwrite rules that we set, and that is why we have a custom.css file ready for you to make your upgrade-proof edits.

So, if you wanted to make the body colour red, instead of editing our code and maintaining changes, you simply add this to custom.css
 

body {
	color: red;
}

CSS knows to combine OUR rules with YOUR rules. It's exactly what CSS was designed to do. The computed result (how the browser sees it) of this is exactly the same:

body {
  font-size:14px; /* from our core css */
  font-family: Helvetica; /* from our core css */
  margin: 10px /* from our core css */
  color: red; /* from custom.css */
}

This is clearly a much better way of changing the CSS rules. You can keep all your custom code in one place and you no longer have to maintain copy and paste edits to core CSS.

In short, CSS editing STILL VERY MUCH EXISTS!

Why this change?
To be frank, it's 2022 and there's no valid reason at all to be editing core CSS when CSS itself was designed to cascade and make your lives easier.

We should have locked out editing of core CSS a long time ago. As the web moves on, we have to move on too. Serving CSS from a single CDN will improve the page speed of your site as it will come from a cached no-cookie domain.

No modern application out there will allow you to edit core CSS, there just is not the need.

I realise that for a very small number of people this means changing how you work, but this is how you should have been working since 4.0 was released a decade ago.

If you actually use custom.css I promise once you have completed the initial population of this file, your life will be made so much easier!

This is industry standard
If you look at other apps, they allow you to add custom rules that cascade over the core CSS files. Like Squarespace, and Wordpress which states: "You can use the CSS editor to customize the appearance of your WordPress.com site. It works by allowing you to add your own CSS styles to override the default styles of your theme."

[SeNioR-]

49 minutes ago, DudeThatsErin said:

I am never recommending IPS to anyone ever again and I am never using it anymore. They don't care about customers anymore.

Chill man 🤙 Go take a breath or something 😉 They care about customers, I can assure you.

Thanks Matt for the clarification. I think no one should have any doubts now that this change was needed.

Edited September 21, 2022 by SeNioR-

[Matt]

Just now, SeNioR- said:

Chill man 🤙 Go take a breath or something 😉 They care about customers, I can assure you.

We really do. We've had to be firm about some things and make decisions to ensure we are still a relevant platform in the 2020s but we truly do care about our customers.

We want our customers to have a great experience with the software, during upgrades and way into the future. Your community's success is our success.

[Rikki]

17 hours ago, Adlago said:

@Rikki Reading this thread, which I created because "you cut off my quick glance" - I am left with the clear impression that you are making a huge mistake.
Most of your clients are not interested in this at all.
But the few "crazy like me" seekers and experimenters you want to banish. Why?

It's best to ban the themes too - let's all use only one - it will be heaven for your support...

Hey Adlago,

I don't work at IPS (despite that cute cartoon avatar I have), so I'm able to tell you that you're doing it wrong. You should never have been editing the default CSS files, and it's unfortunate that the product allowed it all this time.

I assure you, you can do everything you did before. It'll be even better than before, actually, because it won't break on every upgrade.

Edited September 21, 2022 by Rikki

[Matt]

4 hours ago, SeNioR- said:

Matt, you have to understand that most of the customers previously edited the theme by modifying the changes directly in the cores's CSS. Hence such a big disappointment.

We both know that this is not a good practice and this change was needed, but nevertheless put yourself in the role of a customer without much technical knowledge who just wants to modify his theme, as he has done so far and knows this type of editing also from others CMS.

This is a big change and it strongly influences the way the theme is edited. I understand both sides.

In the end, I think it will be good for all of us, both for the customers and for the software itself.

I completely understand. Our main focus now is to make our app simpler. Simplicity doesn't mean we lose power, expandability or configurability but it does mean that we can simplify workflow processes.

For example, CSS editing; as we allowed core CSS files to be edited, we needed a conflicts and merge system to detect changes and offer the admin a chance to automatically merge these changes in. This is a lot of complex code that we can remove. We also presented multiple ways in the AdminCP to edit CSS which leads to a weaker UI and more confusion. It also makes our documentation more complex and longer as we explain both methods.

By choosing simplicity and a single way to add custom CSS, we greatly simplify the code, the workflow and our documentation and make the software easier to use.  

[SeNioR-]

37 minutes ago, Rikki said:

I don't work at IPS (despite that cute cartoon avatar I have)

This "corporate" avatar is definitely misleading 🙂 @bfarber Hi! 😄 

Edited September 21, 2022 by SeNioR-

[Randy Calvert]

14 minutes ago, SeNioR- said:

This "corporate" avatar is definitely misleading 🙂 @bfarber Hi! 😄 

They’ve “earned” that avatar after all of their time. Haha

The avatar is not necessarily a corporate badge that gets turned in upon leaving. 

(But then again… I’m most likely not the right person to ask as I may or may not have taken a couple of extra pens from the supply closet in my time…)

[Jim M]

5 minutes ago, Randy Calvert said:

(But then again… I’m most likely not the right person to ask as I may or may not have taken a couple of extra pens from the supply closet in my time…)

 

[Adlago]

1 hour ago, Rikki said:

II assure you, you can do everything you did before. It'll be even better than before, actually, because it won't break on every upgrade.

No, I can't do what I used to do again, you'll ask why?
- First, I don't change rules in main css
- But for more than 6 months I have been working on a project where
custom css is the only css that is loaded in the head, main css is loaded before closing the body tag.
- in the custom css content, all the framework and responsive file names are found, and some others. But with numbering, for example 1fr_global.css or 2res_ responsive.css, etc.
- In these new files, I move used rules when analyzing site pages, i.e. in the main css all the rules are contained (as they have been moved they are stopped from execution only) - or here in the main css all the rules are loaded that are unused effectively when loading the site pages.
This new layout greatly speeds up site loading.
The custom.css file also exists in custom directory and there are my customizations - and as you know, the rules there are the latest and are executed by the browser as they are there.
Since IPS introducing restrictions for visibility on css main, I abandoned a project where mobile view loads on PSI test data between 88 and 94 points depending on server busyness.
And believe me - during the time I was working on this project - several updates were completed - without any site issues...

[Rikki]

34 minutes ago, Adlago said:

No, I can't do what I used to do again, you'll ask why?
- First, I don't change rules in main css
- But for more than 6 months I have been working on a project where
custom css is the only css that is loaded in the head, main css is loaded before closing the body tag.
- in the custom css content, all the framework and responsive file names are found, and some others. But with numbering, for example 1fr_global.css or 2res_ responsive.css, etc.
- In these new files, I move used rules when analyzing site pages, i.e. in the main css all the rules are contained (as they have been moved they are stopped from execution only) - or here in the main css all the rules are loaded that are unused effectively when loading the site pages.
This new layout greatly speeds up site loading.
The custom.css file also exists in custom directory and there are my customizations - and as you know, the rules there are the latest and are executed by the browser as they are there.
Since IPS introducing restrictions for visibility on css main, I abandoned a project where mobile view loads on PSI test data between 88 and 94 points depending on server busyness.
And believe me - during the time I was working on this project - several updates were completed - without any site issues...

Firstly, I should note that what you're doing is not really intended to be possible. You should be aware that if/when the frontend stack of the product is modernized, it's likely none of this will be possible because that just isn't compatible with how modern web apps are built. I know you've enjoyed this flexibility to really make low level changes but it's unlikely to be possible forever.

That said... Could you not:

• Still create your new custom css files names 1fr_global.css etc.
• Grab the classes using the technique I mentioned in this topic (use web inspector to get the compiled css file contents)
• Put all that in your custom css files however you wish
• Modify your includeCSS template to exclude any CSS files that are not 'custom' (so that the core CSS are no longer included in the page at all)

[Adlago]

51 minutes ago, Rikki said:

 (use web inspector to get the compiled css file contents)

This using an inspector is not a good idea - because an inspector sees ready code, and only for a page that is tested with an inspector - for my project it is important to use responsive code that uses php in original file css, etc. etc
I, like you, have been using inspector for a long time and a first version of my project started like this - but I quickly noticed unpleasant changes in various pages and gave up copy/pasting from inspector...

[Jim M]

13 minutes ago, Adlago said:

This using an inspector is not a good idea - because an inspector sees ready code, and only for a page that is tested with an inspector - for my project it is important to use responsive code that uses php in original file css, etc. etc
I, like you, have been using inspector for a long time and a first version of my project started like this - but I quickly noticed unpleasant changes in various pages and gave up copy/pasting from inspector...

This is our whole forums.css file in developer tools "Sources" tab as both Rikki and I outlined earlier in this topic. Clicking the { } in the bottom left will format it from being minified to readable too:

[Adlago]

1 hour ago, Jim M said:

This is our whole forums.css file in developer tools "Sources" tab as both Rikki and I outlined earlier in this topic. Clicking the { } in the bottom left will format it from being minified to readable too:

As I wrote, I use it and I know it. But you tell me, how in the inspector to find and copy this code, for example?
 

 

.ipsLayout_container {
	{{if theme.enable_fluid_width}}
		{{if theme.fluid_width_size}}
			max-width: {theme="fluid_width_size"}%;
		{{else}}
			max-width: 100%;
		{{endif}}
	{{else}}
		max-width: var(--container--width);
	{{endif}}
	padding: 0 15px;
	margin: 0 auto;
	position: relative;
}

Because in my project I don't want just the result of one page or one device, but your exact code that works as you created it...

[Nathan Explosion]

Just going to drop this link here for those who want another way to view the CSS code...just don't upload it to your own live site.

 

 

[Daniel F]

27 minutes ago, Nathan Explosion said:

Just going to drop this link here for those who want another way to view the CSS code...just don't upload it to your own live site.

 

 

Way too complicated and dangerous ( because of the other features in the app) , in fact there’s no need for 3rd party stuff at all, enabling the designer mode should work too!

[Nathan Explosion]

They're your own phtml/css/js files, not an app. Nothing 3rd party suggested.

I suspect you think I have linked to Dev Toolbox, which I haven't.

Edited September 21, 2022 by Nathan Explosion

[Percival]

6 hours ago, Matt said:

Serving CSS from a single CDN will improve the page speed of your site as it will come from a cached no-cookie domain.

Could you please leave an option to serve CSS directly from the website, not only via CDN? It's not that CDN will always make site faster. Would be nice to have a choice.

[Adlago]

@Matt Isn't it better to try the JS from the CDN - anyway, too few users try to change the JS. And JS is a resource that makes the biggest TBT time for mobile. If the JS is loaded from your server through CDN - all sites will have much better performance indicators.
And CSS - leave it as in previous versions - there are enthusiasts like me who are looking for other solutions - maybe you like some solution...

[Jim M]

6 hours ago, Adlago said:

As I wrote, I use it and I know it. But you tell me, how in the inspector to find and copy this code, for example?
 

 

.ipsLayout_container {
	{{if theme.enable_fluid_width}}
		{{if theme.fluid_width_size}}
			max-width: {theme="fluid_width_size"}%;
		{{else}}
			max-width: 100%;
		{{endif}}
	{{else}}
		max-width: var(--container--width);
	{{endif}}
	padding: 0 15px;
	margin: 0 auto;
	position: relative;
}

Because in my project I don't want just the result of one page or one device, but your exact code that works as you created it...

The CSS does include all devices. The quoted example is for a theme setting, fluid width, which is an admin control setting for the width of the layout by a percentage. It is set in the ACP and can only be fetched by PHP. It is not for responsiveness of a specific device. CSS natively handles that with media queries and included in all evaluated CSS.

At your level of high customization, if you’re only developing a theme for yourself, I don’t think there is a lot you would need to worry about that is being evaluated here as I imagine you don’t need a high degree of variability because you know how you’re going to handle your theme. So while I do get your point here that you lose this and many other expressions in the evaluated CSS, I don’t think that necessarily is detrimental to your theme. If it is, right now, you can use Designer’s Mode to review if they are detrimental to your theme or not.

[Adlago]

6 hours ago, Jim M said:

The CSS does include all devices. The quoted example is for a theme setting, fluid width, which is an admin control setting for the width of the layout by a percentage. It is set in the ACP and can only be fetched by PHP. It is not for responsiveness of a specific device. CSS natively handles that with media queries and included in all evaluated CSS.

At your level of high customization, if you’re only developing a theme for yourself, I don’t think there is a lot you would need to worry about that is being evaluated here as I imagine you don’t need a high degree of variability because you know how you’re going to handle your theme. So while I do get your point here that you lose this and many other expressions in the evaluated CSS, I don’t think that necessarily is detrimental to your theme. If it is, right now, you can use Designer’s Mode to review if they are detrimental to your theme or not.

If the question was only about me and my site, this thread here would not have been created by me.
I optimize various sites - I cannot leave fixed rules that a site owner will not be able to change in ACP ie. I store everything as functionality and performance that you have created.
I rely on my acceleration principles, which do not change the content of your product - I only change the way of initial loading - which actually speeds up the site loading and improves Web Vitals parameters - which is a requirement of Google and all sites using ads suffer financially for poor performance .
The metod of using a browser inspector to extract code is only applicable when using critical css like inline css (an idea I gave up on a year ago)
Your disabling access to basic css terminated my project when with just css changes loading I reached a score level of 88-94 for mobile. I.e. I failed to finish the second stage of my project - binding with acceleration loading JS.
And now if you do a PSI test on my site, you will still get the same results 88-94 for a mobile test, because I applied my idea on the JS, which also made the site load faster.
If I had managed to finish my project - mobile loading speed would have had a minimum reading of over 90... what was the basic idea...
Yes probably your css over CDN idea will work better at some future time, but I'm personally skeptical...
And what would prevent you from having an option in the ACP - with CDN CSS or CSS Own installation?

[Day_]

Honestly can't get my head around this Pagespeed score obsession, test many of the top sites on the internet and you will find many on par or below a standard IPS forum in this point scoring contest.

Been reading your posts on here for a number of years and I think it's almost a personal challenge for you now rather than something that would benefit your site. 

Use your eyes, they will tell you if your site is loading slowly or not, I'm over 10 years deep into my forum with Adsense on and I haven't had one member complain that my forum is slow on mobile, not one based in the UK on a UK server with members using from the US, Russia and Asia. Not one complaint.

I haven't been punished by Google in anyway, still number 1 for search terms related to my site all whilst using custom.css which keeps all my changes in tact on every single upgrade.

My site isn't unique, take MacRumors for example, Pagespeed 31 for mobile yet still the number one Apple related forum. Go figure.

I wish you luck in your hunt for that magical 100, however the changes IPS have made will benefit all customers going forward. 

[SeNioR-]

11 hours ago, Day_ said:

I wish you luck in your hunt for that magical 100,

On mobile devices? it will never happen 😛 This is not possible with automated content management software. Too many things affect it.

IPS is not the worst optimized anyway. JS takes the longest time to load and personally, it overwhelms me the most, but you can't have everything.

Edited September 23, 2022 by SeNioR-

[Day_]

1 hour ago, SeNioR- said:

On mobile devices? it will never happen 😛 This is not possible with automated content management software. Too many things affect it.

IPS is not the worst optimized anyway. JS takes the longest time to load and personally, it overwhelms me the most, but you can't have everything.

Sounds like a proper challenge.

Right up there with the bloke that’s spent 25 years looking for Nessy on Loch Ness, well 31 years now if he’s still there 😁

https://www.bbc.co.uk/news/uk-scotland-highlands-islands-36825152