Integration CSS

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

Dari...it seems the problem with the gallery stylesheet not working in the embed is that gallery2.tpl is outputting the css link in the body of the page. The link tag can only be included in the head section of the output, so the stylesheet is not being picked up. Any javascript included within a link tag is not going to work this way either. Is there a way to change this?

I tried playing with it some, but it's not clear to me how it even works. The $links variable is always empty in my gallery2.php, yet 2 stylesheet links always show up in the page body source view right where the gallery2.tpl wants them.

AdBot

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

Nevermind...I got it working correctly now. The {CSS} and {JAVASCRIPT} template vars need to be moved out of gallery2.tpl and put into the head section of overall_header.tpl and the gallery2.php code needs to be re-arranged to where the template vars are assigned before the call to page_header.php

fyreheart · Beginner Joined: Nov 20, 2005 Posts: 10

Any chance you could post the altered files up for the rest of us to try??

dari · Posted: Wed Nov 30, 2005 7:58 am Post subject: Re: Integration CSS

actually, email me the changes, and i'll commit them into CVS for the integration package. (dari AT nukedgallery.net)

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

Here's the changes, if you don't want to wait and sort through the differences in the readme...

First, I renamed the {CSS}, {JAVASCRIPT} and {BODY} template vars to
{GALLERY2_XXX} to avoid confusion, especially since two of them need to
be moved to the PHPBB overall_header.tpl

gallery2.tpl :
Remove {CSS} and {JAVASCRIPT} vars
Rename {BODY} to {GALLERY2_BODY}
Other than the copyright and GPL notice, it looks like this,

Code: › {GALLERY2_BODY}
</td></tr></table></td></tr></table>

phpbb/templates/subSilver/overall_header.tpl : (taken directly from the readme file, changes marked with NEW>)

Code: › #
#-----[ OPEN ]------------------------------------------
#
templates/subSilver/overall_header.tpl

NEW> #
NEW> #-----[ FIND ]------------------------------------------
NEW> #
NEW> <link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css">

NEW> #
NEW> #-----[ AFTER, ADD ]------------------------------------------
NEW> #
NEW> {GALLERY2_CSS}
NEW> {GALLERY2_JAVASCRIPT}

#
#-----[ FIND ]------------------------------------------
#
<img src="templates/subSilver/images/icon_mini_login.gif" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a> 

#
#-----[ IN-LINE AFTER, ADD ]------------------------------------------
#
 <a href="{U_GALLERY2}" class="mainmenu"><img src="templates/subSilver/images/exif_parser.gif" border="0" alt="{L_GALLERY2}" hspace="3" />{L_GALLERY2}</a> 

gallery2.php : (main changes are to rename template vars as
above and re-aarange code so that template vars get assigned before
call to phpbb/includes/page_header.php)

Other than the copyright and GPL notice, it looks like this,

Code: › define('IN_PHPBB', true);
$phpbb_root_path = './';
include($phpbb_root_path . 'extension.inc');
include($phpbb_root_path . 'common.' . $phpEx);
include($phpbb_root_path . 'g2helper.inc');

//
// Start session management
//
$userdata = session_pagestart($user_ip, PAGE_INDEX);
init_userprefs($userdata);
//
// End session management
//

$g2h = new g2helper($db);
$g2h->init($userdata);

GalleryCapabilities::set('showSidebarBlocks', true);
$g2data = GalleryEmbed::handleRequest();

if ($g2data['isDone']) exit; // Gallery 2 has already sent output (redirect or binary data)

//
// Lets build a page ...
//
// Use $g2data['headHtml'] and $g2data['bodyHtml']
// to display Gallery 2 content inside embedding application
// if you don't want to use $g2data['headHtml'] directly, you can get the css,
// javascript and page title separately by calling...
if (isset($g2data['headHtml'])) {
list($title, $css, $javascript) =
GalleryEmbed::parseHead($g2data['headHtml']);
}

$page_title = $title;

foreach ($css as $stylesheet) {
$links .= $stylesheet . "\n";
}

foreach ($javascript as $js) {
$jlink .= $js . "\n";
}

$bodyHtml = $g2data['bodyHtml'];

$template->set_filenames(array('body' => 'gallery2.tpl'));

$template->assign_vars(array(
'GALLERY2_BODY' => $bodyHtml,
'GALLERY2_CSS' => $links,
'GALLERY2_JAVASCRIPT' => $jlink));

include($phpbb_root_path . 'includes/page_header.' . $phpEx);

$template->pparse('body');

include($phpbb_root_path . 'includes/page_tail.' . $phpEx);

?>

dari · Posted: Wed Nov 30, 2005 12:18 pm Post subject: Re: Integration CSS

FYI - these changes have been committed and will be available in the integration package shortly (or you can use http://www.nukedgallery.net/downloads and get it right now)

fyreheart · Beginner Joined: Nov 20, 2005 Posts: 10

Thanks for all the work on this guys, I'm sure loads of people will be thrilled to see their galleries with proper sized text.

Sadly it looks like there is something weird up with my gallery...cos even after implementing the code changes there is no difference Sad

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

Does the page source show the gallery css link in the head section?

If you want, post up a link where we can take a look.

fyreheart · Beginner Joined: Nov 20, 2005 Posts: 10

Yea it seems to. I'd love if you guys would take a quick look and see if there is something I've missed.

the url of gallery is http://ukcruisers.net/phpBB2/gallery2.php

dari · Posted: Thu Dec 01, 2005 11:24 am Post subject: Re: Integration CSS

the order of CSS hrefs in the header make a difference, IIRC. but, i can't recall if the first listed CSS is given priority, or if the last listed CSS is...

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

fyreheart...the page looks like it is loading properly and the gallery css link is right. I suspect you are having a conflict with the custom stylesheet and theme you are using, because gallery seems to work fine with the default subSilver stylesheet. I'm no expert on stylesheets, but it appears your custom stylesheet is setting high level tag styles that are over-riding the class level styles that gallery is trying to use.

A couple things come to mind you could try.

1. Temporarily remove the line that links the phpbb stylesheet from the overall_header.tpl file and see if the gallery renders correctly (the rest of the page will probably be mangled, but it will verify if there is a conflict)

2. You might try placing the {GALLERY2_CSS} template var before the phpbb css link, instead of after it (don't know if it will matter, but its easy enough to try)

fyreheart · Beginner Joined: Nov 20, 2005 Posts: 10

I temporarily removed the link to the phpbb style sheet and yeah the header was a bit weird but the gallery was fine. Just to experiment I changed the order of the variables and the phpbb css link and there wasn't any difference.

I'll play with the css and get it sorted. Thanks for the php code though cos without that I was buggered!!

jettyrat · Moderator Joined: Nov 28, 2005 Posts: 1144

You might try this before digging through the css code. Again, I'm no expert on stylesheets, I got this idea from here [htmlhelp.com].

This will atempt to define the gallery2 theme as the preferred style...

In the file gallery2.php

Change

Code: › foreach ($css as $stylesheet) {
$links .= $stylesheet."\n";
}

To

Code: › foreach ($css as $stylesheet) {
$links .= (strstr($stylesheet, 'theme.css')) ? str_replace('/>', ' title="gallery2_preferred"/>', $stylesheet) . "\n" : $stylesheet . "\n";
}

fyreheart · Beginner Joined: Nov 20, 2005 Posts: 10

Thanks for the thought but it's just isn't having it. Damn Christmas theme the silly users want!!! Twisted Evil

liquiddanno · Beginner Joined: Dec 01, 2005 Posts: 3

There is a way to override a style using (! important) in the CSS. you need to know what style is not working.

#test2 {color: green ! important;}

Code: › <HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css" TITLE="">
#test {color: blue;}
#test2 {color: green ! important;}
#test p {color: black;}
</STYLE>
</HEAD>
<BODY>
<p>plain paragraph</P>
   <div id="test">
      Test DIV
         <p>plain paragraph</P>
         <p id="test">paragraph test should be blue</P>
         <p id="test2">paragraph test should be green ! important</P>
      Test DIV
   </div>
</BODY>
</HTML>

Web Hosting India