CSS problems/considerations when embedding G2

Thanks for the feedback Andy. See my replies inline.

Quoting valiant:

> > > The G2 css files have an influence on
> > > things outside the gallery container.
> >
> > Yes, I see a difference in font size. Fonts in Xaraya's top
> > left menu are smaller when viewing G2. There are two things
> > to try here, and they both focus on minor changes in the CMS.
> >
> > 1. Change the order in which stylesheets are linked in the
> > HTML head of the CMS template. If Gallery's style sheets are
> > referenced before Xaraya's, this will give Xaraya's style
> > declarations a greater weight over Gallery's.
> >
>
> I can try it, but it shouldn't be a solution specific for xaraya. It should
> solve css interferences with all kinds of embedded G2s. Perhaps it works.
> Perhaps using specific css selectors would solve the problem without the
> requirement to include the G2 css before the cms css files.

This isn't a solution specific to a single CMS. When embedding Gallery, basic CSS cascade rules must be considered (cascade order, selector weight, specificity). To avoid CSS conflicts Gallery's style sheets should be the first to be referenced and then followed by the CMS's style sheets. Sheets referenced further down the list are given more weight and greater importance.

An equally important consideration is how style sheets are referenced. Styles defined in sheets referenced through "@import" are given precedence over styles referenced through <link>.

The combination of style sheet reference order and reference method should be the first consideration when embedding G2.

> > 2. If the first option doesn't cut it, we mayt need to edit
> > Xaraya's CSS to force it's font-size declarations to override
> > Gallery's. To do this, try editing
> > themes/Xaraya_Classic/style/style_textsmall.css
>
> This is no option. What you ask for is to ship a customized css file for
> each integrations. If the user has done other customizations in his css
> file, he will have to merge the css files which tends to be time intensive.
> It should be a generic, out of the box solution. Creating a integration
> without touching the core files of G2 or the other application is very
> important.

Gallery does a pretty good job of defining uniquely named CSS class and IDs and this goes a long way to minimizing CSS conflicts when G2's embedded. Xaraya does a good job of prepending 'xar' to it's CSS selectors. The hope is that other CMS style sheet developers do the same.

To solve the menu problem it would help to create a more specific CSS selector for Xaraya's menus. Here's the current left menu block and CSS that controls it and the right menu block.

<div class="xar-block-body">
<ul>
<li><a href="http://demo.xaraya.com/index.php/articles/news/147">CMSThailand Test</a> (1061)</li>
<li><a href="http://demo.xaraya.com/index.php/docs/107">Modified Document pubtype with DD Wysiwyg area</a> (609)</li>
<li><a href="http://demo.xaraya.com/index.php/articles/news/3">Quick Test</a> (349)</li>
<li><a href="http://demo.xaraya.com/index.php/articles/news/104">GAO to Probe Vote Counting</a> (293)</li>
<li><a href="http://demo.xaraya.com/index.php/articles/news/6">Testtesttest</a>
(287)</li>
</ul>
</div>

.xar-block-body ul li a,
.xar-block-body-right ul li a {
color: #336633;
background-color: #EBF0ED;
}

It's possible that changing the CSS from a class to an ID selector (.xar-block-body to #xar-block-body) would give Xaraya's menu block styles greater weight and eliminate this problem. There are few to no ID selector's used in Xaraya's style sheets and Gallery uses them extensively. As a result, when Gallery's styles for common HTML elements like links, overlap with Xaraya's, Gallery's definitions have a greater chance of being applied.

Question: How are Gallery's .local CSS files handled when G2 is embedded? Is this handled?

> > I'm wondering if it makes sense for CMS's to not display
> > right sidebars on G2 pages to provide maximum space for wide
> > images and album views.
>
> You don't have to use right sidebars to see overflows. There are also
> overflows if G2 displays a single very big image. And a restriction like
> this sounds not very attractive.
>
> > I think overflow may be the biggest UI issue for G2 right now
>
> Ack
>
> I'd suggest you first fix the overflows/images drop to bottom of page in all
> browsers (no overflow: auto ?), then fix the overflows in embedded G2 and
> then handle other css interferences.
> I'd have thought, working with very selective css selectors would lead to a
> environment, where it doesn't matter if G2 is embedded within something else
> or not. That's why I proposed it.

Very selective css selectors was an excellent point but the specificity and weight of the CMS selectors is equally, if not more important. Xaraya needs to use ID selectors more extensively than it does currently.

"Ack" is right I've had the overlap problem on my list since shortly after starting with the project and just haven't had enough time to devote to it (I was hoping no one would complain ). But now that the problem is compounding through G2 embedding efforts, I'll try to push it to the top of the list.

I'm going to post this in the G2 UI forums. Can you post further replies there?

thanks,
Chad