V5 Cloud (test installation)

I seem to have two copies of my custom CSS. I see in the inspector the exact same selector and attributes twice, except one appears to be cached. When I edit the CSS, I have to disable the attributes in the cached version, else they override my changes. Inspector indicates that the CSS file is at this location, which I do not understand:

https://xxxxxx.invisionservice.com/?_fromLogin=1

I have cleared the cache at the site and used an incognito window for the browser to be sure of fresh cache. (And when that did not work, I made doubly certain by using the browser inspector in another browser.)

If someone here could explain to me what's going on, it would be appreciated. This is messing up my attempts to edit the CSS. It is probably just something I do not properly understand.

Thanks.

Edited May 18, 20251 yr by Como

Can you show printscreen of you 2 css classes?

For example on my main website, i use cloudflare, and it takes up 4hours to update the cached items on clients. This way once in the 4hours cloudflare connects to server and gets a new css style. And then distrubutes it to all clients. I guess the hosted envoirment of invision uses some of the same principle.
On my dev server i turned off caching, so i don't have this issues.

Can you check in chrome, inspect element, network tab, refresh the page, select the css that you want. Look at the right side:
Only when max age has expired the caching server will get a new file from server. (Rember, this caching server is a server, this has nothing to do with f5, or ctrl+f5. as that only gets a new file from caching server, and not from hosting server.)

Edited May 18, 20251 yr by Moestuin

Hi @Moestuin,

It is very late here. But I've just taken a quick look and will look again in the morning.

The two versions of selectors still appear. (And there is definitely only one in the custom CSS).

I did as you suggested, for the cached CSS. This is what I see. I am unsure what it indicates about what you explained. Thanks for the explanation.

I am unsure how I can properly test out a Cloud installation if there are long-lasting caches I cannot control.

The image shows that caching service is disabled for those files.
Looking on your site, printscreen below. What files are loaded double? I see none?

Maybe you have setup 2 times the CSS?
One time in the Theme Editor.
One time in CP under the Theme in the admin only CSS?
Could that be possbile?

Edited May 18, 20251 yr by Moestuin

We would need more information on what you are seeing. Exactly what file are you seeing twice, and exactly what selector are you seeing twice?

12 hours ago, Moestuin said:

Maybe you have setup 2 times the CSS?
One time in the Theme Editor.
One time in CP under the Theme in the admin only CSS?
Could that be possbile?

Urgh. That's it! I had no idea that was there in v5. And I have no idea how my CSS ended up there.

2 hours ago, Marc said:

We would need more information on what you are seeing. Exactly what file are you seeing twice, and exactly what selector are you seeing twice?

@Moestuin has steered me right. Thanks anyway @Marc.

Glad to hear you found it

Hi all,

Given that in v5 we can add custom CSS twice for given a theme, once in the ACP, and another in the theme editor, what's the best practice here? Which one should I choose in any given circumstance? Or, are there situations where I might use both?

Thanks.

Your choice really. I would say if you are adding quite a few changes, you would probably be best to do it within the custom CSS in the theme editor.

Hi @Marc

I notice when using the theme editor that the mobile menu is not displayed in tablet mode - is this correct behaviour?

Yes, that would be correct

I do not normally use tablets - but I just dug out a very old Kindle to test this - and when using that at least, it displays the mobile menu. I guess its screen resolution must be lower than most modern tablets. OK. Thanks, Marc.

It would indeed depend on the resolution, yes

Hmm. I do not understand the logic here. I just tried this using a phone in landscape. Even though it has a wider viewport than the tablet in the theme editor (there is considerably more text displayed before a return), it retains the mobile menu.

I thought in tablet mode - using the default theme - it retained a small border, does not have the mark as read button, etc. at the foot of the screen (and other responsive changes), but does have the mobile menu. But when I view the forums in desktop and tablet views in the theme editor, they are essentially the same (no substantive layout differences), just with a narrower viewport.

I note that using the theme editor in a smaller window does trigger the layout changes I described above. It seems that the three desktop, tablet and mobile viewport options in the theme editor do not actually directly tie to the screen width responsive layout trigger points. But I can trigger the three major layouts in the theme editor by using a smaller window width.

How does Invision define a tablet? Because in the theme editor, it is just a narrower desktop view.

Tablet view is defined by just a narrower viewport, as is mobile. There isnt really anything more to it than that

Tablets are defined as 768px to 979px. Mobiles and desktops fall on either side of that breakpoint.

We don’t use device detection, so there will definitely be cases where the “desktop” layout is shown on a tablet. “Desktop”, “tablet” and “mobile” should really be referenced as “large”, “medium” and “small” these days since devices vary considerably in size.

I hope that helps!

3 hours ago, Como said:

Given that in v5 we can add custom CSS twice for given a theme, once in the ACP, and another in the theme editor, what's the best practice here? Which one should I choose in any given circumstance? Or, are there situations where I might use both?

The ACP area is best if you’re a theme developer and you want to distribute your theme to clients. This allows you to add your code to the theme while ensuring the frontend “Custom CSS” area is empty for your clients (which is a convenient area for them to add their own code). Separating your code from theirs makes it easy to debug issues in the future since you can easily see what code has been added behind yours.

If you’re developing a theme for yourself and have no plans on distributing it to others, then adding your code to the frontend editor is typically more convenient 🙂

From a technical perspective, the ACP code is saved into a CSS file while the frontend code is added into a style tag. So that may also sway your decision.

2 hours ago, Ehren said:

Tablets are defined as 768px to 979px. Mobiles and desktops fall on either side of that breakpoint.

We don’t use device detection, so there will definitely be cases where the “desktop” layout is shown on a tablet. “Desktop”, “tablet” and “mobile” should really be referenced as “large”, “medium” and “small” these days since devices vary considerably in size.

I suppose that's what puzzled me. I expected the theme editor to display across the breakpoints (mobile/tablet/desktop).

2 hours ago, Ehren said:

From a technical perspective, the ACP code is saved into a CSS file while the frontend code is added into a style tag. So that may also sway your decision.

It might. Thank you for your detailed explanations. Appreciated.

Edited May 21, 20251 yr by Como

Yes it might be a bit confusing. But not all tables have the same resolution. Invision only have one view for tablets, and in that view there is enough space to load the website itself, without the need of the mobile footer menu.
I have some users now testing with some older ipads, and those do get the mobile footer menu.
However your ofcouse free to adjust the css to give the footer menu also to bigger screen sizes.

If you want to test mobile/tablets in a better view. Close the theme editor.
And then use Chrome inspect element, and select a device from the list.
Or add some custom devices under edit.

11 hours ago, Moestuin said:

If you want to test mobile/tablets in a better view. Close the theme editor.
And then use Chrome inspect element, and select a device from the list.
Or add some custom devices under edit.

I did not know that was a thing! Thank you for highlighting that that. I'll keep that in mind.

I suppose I just expected the theme editor to select three widths within each of the three zones created by the two breakpoints (something below the first breakpoint for mobile; a midpoint for tablet; and something (a minimum) above the second breakpoint). But it is what it is and is no biggie really.