phpBB3 prosilver into Joomla ja_purity

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
bookysmell
Registered User
Posts: 10
Joined: Thu Sep 25, 2008 7:19 am

Re: phpBB3 prosilver into Joomla ja_purity

Post by bookysmell »

Severus Snape wrote:I'm not sure what you mean by "the problem is just that".
I mean all I did is to replace the original css (exactly as it is except from the URL's) and change the class to menu-nav (which as I said before is not necessary).
p17blo
Registered User
Posts: 17
Joined: Sun Jan 14, 2007 7:46 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by p17blo »

I just wanted to post my support for what you are doing here. I struggled immensely to get just the menu through trial and error and I think it shows that those of us that know a little can make a big difference for all. When I get a little more time myself I will take another look at my code and your amendments and see if I can work anything else out that may help. In the mean time, keep up the great work.

Paul
Severus Snape
Registered User
Posts: 42
Joined: Fri Mar 07, 2008 2:23 am

Re: phpBB3 prosilver into Joomla ja_purity

Post by Severus Snape »

More progress, I seem to have it working with Firefox3 and Safari and IE7. With Firefox2 (on Mac) and Camino (a Mozilla-based browser for Mac), when I hover over the drop-down menu it disappears on me so it is essentially non-functional. I haven't tried IE6.0.

By the way, this was trial and error. I have no idea why this works. :mrgreen:

Leave the overall_header.html file as it was (i.e. class="menu"). In ja-sosdmenu.css (i.e. the one you are using for the forum), delete the line "position: relative;". I have marked where it is in the following code:

Code: Select all

<snip>

/*old css*/
/* Son of Suckerfish Dropdowns
---------------------------------------------------------
Originally developed by Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
---------------------------------------------------------
NOTE: After a deep research, we decide to divide this
CSS into 2 parts. The first part will define the layout.
The second part will define the visual look for this menu.
---------------------------------------------------------*/

#ja-mainnav ul.menu {
	margin: 0; /* all lists */
	padding: 0;
	float: left;
	border-right: 1px solid #555555;
}

#ja-mainnav ul.menu ul {
	margin: 0; /* all lists */
	padding: 0;
}

#ja-mainnav ul.menu li {
	margin: 0; /* all list items */
	padding: 0;
	float: left;
	display: block;
	background: none;
	cursor: pointer;
	position: relative;  <---- [DELETE THIS LINE]
	list-style: none;
}
EDIT: I have several versions of this ja-sosdmenu.css file kicking around for some reason. The one I am using now looks like this:

Code: Select all

/* Son of Suckerfish Dropdowns
---------------------------------------------------------
Originally developed by Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
---------------------------------------------------------
NOTE: After a deep research, we decide to divide this
CSS into 2 parts. The first part will define the layout.
The second part will define the visual look for this menu.
---------------------------------------------------------*/

#ja-mainnav ul.menu {
	margin: 0; /* all lists */
	padding: 0;
	float: left;
	border-right: 1px solid #555555;
}

#ja-mainnav ul.menu ul {
	margin: 0; /* all lists */
	padding: 0;
}

#ja-mainnav ul.menu li {
	margin: 0; /* all list items */
	padding: 0;
	float: left;
	display: block;
	background: none;
	cursor: pointer;
/*	position: relative;   */  <---- COMMENTED THIS OUT
	list-style: none;
}

{ET CETERA ET CETERA}
Last edited by Severus Snape on Fri Oct 10, 2008 1:32 am, edited 1 time in total.
bookysmell
Registered User
Posts: 10
Joined: Thu Sep 25, 2008 7:19 am

Re: phpBB3 prosilver into Joomla ja_purity

Post by bookysmell »

Hmmm, I am wondering how you could actually implement the random image picker php file to return an image instead of a path and embed it in overall_header.html.
bookysmell
Registered User
Posts: 10
Joined: Thu Sep 25, 2008 7:19 am

Re: phpBB3 prosilver into Joomla ja_purity

Post by bookysmell »

bookysmell wrote:Hmmm, I am wondering how you could actually implement the random image picker php file to return an image instead of a path and embed it in overall_header.html.
Ok, nevermind I just figured out about http headers.
Severus Snape
Registered User
Posts: 42
Joined: Fri Mar 07, 2008 2:23 am

Re: phpBB3 prosilver into Joomla ja_purity

Post by Severus Snape »

bookysmell wrote:Hmmm, I am wondering how you could actually implement the random image picker php file to return an image instead of a path and embed it in overall_header.html.
I called the random.php file from my overall_header.

Code: Select all

<?php

/*

	AUTOMATIC IMAGE ROTATOR
	Version 2.2 - December 4, 2003
	Copyright (c) 2002-2003 Dan P. Benjamin, Automatic, Ltd.
	All Rights Reserved.

	http://www.hiveware.com/imagerotator.php
	
	http://www.automaticlabs.com/
	
	
	DISCLAIMER
	Automatic, Ltd. makes no representations or warranties about
	the suitability of the software, either express or
	implied, including but not limited to the implied
	warranties of merchantability, fitness for a particular
	purpose, or non-infringement. Dan P. Benjamin and Automatic, Ltd.
	shall not be liable for any damages suffered by licensee
	as a result of using, modifying or distributing this
	software or its derivatives.
	
	
	INSTRUCTIONS
	1. Modify the $folder setting in the configuration section below.
	2. Add image types if needed (most users can ignore that part).
	3. Upload this file (rotate.php) to your webserver.  I recommend
	   uploading it to the same folder as your images.
	4. Link to the file as you would any normal image file, like this:

			<img src="http://example.com/rotate.php">

	5. You can also specify the image to display like this:

			<img src="http://example.com/rotate.php?img=gorilla.jpg">
		
		This would specify that an image named "gorilla.jpg" located
		in the image-rotation folder should be displayed.
	
	That's it, you're done.

*/




/* ------------------------- CONFIGURATION -----------------------


	Set $folder to the full path to the location of your images.
	For example: $folder = '/user/me/example.com/images/';
	If the rotate.php file will be in the same folder as your
	images then you should leave it set to $folder = '.';

*/


	$folder = '.';


/*	

	Most users can safely ignore this part.  If you're a programmer,
	keep reading, if not, you're done.  Go get some coffee.

    If you'd like to enable additional image types other than
	gif, jpg, and png, add a duplicate line to the section below
	for the new image type.
	
	Add the new file-type, single-quoted, inside brackets.
	
	Add the mime-type to be sent to the browser, also single-quoted,
	after the equal sign.
	
	For example:
	
	PDF Files:

		$extList['pdf'] = 'application/pdf';
	
    CSS Files:

        $extList['css'] = 'text/css';

    You can even serve up random HTML files:

	    $extList['html'] = 'text/html';
	    $extList['htm'] = 'text/html';

    Just be sure your mime-type definition is correct!

*/

    $extList = array();
	$extList['gif'] = 'image/gif';
	$extList['jpg'] = 'image/jpeg';
	$extList['jpeg'] = 'image/jpeg';
	$extList['png'] = 'image/png';
	

// You don't need to edit anything after this point.


// --------------------- END CONFIGURATION -----------------------

$img = null;

if (substr($folder,-1) != '/') {
	$folder = $folder.'/';
}

if (isset($_GET['img'])) {
	$imageInfo = pathinfo($_GET['img']);
	if (
	    isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
		$img = $folder.$imageInfo['basename'];
	}
} else {
	$fileList = array();
	$handle = opendir($folder);
	while ( false !== ( $file = readdir($handle) ) ) {
		$file_info = pathinfo($file);
		if (
		    isset( $extList[ strtolower( $file_info['extension'] ) ] )
		) {
			$fileList[] = $file;
		}
	}
	closedir($handle);

	if (count($fileList) > 0) {
		$imageNumber = time() % count($fileList);
		$img = $folder.$fileList[$imageNumber];
	}
}

if ($img!=null) {
	$imageInfo = pathinfo($img);
	$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
	header ($contentType);
	readfile($img);
} else {
	if ( function_exists('imagecreate') ) {
		header ("Content-type: image/png");
		$im = @imagecreate (100, 100)
		    or die ("Cannot initialize new GD image stream");
		$background_color = imagecolorallocate ($im, 255, 255, 255);
		$text_color = imagecolorallocate ($im, 0,0,0);
		imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
		imagepng ($im);
		imagedestroy($im);
	}
}

?>
In overall_header.html:

Code: Select all

<div id="ja-header" class="clearfix" style="background: url(http://www.{YOUR SITE}/templates/{YOUR TEMPLATE}/images/header/random.php) no-repeat top right;">
Severus Snape
Registered User
Posts: 42
Joined: Fri Mar 07, 2008 2:23 am

Re: phpBB3 prosilver into Joomla ja_purity

Post by Severus Snape »

If anyone can figure out why the drop-downs disappear in Firefox2 when you hover over them that'd be great. I expect a lot of folks haven't moved to Firefox3.

The dropdowns don't display correctly in Firefox2 either (e.g. the forum text shows through).
Bezdan
Registered User
Posts: 28
Joined: Wed Sep 05, 2007 8:45 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by Bezdan »

Can all this be done using the default prosilver?
Severus Snape
Registered User
Posts: 42
Joined: Fri Mar 07, 2008 2:23 am

Re: phpBB3 prosilver into Joomla ja_purity

Post by Severus Snape »

Bezdan wrote:Can all this be done using the default prosilver?
Sure, the modified CSS files I/we used from JoomlArt/phpBB China were a modified prosilver (different colours - I suspect they used colorizeit or something, because the colours aren't quite right IMO). It works with prosilver - I've done it on my test server. I just prefer the prosilver_se colours to anything I can make with colorizeit (all I can achieve with that utility that looks half-decent is a dull grey, much the same as the "ja_purity" phpBB theme I linked to earlier). I tried about half a year ago modifying the colours manually - wasn't fun / I gave up.
Severus Snape
Registered User
Posts: 42
Joined: Fri Mar 07, 2008 2:23 am

Re: phpBB3 prosilver into Joomla ja_purity

Post by Severus Snape »

Re: Drop-down menus in Firefox2 and Camino.

What appears to be happening is that the drop-downs are not appearing on-top (i.e. they seem to be in the background) so when you hover over them, they disappear because the mouse wants to select the forum.

The problem *may* have something to do with class="clearfix".

In my overall_header.html my navigation section reads in part:

Code: Select all

<!-- BEGIN: MAIN NAVIGATION -->
<div id="ja-mainnavwrap">
	<div id="ja-mainnav" class="clearfix">
	<ul class="menu">
	<li class="item1">
{ET CETERA}
Through trial-and-error ( :mrgreen: ), I found that when I removed class="clearfix" the drop-downs would work in Firefox2, but the formatting is off (the phpBB navbar shifts up an inch or so and displays over top of the menu - so the menu buttons don't display properly - they are the same colour as the navbar until you hover over them).
Severus Snape
Registered User
Posts: 42
Joined: Fri Mar 07, 2008 2:23 am

Re: phpBB3 prosilver into Joomla ja_purity

Post by Severus Snape »

In {theme}/tweaks.css if you remove ".clearfix" from the following code then the drop-downs work in Firefox2, HOWEVER the downside is this causes a scrollbar to appear at the bottom as the overflow is no longer hidden.

Code: Select all

.clearfix, #tabs, #minitabs, fieldset dl, ul.topiclist dl, dl.polls {
	height: 1%;
	overflow: hidden;
}
Bezdan
Registered User
Posts: 28
Joined: Wed Sep 05, 2007 8:45 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by Bezdan »

Thanks for the input.

I followed your tutorial described in this post here using prosilver but I had some troubles. After the edit the board looked out of shape, becouse of all that unnecessary css code in template.css so I decided to start from the beginning again. Oh, and the images that I copied to images folder didn't want to load. This time I repeated the procedure but I removed everything from template.css except header attributes. After that the board looked like this. I didn't copy the images becouse I think it has to load the images from ja_purity (still not loading but I'm not giving up) via url. My biggest trouble appears when I try to set the board to fluid width, around 70% - it just distorts everything and aligns it to the left. If anybody knows how to solve this I would be very grateful : )

I keep trying, maybe I'll work something out. Any help appreciated.
Severus Snape
Registered User
Posts: 42
Joined: Fri Mar 07, 2008 2:23 am

Re: phpBB3 prosilver into Joomla ja_purity

Post by Severus Snape »

Hi Bezdan,

If you are running this live, could you send me the link to your site (either post it here or PM me)? It would help if I could take a look.

Where is it that you set the board width to fluid - 70%? Let me know and I can check to see how mine is set.

I'm surprised the template.css file didn't work. Did you use the one from Joomlart / phpBB China? I needed those changes or else the buttons wouldn't align (the hover image was offset), and it fixed various other quirks.

You probably can load the images from their original locations (your Joomla "ja_purity" template), but I prefer to have my Joomla and phpBB totally distinct. Check that you created a subfolder "header" in your images folder, or else just remove the subfolder and put the header images in the "images" folder. As long as they are there and the permissions are set right they should load:

Code: Select all

<div id="ja-header" class="clearfix" style="background: url({T_THEME_PATH}/images/header/header2.jpg) no-repeat top right;">
Bezdan
Registered User
Posts: 28
Joined: Wed Sep 05, 2007 8:45 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by Bezdan »

Hello. I apologize for my late reply.
Severus Snape wrote:If you are running this live, could you send me the link to your site (either post it here or PM me)? It would help if I could take a look.
Sorry, it's on my localhost.
Severus Snape wrote:Where is it that you set the board width to fluid - 70%? Let me know and I can check to see how mine is set.
Well, I included that value into the body attribute of ja_purity template.css, to avoid doing it separately for ja_purity and separately for prosilver. You can set the board width by following this tutorial but afterwards you must also edit your ja_purity header if you want it to look similar. So I thought to cut things short and do it this way. I'm not very skilled with css, but I'm trying, struggling a bit. If you have better idea don't hesitate to try. Anyway, this is the code I included in ja_purity body { :

Code: Select all

width:70%;
margin:0 auto;
It works well with my joomla site template, when I want ja_purity to be fluid width, but when I do it in the same template which I copied to prosilver it just distorts everything and aligns the board to the left.
Severus Snape wrote:I'm surprised the template.css file didn't work. Did you use the one from Joomlart / phpBB China? I needed those changes or else the buttons wouldn't align (the hover image was offset), and it fixed various other quirks.
No, I didn't. When I use phpbb China or default ja_purity template all that css code affects the board. For example, when I use phpbb China template I get grey board background or yellow posting one etc. as opposed to clean look when I remove everything except header attributes from template.css. In fact, it would be good to leave only needed css attributes and remove the unnecessary ones from template to prevent this kind of conflict.
Severus Snape wrote:You probably can load the images from their original locations (your Joomla "ja_purity" template), but I prefer to have my Joomla and phpBB totally distinct. Check that you created a subfolder "header" in your images folder, or else just remove the subfolder and put the header images in the "images" folder.
Oops, you'r right. I don't know how I missed that /header folder. It's allright now.

Anyway, thank you for your kind help. I hope there's some kind of solution for this.
Severus Snape
Registered User
Posts: 42
Joined: Fri Mar 07, 2008 2:23 am

Re: phpBB3 prosilver into Joomla ja_purity

Post by Severus Snape »

Are you using the same template.css file for your main site and your phpBB board? I don't think that will work, but I'm no expert.

To change the yellow colour, in template.css change the following background colour to something else (e.g. white FFFFFF) - you can either define it as white or just delete this code as the default seems to be white.

Code: Select all

.inputbox:hover, .inputbox:focus {

	background: #FFFFCC;

}
And the light-grey background colour is set here (so try FFFFF if you prefer white):

Code: Select all

/* MAIN LAYOUT DIVS

--------------------------------------------------------- */

#ja-wrapper {


	background: #F2F2F2;

}
Isn't the width for the Joomla site actually set in the back-end of Joomla? Can you provide a screen-shot of this:
Bezdan wrote:It works well with my joomla site template, when I want ja_purity to be fluid width, but when I do it in the same template which I copied to prosilver it just distorts everything and aligns the board to the left.
Last edited by Severus Snape on Tue Oct 14, 2008 11:56 am, edited 1 time in total.
Locked

Return to “[3.0.x] Styles Support & Discussion”