phpBB3 prosilver into Joomla ja_purity

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Suggested Hosts
Bezdan
Registered User
Posts: 28
Joined: Wed Sep 05, 2007 8:45 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by Bezdan »

Severus Snape wrote: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.
Well, I'm currently using phpbb China one. I'm fine with that, as long as it works.
Severus Snape wrote:Isn't the width for the Joomla site actually set in the back-end of Joomla? Can you provide a screen-shot of this
Ofcourse, here's a screenshot (that's actually 75% - I enlarged it so that the main menu doesn't collapse). I've set the fluid width and changed the body background color. I don't know about the back-end, I guess you can do it like that, it's just that I prefer to manually edit the code.
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:I don't know about the back-end, I guess you can do it like that, it's just that I prefer to manually edit the code.
To change the Joomla template width, just log-in to the administration / back-end. Then select the Extensions Menu - Template Manager - Select the template you are using (e.g. ja_purity - I duplicated my template and gave it a unique name so that upgrades to Joomla don't automatically overwrite my modifications). My settings have Template width as "percentage" and specified width at "97".

I have recently started using a logo image in my header instead of text, and I found I needed to make some adjustments to get the image to remain in the same location on the phpBB vs. Joomla site (it was shifting a few pixels to the left or right). Also, I was getting a scroll bar at the bottom of my forum. These changes may not be necessary (if you aren't having these issues, then you probably don't need this):

Edit Joomla template index.php:

Code: Select all

REPLACE:
<style type="text/css">
#ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;}
#ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;}
</style>

WITH:

<style type="text/css">
#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;}
#ja-header {width: 99.9%}
#ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;}
</style>

In phpBB "template.css":

Code: Select all

#ja-header {
	position: relative;
	height: 80px;
	width: 100%; [was 97%]
	margin: 0pt;  [was 0pt auto;]
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}


h1.logo a {
	width: 648px;
	display: block;
	background: url(./images/logo.png) no-repeat;
	height: 80px;
	position: relative;
	left: -7px; [needed to shift the logo]
	z-index: 100;

#ja-mainnav {
	border-left: 0px solid #333333; [was 1px]
	background: #444444;
	width: 97%;
	margin: 0pt auto;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
Bezdan
Registered User
Posts: 28
Joined: Wed Sep 05, 2007 8:45 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by Bezdan »

Severus Snape wrote:To change the Joomla template width, just log-in to the administration / back-end. Then select the Extensions Menu - Template Manager - Select the template you are using (e.g. ja_purity - I duplicated my template and gave it a unique name so that upgrades to Joomla don't automatically overwrite my modifications). My settings have Template width as "percentage" and specified width at "97".

I have recently started using a logo image in my header instead of text, and I found I needed to make some adjustments to get the image to remain in the same location on the phpBB vs. Joomla site (it was shifting a few pixels to the left or right). Also, I was getting a scroll bar at the bottom of my forum. These changes may not be necessary (if you aren't having these issues, then you probably don't need this):
Thanks, might come in handy.

My biggest concern remains that width. I would like to synchronize my site and my board to look alike, both to be fluid width, around 70, 75%. Currently they look like this: the site, the board. Not the same, eh? If only I could get this to work... I need a solution on how to set that properly.

Plus, I had an idea to add a border around both joomla and prosilver. While I know how to do it in prosilver, trouble remains with joomla. I even tried asking on their support site in this topic, but that failed. I never had experiences with joomla support before but this is terrible, really.

Now, to put all this together. Ugh...
arrow816
Registered User
Posts: 78
Joined: Fri Dec 05, 2008 7:14 pm
Name: Steven Costello
Contact:

Re: phpBB3 prosilver into Joomla ja_purity

Post by arrow816 »

Bezdan wrote: My biggest concern remains that width. I would like to synchronize my site and my board to look alike, both to be fluid width, around 70, 75%. Currently they look like this: the site, the board. Not the same, eh? If only I could get this to work... I need a solution on how to set that properly.

Plus, I had an idea to add a border around both joomla and prosilver. While I know how to do it in prosilver, trouble remains with joomla. I even tried asking on their support site in this topic, but that failed. I never had experiences with joomla support before but this is terrible, really.

Now, to put all this together. Ugh...

Well it seams your problem is with you prosilver css.

you could try using prosilver Special Edition. its a narrower forums same style, and looks better with ja purity
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 »

At the risk of causing further confusion, I thought I'd update this thread for others who are attempting these changes. I'm no longer using the "phpBB China" modified CSS files, but have isolated the required changes to the CSS files.

These are the changes I made to update my site for the JA-Purity that comes with Joomla 1.5.8 (and using phpBB 3.0.2 at the time and prosilver_se). I'm using a logo.png, and some of these changes are tweaks to get the image to align consistently on the Joomla site and the phpBB forum:

A) Copy and edit Joomla 1.5.8 CSS files to {template}/theme:

template.css
ja-sosdmenu.css
menu.css

Edit relative URL's within these CSS files: i.e. change the url(../images to url(./images

ja-sosdmenu.css:

Comment out position:relative (so drop-downs work) and other changes as follows:

Code: Select all

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

/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#ja-mainnav ul.menu li a {
	margin: 0;
	padding: 10px 20px;
	border-left: 1px solid #555555;
	border-right: 1px solid #333333;
	display: block;
	color: #CCCCCC;
	font-size: 12px; [Add this]
	font-family: Arial, Helvetica, sans-serif; [Add this]
	font-weight: bold;
	line-height: normal;
	text-decoration: none;
}

template.css:

Remove following (fixes offset hover buttons and funny bullets on Board Index):

Code: Select all

ul li {
	padding-left: 30px;
	background: url(./images/bullet.gif) no-repeat 18px 8px;
	line-height: 180%;
}
Remove following (removes space above "Last visit was"):

Code: Select all

p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
	margin: 1em 0;
	padding: 0;
}
Remove following (removes dashed lines above "Search this forum"):

Code: Select all

fieldset {
	border: none;
	padding: 10px 5px;
	background: url(./images/hdot2.gif) repeat-x top;
}

fieldset a {
	font-weight: bold;
}
Remove (edit post box white instead of yellow):

Code: Select all

.inputbox:hover, .inputbox:focus {
	background: #FFFFCC;
}
Clean up the footer:

Code: Select all

#ja-footerwrap {
	border-top: 5px solid #CCCCCC;
	padding: 5px 0 10px;
	clear: both;
	background: url(./images/grad3.gif) repeat-x bottom #F6F6F6;
}

#ja-footer {
	padding: 0;
	color: #666666;
	background: url(./images/vdot.gif) repeat-y 22% 0;
	text-align: center;
	position: relative;
}


B) Edit {template}/theme/common.css

Code: Select all

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 27px 0; [REMOVE padding]
}

h1 {
	/* Forum name */
	font-family: Arial, Helvetica, sans-serif; [REMOVE Trebuchet FONT]
	margin-right: 200px;
	color: #FFFFFF;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;


p.right {
	text-align: right;
}

[REMOVE BORDER STUFF]

/* Main blocks
---------------------------------------- */
#wrap {
	padding: 0 20px;
	min-width: 650px;
       width: 900px; [REMOVE]
margin: 0 auto; [REMOVE]

}

ul.navlinks {
	padding-bottom: 1px;
	margin-bottom: 1px;
	border-bottom: 1px solid #FFFFFF;
	font-weight: bold; [Original file had this commented out for some reason]

C) Make sure overall_header.html has this before </head>:

Code: Select all

<style type="text/css">
#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: 97%; margin: 0 auto;}
#ja-wrapper {min-width: 100%;}
</style>

I made these changes to the Joomla portion of my website as well:

D) JOOMLA PURITY TEMPLATE UPDATE

1) Remove font size change from Joomla template

In Joomla template index.php comment out:

Code: Select all

<!--	<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?> -->
2) Replace logo.png with whatever you are using

3) Edit Joomla template.css to resize and position logo

Code: Select all

h1.logo a {
	width: 648px; [size of new logo.png]
	display: block;
	background: url(../images/logo.png) no-repeat;
	height: 80px;
	position: relative;
	left: -7px; [shifts logo left]
	z-index: 100;
}
4) Edit Joomla template index.php:

Code: Select all

i.e. replace:
<style type="text/css">
#ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;}
#ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;}
</style>

with:

<style type="text/css">
#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;}
#ja-header {width: 99.9%}
#ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;}
</style>

5) Fix website footer size and dots:

In JA-PURITY template.css:

Code: Select all

/* FOOTER
--------------------------------------------------------- */
#ja-footerwrap {
	border-top: 5px solid #CCCCCC;
	padding: 0px 0 25px;
	clear: both;
	background: url(../images/grad3.gif) repeat-x bottom #F6F6F6;
}

#ja-footer {
	padding: 0;
	color: #666666;
/*	background: url(../images/vdot.gif) repeat-y 22% 0; */ [removes dots]
	position: relative;
}
chi.
Registered User
Posts: 10
Joined: Sat May 31, 2008 3:53 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by chi. »

well, i've spent most of my Sunday getting most of my PHPBB3 integrated into Joomla JA Purity but I have one last thing. the PHPBB3 forum width is 100% while my JA Purity template at 750 pixels absolute width. I need to know where to modify the width of the PHPBB3 board and also center the top header. Here are examples of what it currently looks like.

Image

i would like the phpbb3 forum and top menu centered like above.

Image
chi.
Registered User
Posts: 10
Joined: Sat May 31, 2008 3:53 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by chi. »

I fixed the width of the PHPBB3 board using this tutorial and replacing some code with:

Code: Select all

#wrap {  
   padding: 0 20px;  
   min-width: 650px;  
   width: 800px;  
   margin: 0 auto;  
}
However, the top header is still left justified. The whole bar needs to span across and just the menu items, image and search box needs to be about 750px to match the regular joomla site.
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: phpBB3 prosilver into Joomla ja_purity

Post by Raimon »

chi. ; what is the link to your board?
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!
chi.
Registered User
Posts: 10
Joined: Sat May 31, 2008 3:53 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by chi. »

Raimon wrote:chi. ; what is the link to your board?
hi raimon, the site link to my forums is Chris Pine.

i fixed the problem, tho it's not perfect. the template developer at china bbs helped me out at this thread.
crystalm36
Registered User
Posts: 13
Joined: Wed Dec 02, 2009 12:18 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by crystalm36 »

Has anyone tried tackling to see if this works in JA Purity 2? I have the stable version now and love it but I was hoping that I could use phpbb to work with JA Purity 2 without having to use wrapper. If anyone knows how to do this please let me know. Thanks!
crystalm36
Registered User
Posts: 13
Joined: Wed Dec 02, 2009 12:18 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by crystalm36 »

JA Purity 2 is wayyy different from JA Purity, and I am so lost on how to do this, there is no ja-sosdmenu.css to edit and I am using the mega menu. Plus I already have my website fixed to fit the center of the page with borders. That was a little bit of work to do to get it, but finally I got it.
I read where Rokbridge is currently suppose to be working on getting phpbb and Joomla to intergrate visibly together. This would be NICEEEEE to say the least. I will wait on that, but in meantime, if anyone else would happen to do this successfully, please let me know. I would sooooo appreciate it! Thanks!
crystalm36
Registered User
Posts: 13
Joined: Wed Dec 02, 2009 12:18 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by crystalm36 »

I posted this exact post in Joomla's forum and wanted to share it here too:
wow wow wow I am so happy, before I get too happy I wanted to let you know that I found a fix for my problem, but it's only been tested in IE 7 so other browsers this may not work. I went on and added phpbb3 inside wrapper in my Joomla site. I then had scrollbars on longr pages, so then I decided that I would try and change the scrollbar color, keeping in mind this only takes in IE sooo I thought I would still do it anyways. I went and added this code to my template.css:

Code: Select all

html {
height: 100%;
scrollbar-3dlight-color: #313131;
scrollbar-track-color: #181818;
scrollbar-shadow-color: #303030;
scrollbar-face-color: #303030;
scrollbar-arrow-color: #A19883;
scrollbar-darkShadow-color: #A19883;
scrollbar-highlight-color: #A19883;

}
Notice the height: 100%;
I beleive this is what took out the scrollbars in the wrapper, not sure, I am hoping that I am not dreaming or this is a glitch and then them ugly scrollbars will return. But it's worth trying for anyone that wants to use phpbb3 in Joomla. o yeah and I also am using Rokbridge to integrate the logins together.
crystalm36
Registered User
Posts: 13
Joined: Wed Dec 02, 2009 12:18 pm

Re: phpBB3 prosilver into Joomla ja_purity

Post by crystalm36 »

Ok I knew it was too good to be true, them blasted scrollbars are back..... cryyyyy
deepack
Registered User
Posts: 32
Joined: Mon Jan 21, 2008 10:08 am
Location: France

Re: phpBB3 prosilver into Joomla ja_purity

Post by deepack »

crystalm36 wrote:Has anyone tried tackling to see if this works in JA Purity 2? I have the stable version now and love it but I was hoping that I could use phpbb to work with JA Purity 2 without having to use wrapper. If anyone knows how to do this please let me know. Thanks!
I'm also interested to integrate prosilver into purity ii.
Locked

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