CSS integration problems

[Automata]

Hello all,

I would like to start this post with the following comment, as it is extremely important to this thread. I have no experience with web coding, but I do know a bit of C++. The syntax seems to be similar to PHP and I can see what options/files do by modifying them and observing the result. Obviously, I'm not stupid when it comes to computers, but you may need to spell it out or ask very specific questions.

I've been assigned the task of creating and administrating a website for our WoW guild. After much discussion with some others in the group, we decided on Joomla 1.5 as a front page and PHPbb forum as the forum. Both these systems work exactly like we want, so are not willing to change either. I've stumbled through modifying the themes and integrating components and I think I have been doing pretty good thus far. I've been working on this specific issue for a few weeks and have stopped making progress.

The main goal is to have the front page match the forum, in terms of looks. How we reach this goal is irrelevant. If it would be easier to simply add the "top" portion of the front page into the PHPbb code itself, I have no issue doing this. Whatever gets it done.

Website front page:
http://enigmadw.com

Forum integration page:
http://enigmadw.com/index.php?option=com_jfusion&Itemid=59

Direct forum link (NO integration):
http://enigmadw.com/forum

Joomla base theme: tx_gravity
PHPbb base theme: melankolia

----------------

Now, onto the problem.

Starting with an example. Here is a broken post and here is the working version. The only difference is the integration. The problem is that the author box is only as wide as the longest word in the table instead of the specified 180px that it should be. Using Firebug, it reports the width of the broken table to be 180px wide, so I'm a bit confused as to what is going on. I was looking at the source code for the page and noticed that there are multiple calls to different style sheets. I've done a little bit of reading on how these work and it seems that the latter one always takes precedence over the first unless it is set as "preferred". I've also fixed an issue where two "div" objects had the same name and cause some graphical errors on the page, renaming one of them fixed it. I attempted to apply that to the current situation, but there is nothing that matches between the CSS sheets. I know that the table for posting calls three 'variables' (not the correct word) from the CSS sheet; tablebg, row1 and row2. The specific one that is displaying incorrectly seems to be "row2".

I've been changing files all morning attempting to fix the problem, but I can't.

Ideas? Let me know if you need more information.

----------------

EDIT: I'm thinking it would be easier to add the menu system to the top of the forum and just ignore "integrating" the two websites. That would fix a lot of problems, including some that I haven't mentioned here. How would I go about doing this? Do I just need to find the PHP code that creates/calls the menu system and simply drop it (modifying paths where necessary) in the PHPbb code?

 

[Automata]

Bump

 

[Automata]

No one has any ideas? I find the lack of responses disheartening.

 

[pcarini]

Trying to get an exact match between those two templates will be pretty tricky, since the HTML is completely different. If you don't mind putting in the effort, it's probably easiest to start from scratch by removing the existing stylesheets for the templates. (or perhaps easier, removing all of the styling from the phpBB templates, since Joomla templates are much more involved) This would leave you with (mostly) unstyled content.

To ensure a complete reset, I'd use Yahoo's YUI CSS Reset. Their CSS Base is a pretty good starting point for getting back to basic styling.

Once you've got your baseline, check to be sure the mostly unstyled page looks similar between the two sites. If not, find out what's different and fix it before moving on (of course phpBB's table-based layout may never exactly match your Joomla template's div-based one, so you'll have to decide how precise you want to be.)

Now start with the CSS for whichever template you like the best and add its rules to both sites, checking to be sure the changes show up on both. If not, most likely the CSS selector for one of the rules doesn't apply to one of the sites. (i.e. a CSS rule with a selector like "div.joomla-div-class" won't have any effect on your phpBB site, since it doesn't have a div w/ that class. You'd modify the selector for the phpBB site's stylesheet to select whatever the corresponding element is.) Sort these differences out and repeat until you're happy.

Oh, and get the FireBug addon for Firefox if you haven't already, it's still the best browser based website debugging tool.

This will also help: W3Schools CSS primer

EDIT: I can't see the working version on your example problem, it gives this error "404 - The JFusion plugin is not properly configured. Therefore the software can not be displayed."

 

[Automata]

I tried your suggestion by adding a reset and it does not fix the issue.

If you use firebug on the broken link, you can actually see that it has a reported width of 180, even though it clearly is not 180 wide. This is why I'm confused. Nothing I change will fix that. I've even gone through and done the following:

http://wiki.jfusion.org/doku.php?id=phpbb:frameless

 

[pcarini]

I've got to apologize for my lack of clarity, I wasn't suggesting you just tack the YUI css reset into the existing css, but that you remove all of the existing CSS and start from scratch w/ the phpBB CSS on your own.

Turns out that the Joomla theme CSS, which you are including in your phpBB templates already has a reset built into it.

Your problem is also in the joomla base css, which includes a 'typography.css'. Here they do this:

table       { margin-bottom: 1.4em; width:100%; }

If you delete the width bit from that rule, your problem will go away. So the Joomla CSS sets a global rule that probably isn't an issue w/in Joomla itself, but doesn't work when applied to your phpBB theme. If possible, try to structure your phpBB template so that the Joomla css files come first (all of them) and then phpBB's come after. That may help somewhat. You might also consider wrapping the entire phpBB template in its own wrapper div, giving that div a class, and then using that to make more specific rules. It'll be tedious, but should work.

I tracked down which line was causing the problem by using Firebug. You can delete elements from the HTML in firebug and see how it changes the page rendering, so I went through and deleted <link> tags until the problem went away. After I knew which file it was (Joomla's base.css,) I then edited that file in firebug and removed lines again until it was fixed. That pinpointed "typography.css", which I then poked around in and spotted a section for table styles. Removing the section fixed the problem, after which I narrowed it down to that single line.

 

[I.M.O.G.]

Thats a really good explanation, thanks.

 

[pcarini]

Thank you. It made a lot of sense as I was typing it but not so much when I went back through and read it again, so I'm glad it didn't come across as complete gibberish

 

[Twigglish]

Sorry I haven't gotten back to via email man. I've been out at another base.
I can't check what pcarini noted above from where I'm at, but if that doesn't fix it for you let me know and I'll get back to you when I get back to my base(1-3 days)

 

[Automata]

Well, it fixed that issue. Thank you very much. My forehead hurts after a week of trying to get that corrected since it was one of the biggest issues holding us back.

Now, there are still a few quirks left that I need to fix.

My question is, it seems there are some CSS entries that share the same name ("table", as in this previous example), can I simply go through and rename each entry to something like "phpbb_table" and update all the forum files? I don't want to keep deleting entries since that may break something on the Joomla page and it seems that changing one of them will either fix or break one site. I know that doing this by hand is going to be a task upon itself, but it is going to be far faster than me trying to fix each problem individually.

 

[Khemikal]

Another reason why I keep putting off making a website. I see people who do this stuff all day and still have problems with it. Looks like you are making some progress Thid.

 

[Automata]

Agreed, but once we get this done, I won't have to do it again. So I'm getting really close.

 

[pcarini]

The problem is really the whole "integration" part. Why did you choose to embed your phpBB inside your Joomla site? Generally people choose to install them separately from each other to avoid the sort of headaches you're encountering now.

That said, if you like your Joomla template I'd recommend against changing it, even to remove that table width. Instead, if you absolutely MUST share the same CSS between your Joomla and phpBB installs, edit your phpBB's html template to wrap the entire phpBB instance in a <div>. Give this div either an id or a class that isn't used in your Joomla templates, then use this class to make more specific rules for the things you need to change. With our current example you'd add a CSS rule to the effect of

div#my_phpbb_div_id table { width: auto; }

Unfortunately, not all CSS attributes can be easily reset back to default, especially the ones for table elements. Just another reason why keeping the installs completely separate helps out.

 

[Automata]

Adding it in div did not fix it. I followed this and it did absolutely nothing:

http://wiki.jfusion.org/doku.php?id=phpbb:frameless

-------

I would keep the two separated, but I have no idea how to make them look the same. They want it to look like it is part of the Joomla page. So all it would need is the space up top (easy) and the menu with the date. That last part is not something I know how to do. It would be the far easier option if I knew what I was doing.

If you could point me in the direction of a good source or give an example, I could tinker with it to try and get it to work.

 

[pcarini]

The date thing is pretty basic, just use the PHP date function. Something like this will do it:

<?php echo date('l, F d, Y');?>

As for the rest of the CSS issues, you're going to have to play whack-a-mole with them. There is no single CSS command or HTML tag you can add which will fix them in one step, you'll have to use troubleshooting steps to find which CSS rules are conflicting and override them or work around them. I'm sort of surprised that that forum page looks as normal as it does considering that you've mashed two completely different software packages together into a single page. Solving the issues caused by that require an understanding of how CSS interacts with HTML to style the page, and some serious tweaking on top of that.

I'd suggest you go through that W3Schools.com CSS tutorial and make sure you understand the concepts there, as nothing else involving CSS will make sense until you've got the basics down. Of particular importance to your problems are how CSS selectors work, and how the id and class selectors interact with the HTML attributes of the same names. Equally important is an understanding of _which_ css rules apply among multiple conflicting ones. Once you have a handle on these concepts then you can intelligently attack your problems. Until then you're just flailing.

 

[Automata]

I had to fix a few spacing issues, so the forum didn't look like that at the beginning. It looks the way it does now because I put a lot of time into "trial and error" fixes. I just couldn't figure out what was wrong with this one.

Basics wise, I think I have a decent understanding considering I have no experience outside of this website and have done little to no research on the subject. I'll give their tutorial a look over, though.

 

[Automata]

Got a lot of the issues fixed tonight. Turns out the reset.css was causing huge issues with PHPbb. I had to comment out a few lines/options to get it to display correctly and then do a bunch of changes to the forum template so there were no CSS collisions. Only "large" issue is with the top image displaying incorrectly. Really close to getting this completely done.

Thanks for all the help!

 

[jayfella]

im pretty fluent with Joomla + phpbb3, in fact i have a site with this exact setup, including an "integrated" skin as you mentioned you wanted. Its a hell of a lot easier to modify the phpbb3 theme than it is the Joomla theme, so i would personally find a Joomla theme you want and mod the phpbb3 skin into it. Im not sure if you wanna put your efforts down to experience and start again or not, but it does sound like you are taking on a mammoth task for a beginner if i may be so bold.

http://www.RocketTheme.com has Joomla + phpbb3 themes that are exact copies, so there is no need to mod anything, if you wanted to go down that route, though i must admit, I am a registered customer for both the Joomla and phpbb3 skins, and they are a little bloated in terms of coding and imaging, though they are very professional and work completely cross-browser.
There is also a handy tool from RocketTheme called RokBridge: http://www.rockettheme.com/extensions-joomla/rokbridge
This allows you to use Joomla as a sign-up front-end, and synchronises phpbb3 with the user database. End result = when you sign up @ Joomla, the user is automatically a member in the forum, and the session carries over, so when you login, your logged into both Joomla + phpbb3.

Anywho, i do this kind of thing for a living. I usually charge of course but i think i can stretch to some freebie action since this place is and has been so friendly to me
It is of course easier to do than explain(!) but im sure we can sort something out step by step.

Little hint, if you start to scratch your head, your probably going the wrong way about it. Sounds obvious but its a good piece of advice.

 

[Automata]

I already have the bridge, that wasn't the issue.

I got everything squared away, though. You can check out the site using the links in the first post. I literally did this blind. The only PHP I know is what I taught myself from reading code and tinkering with existing code; I haven't wrote anything from scratch (not even "Hello World!" stuff). The only web-based languages I know is HTML and that has been around 6 years since that class, and it was a very basic introduction. Thanks for the offer, though. If I hit any rough spots, I may hit you up in the future since you seem to be familiar with this.