Inconsistent theme HTML

[ehren.]

When upgrading my themes to 4.2, I have been intentionally trying to avoid HTML modifications in an attempt to make my themes "upgrade friendly". In some cases, template modifications are necessary - however based on my own experience and customer bug reports, it has become increasingly apparent that there are design issues with the Default IPS theme.

Many pages lack the .ipsBox class which should be used to wrap content. Failure to use this class means text is displayed on the body background which is rarely intended. Every theme which uses an image for the background (or even a dark hex colour) will suffer from this. A screenshot of the Rules confirmation screen from a customers website is shown below.

 

This is easily fixed by wrapping the area with: <div class='ipsBox ipsPad'> however I don't feel as though this is something I should be doing myself - firstly because it means my templates will be modified and secondly because all theme designers can benefit from this. If there could be a conscious effort to go through the suite and apply these classes to the appropriate areas, that would be perfect.

[steve00]

Always been that way unfortunately.

Appears they do not have a standard set of rules they make their coders use, seems they are left to it and do as the coders want to do and not worry about if they are missing code that other coders use in their designs.

Pointed this out to IPS way back to v2 and always been there every release, might fix one part in following release but then miss another part so gave up trying to tell them.

Makes it damn awkward for us themers but until someone tells them to use a basic standard set of rules then will always happen (was hoping this was going to happen when v4 was released as being re-written from scratch)

Not much fun if trying to make theme to cover all IPS apps when there is coding missed in some of the apps and have to try and make it work without touching templates

Another thing is when they change the css used for areas to something else (what is wrong with using the old css for those areas) why change it.

In my opinion seems some things are just not thought through properly before work starts

[Nebthtet]

Exactly right. This is a problem as the users want to have darker skin available, or something with a graphic backgroud - and it can’t be properly skinned this way . I hope this will be addressed somehow.

[Mark]

That looks like a bug (I actually had the particular case you mention in my notes as I'd noticed it myself too). If you can provide a list of pages you've seen this on, I'll make sure they get fixed.

[ehren.]

4 hours ago, Mark said:

That looks like a bug (I actually had the particular case you mention in my notes as I'd noticed it myself too). If you can provide a list of pages you've seen this on, I'll make sure they get fixed.

Thanks Mark - I'm sure a tonne of my customers will appreciate that.

Pretty much every edit form needs styling. The below screenshot is from the Blogs, but the same happens with the Gallery and Download addons.

 

There are numerous areas that contain page titles or descriptions. This example is from the Store (when viewing a category of products). The ipsType_medium class is also used in the section title for some reason, which makes the text excessively small.

 

The album description when viewing albums (below the Rules box if it's not clear in the screenshot):

 

If the rules are displayed on the page (instead of a popup box or link):

 

The ModCP:

 

There are numerous pages where the large page title sits outside the content:

 

The inbox, when no message is selected.

I think customers have also reported issues with the Terms and Conditions and privacy - although I could be wrong.

I'm sure there are many more areas, but those were found after a quick sweep through my forum. An easy way to find these issues is to simply change the page background colour to a dark colour and you'll notice how easily these areas stick out.

If the "text on transparent background" effect is intended, then please just add a new class to the parent of those elements (such as .ipsContent_transparent or something) which will allow developers to add backgrounds to those areas if necessary.

[jackflash]

@Mark - What's totally disappointing to me is that in 4.2, you can't use the killer built in theme editor with a dark background because most of the text will also be dark and you simply can't change that in certain areas.   In some cases, the text needs to be dark and in others, light, However, there are not options to change the text color.

Can this be fixed by adding more ways to change the font colors in the theme editor under text?

I really love the theme editor and hope this can be fixed.

[ehren.]

Another report from a customer. When a message is sent via the contact form:

[LiquidFractal]

34 minutes ago, ehren. said:

Another report from a customer. When a message is sent via the contact form:

Yep - this one was me!

I also notice this problem with some manually-coded Pages pages, such as my in-progress About page, below:

 

[LiquidFractal]

Another instance: Gallery descriptions within a Club:

Without adding another screenshot, I can confirm that the Privacy Policy screen is also lacking the necessary wrapper.

[LiquidFractal]

And in case no one else has pointed these out, this appears on the Edit Calendar Event screen:

[ehren.]

All edit forms are affected, except for the 'edit post' form. I mentioned that in an earlier post

[Ryan Ashbrook]

On 8/5/2017 at 9:53 PM, liquidfractal said:

I also notice this problem with some manually-coded Pages pages, such as my in-progress About page, below:

In this instance, you should add the wrapper manually - wrapping all Pages that use the suite wrapper can actually result in undesired effects for some clients.

[LiquidFractal]

5 hours ago, Ryan Ashbrook said:

In this instance, you should add the wrapper manually - wrapping all Pages that use the suite wrapper can actually result in undesired effects for some clients.

Could someone kindly point out how I would do this inside the code?

[Ryan Ashbrook]

<div class='ipsBox ipsPad'>
  <!-- HTML here -->
</div>

Should do it.

[LiquidFractal]

26 minutes ago, Ryan Ashbrook said:

<div class='ipsBox ipsPad'>
  <!-- HTML here -->
</div>

Should do it.

Thank you - worked like a charm!

[LiquidFractal]

I'd also like to add that the no-results screen for Activity Streams (and possibly other AS screens?) also need to be fixed:

 

[LiquidFractal]

I guess this is as good a thread as any to also point out:

For those of us who use @Kevin Carwile's Collabs app, there are also many pages in that app that do not have the proper wrappers for certain areas of content.  I'll list some when I have time, but for now I want to point out that this is a significant CSS issue with Collabs' integration with the core suite as well.

[steve00]

On ‎08‎/‎08‎/‎2017 at 7:18 AM, liquidfractal said:

I guess this is as good a thread as any to also point out:

For those of us who use @Kevin Carwile's Collabs app, there are also many pages in that app that do not have the proper wrappers for certain areas of content.  I'll list some when I have time, but for now I want to point out that this is a significant CSS issue with Collabs' integration with the core suite as well.

That you would take up with the author (it may be author hasn't spotted it and if no one inform them then how can they fix the issue)

[LiquidFractal]

16 hours ago, steve00 said:

That you would take up with the author (it may be author hasn't spotted it and if no one inform them then how can they fix the issue)

Thanks, I'll do that.  Figured I'd post it here first since I wasn't quite sure which side should take this up.

[Mark]

In our guide for upgrading themes to 4.2 there is a section about this change called "No content background color by default" - does adding a background as specified there (which will take you back to a similar approach as used for 4.1) help? As you've noticed, some of these areas are headers which are deliberately not inside ipsBox elements.

 

[ehren.]

4 hours ago, Mark said:

In our guide for upgrading themes to 4.2 there is a section about this change called "No content background color by default" - does adding a background as specified there (which will take you back to a similar approach as used for 4.1) help?

The issue existed in 4.1 and likely 4.0 too, it's not unique to 4.2. The guide which you linked to isn't related to the issue's we've mentioned, so adding a background colour to the entire site wrapper isn't the solution we're after unfortunately.

We don't need the entire #ipsLayout_contentWrapper area styled, we need the individual content areas correctly wrapped with ipsBox. The HTML structure is correct on most pages, but other pages are broken (shown in all of the screenshots above) since they lack any form of structure. If you need to reproduce this on your own site, simply change the Page Background theme setting to a dark colour such as #3c3c3c and visit any of the affected pages. It'll become quite obvious

Additionally, the headers which are deliberately outside of the ipsBox elements should at least have a class wrapped around them which can give themers the opportunity to easily style them.

[MiP1]

IPS Staff, any news on this? Hope it can be fixed with the next update.

[Michael R]

On 8/19/2017 at 2:01 PM, MiP1 said:

IPS Staff, any news on this? Hope it can be fixed with the next update.

+1!

Looking to move to 4.2 asap.

[LiquidFractal]

On 8/19/2017 at 2:01 PM, MiP1 said:

IPS Staff, any news on this? Hope it can be fixed with the next update.

I'd also really like to know if there will be movement on this issue in the future.  These gaps look unsightly when one is trying to market professional services via a website, and as much as I like the default Blue theme some of my users want more choice and eyecandy as well.

[Tracy Perry]

Another area that needs to be addressed is the notValidated template.  Currently it gives you this

 

 

it wouldn't be so bad if there was an effective template history/merge capability, but after each style upgrade you have to remember to redo these special template edits since apparently when you upgrade your style you should install it fresh and not "upgrade" it.  You then have to redo any special template edits that you have created.  It's really a pain and one of the great weaknesses that I've found in the IPS templating system.