OP sub-theming - Flash of Unstyled Content (FOUC)

Events happening in the community are now at Drupal community events on www.drupal.org.
crotown's picture

I am creating a OpenPublish 2.2 sub-theme and have a views carousel on the front page for featured articles.

When I set the default theme to be the OpenPublish Theme the carousel renders fine. But when I use my sub-theme I get a brief flash of what I would see if JavaScript were turned off in my browser before I see the items rendered in the carousel. The page is rendered correctly in the end.

This seems to be a FOUC (Flash Of Unstyled Content) created by making an OP sub-theme, and it does not seem to be due to the use of a Views carousel, per se.

This post by Karl Swedberg describes one way of dealing with such issues, but I cannot make its method work in this case. After trying that approach, I realized that the issue seems to be with OP sub-theming itself.

Has anyone else observed this? Any solutions?

Comments

I am guessing you are seeing

iztok's picture

I am guessing you are seeing unstyled markup when caching and css/js optimization is turned off. So after going to production when you enable caching and optimized css/js (admin/settings/performance) this will probably be fixed.

I also think this can not be a common problem to all sub-themes and that you will need to find the file or code that is loaded too slow.

Maybe if you give us url to the project we can help you.

OpenPublish does not apply

irakli's picture

OpenPublish does not apply styles with Javascript and it does not do anything different in sub-theme than what it does for the main theme.

Is the URL of the site where you see such thing public? Can we take a look?

.............................................
http://twitter.com/inadarei

Same in OP theme & in sub-theme (broptheme3) FOUC in both

crotown's picture

Yes, I see the same behavior now in OpenPublish Theme and my sub-theme (broptheme3). I must have been mistaken when I reported a difference.

Here is a clone of the site: http://crotownconsult.com/fouc/ that I set up so that folks could see what I was talking about. To become the anonymous user to the site log in with
Username: foucanon
Password: foucnss
(Site uses the Securesite Module)

There is even a Switchtheme form at the top of the right sidebar which should let you switch back and forth between openpublish_theme and broptheme3 -- but there is no difference in the FOUC. Though broptheme3 has some styling for the breakout teasers on the slideshow and highlights in yellow the active teaser.

Thanks for the offer of help. Any ideas?

crotown, that page looks odd

irakli's picture

crotown,

that page looks odd in my browser with something resembling a carousel on top of the theme's header. Not sure if the placement on top of the header was intentional.

Either way - that carousel is the only thing that seems flashing, and, as you said yourself, it flashes in in both the OP theme as well as sub-theme, which makes me believe that it is not a sub-theming problem. I would even go farther and assume that it is not the theme problem at all but rather a problem in the code that renders that carousel.

You may also want to move the carousel below the header. That can well be causing the problem.

.............................................
http://twitter.com/inadarei

Thanks

crotown's picture

@irakli

I agree that it is stange looking. I put the carousel at the top of the header so I could get get it configured right without worrying too much about the layout (since the header runs the full width). I'm happy to hear that the flashing of the carousel is likely due to that placement. So I will not worry about the flashing, since there are going to be front-end specialists involved pretty soon, and that is one issue that is definitely in their scope, if it even persists.

Cheers,
Steve

OpenPublish

Group organizers

Group categories

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: