UI Problems

This is only happening on one install, but it is very annoying.

I originally started this project last Spring, with version 5.7.4 (pretty sure)
Recently restarted work and first updated the site:
5.7.4 > > > >

Curious behaviour:
When in Edit mode > add block "+", it is impossible to exit back out of add block interface. I can only refresh the page - this puts me back out of edit mode. It is also happens with the Dashboard - can't exit back out of it, have to refresh the page.

Also, if I log.off, and forget to save a page, then log-in again, the blue dialog box warning me to save the page is weird (see attached file)

As mentioned , this only appears on one install.

Steps taken to correct:
Turned on CSS and JS cache (heard about that problem)
Cleared system cache
Replaced updates with new core (

Has anybody had this problem? Should I just redo the whole site?

1 Attachment

View Replies: View Best Answer
MrKDilkington replied on at Permalink Reply
Hi arlenesey,

If you switch to the default Elemental theme, do you still have the issue?

Do you have any browser console errors?

The blue dialog box warning looks weird because the theme CSS is conflicting with its styling. Scoping/namespacing your CSS to the "ccm-page" class will address this.
arlenesey replied on at Permalink Reply
Thank you, Sir!
This is enlightening and frightening in that I have another site built with an earlier version then this one, in Elemental, that I also heavily customised. I had intended to bring it right up to date in the coming week, but now I will have to plan a bit more time for it.

In 5.6 and earlier, when I wanted to customise a theme I would "fork" it. I can now see that 5.7 is morphing too much to be able to depend on my changes not clashing after updates, using this old method.
What would you recommend as best practise for doing this kind of work?
The presets dialog is often times too basic for my needs. Also the extra CSS box at the bottom of presets doesn't help, as sometimes changes apply to the page, or they apply to the whole site.
Thanks again!
MrKDilkington replied on at Permalink Reply

The <div class="<?php echo $c->getPageWrapperClass(); ?>"> added to themes will add the class "ccm-page" to the div and conditionally a page template handle and page type class.

<div class="ccm-page page-type-blog-entry page-template-right-sidebar">

As a best practice, I would write your CSS using .ccm-page to make it more specific.
arlenesey replied on at Permalink Reply
Thanks for the quick reply - I will certainly do this in the future.
One further question.
Let's say I buy a theme, and there are aspects of that theme that can't be customised in the presets area of the editing area. For instance, I want a Google font, and this is not supported, or I want to change padding on the breadcrumb navigation. I get that I need to use the .ccm class in my changes, but what would be the best way to implement those changes?

Instead of creating a new "forked" version (and by this I mean copying the "theme" file from the package and renaming it, then installing it as a separate theme) should I simply - as in additional templates for blocks - create a folder in applications/themes/(themename)

Then add the changed css files and additional page templates in the same structure as the original theme, but only the files I need to change?

For instance if I want to add a preset file, I would create a custom preset file and place it so:

and that would include a new page_theme.php, with my additions:

Additional page templates would be:

Am I on the right track?
arlenesey replied on at Permalink Reply
I have given up "forking" the theme and went back to using the "customize css" button in the presets section. I simply couldn't find the worm causing my UI problems.

Of course now I have other problems, but I will make a new post.
Thanks for your help so far!
MrKDilkington replied on at Permalink Best Answer Reply

Community member mesuva uses a very clever trick for handling theme overrides. He adds a second overrides.css file after the main theme CSS file. This keep changes in one place and keeps the original theme CSS intact.

<link rel="stylesheet" href="/application/themes/site_theme/main.css">
<link rel="stylesheet" href="/application/themes/site_theme/overrides.css">
arlenesey replied on at Permalink Reply
So if I update the theme, all I have to worry about is correcting header.php, then reinserting
overrides.css and any custom page templates I have created.
This is a great work-around - thank you! I wish I had known all this 2 projects ago... live and learn!