phpbb3 Problems

[med]

Hi,

I’ve been trying for ages to integrate my site with my forum to no avail. Basically I’m trying to make the phpbb3 installation look like my main site (uses Joomla). But I don’t want to use the wrapper, it has some limitations.

So I edited the overall_footer.tpl file and that is all fine. But when I try and play around with overall_header everything messes up. I want to remove the blue header and shift the search bar down and have my own header above that.

Something like this: http://videocopilot.net/forum

Here’s my site: http://tinyurl.com/3gmlvc

My forum: http://tinyurl.com/4nfmho

I would be grateful if somebody could help to get it working. I also want the blue bg around the body, as on my site i.e. The forum shouldn’t span the whole width.

Look forward to hearing from anyone!

[Spunkmeyer]

That shouldn’t be too hard. Just comment out div.headerbar, cut the fieldset that’s surrounding the search field box, pop your div header in and paste the search wherever you want it. Does that not work? What exactly happens when it "messes" up?

[med]

Thanks, I really appreciate the help. I’ve managed to get the elements in the correct order. I’ve tried to work on the positioning of the header and forum, but it’s all to one side.

The header is also being cut off, it should be around 935px wide. Any advice?

[Spunkmeyer]

I assume the whole thing is inside a wrapper of some kind. In any case, just add "margin: 0 auto;" to the wrapper and that should center all of it. Make sure it’s in a wrapper, otherwise you’ll have to add that to every piece of the page that’s considered a container to get it to center.

[med]

Hey,

I’ve been working on it a bit more, and I’m extremely close to getting what I want. Have a look here:

http://tinyurl.com/4nfmho

The only 2 problems remaining:

1. The text size is too big…not sure what part of the css to edit in order for it not to conflict.

2. The forum elements are too close to the edge – need to be squashed a little.

Anyone who has a suggestion please reply!

[Spunkmeyer]

I’m not sure which text you’re specifically talking about, but I assume it’s all the text that appears large… so:

the "Information" H2 tag: Just go into the css and find the h2 selector and add whatever textual information you want: Assuming that the default text size has been set in the body (ie, something like body {font-size:1em;} which will make your default text size 16px tall in most browsers), you could add something like: h2 {font-size: 0.8em} which would give you a font size of roughly 12px. Since header elements are block level, they literally take up a block of space, so they tend to add padding/margins to themselves. If you want to get rid of the spacing around the h2 tag, just add "h2 { padding:0; margin:0;}" So, overall, it would look something like:

h2 {
font-size:0.8em; /*or pixels, whatever you want to use */
padding:0; /* of course, if you want specific padding, you would have to mention each side individally. */
margin:0;
}
Keep in mind that there might be more than one header that uses H2, so that will change as well. If you only want one to change, you’ll have to add a class to it, like <h2 class="something"></h2> and the css selector would be h2.something {info here;}

For the other sections, the same information applies. You just have to edit the proper selector.

In terms of the forum elements being too close to the edge, you could add padding to the parent element such as
#parentelement { padding-left: 5px; padding-right:5px; }

Although, keep in mind when you add padding, you’re adding space to the INSIDE of the element, which effectively makes it larger. In the example above, it would make the element 10px wider than it previously was. In order to get the padding and keep the original width, you’d have to go find the width of the parent element and take 10px off that number.

Hope this helps. If you have any more problems, just let me know and I’ll reply here.

[med]

Thanks once again for helping.

I went back and tried to edit the h2 value, but that didn’t change anything. Then I saw this in the css:

Code:

body.fs3{
font-size: 13px;
}

It’s used in the page here:

Code:

The font size relates to the navigation text. So the text in the menu is 13px, but this styling spills over into the forum. So all the text in the forum is 13px too.

I then deleted fs3 from the css to see what would happen, and sure enough the text size in the forum went back to normal, but of course the navigation text became too small.

I tried to add fs4 (with a smaller font size) just above the forum in the html, but it has no effect, fs3 still dominates. So I think it just comes down to this…need to stop fs3 being expressed in the forum area. But don’t know how :(

[Spunkmeyer]

I’m going to assume you fixed your problem because it looks much better – but let me know if that’s not the case. Also, let us know what the issue was.

[med]

Hey,

yeah I’ve managed to make it look a little better. I tried my best to style the text (both nav and forum) with css, but there was too much conflict. So in the end I decided to set the font size for each menu item using html. I know this isn’t the best solution, but I used the font tag to do this. It only works in increments of 1. 2 was the closest to the correct size for the menu.

Now I need to try your padding solution. But for some reason this has started appearing towards the bottom of the footer:

[img]http://img242.imageshack.us/img242/3425/sctt5.png[/img]
[img]http://img242.imageshack.us/img242/sctt5.png/1/w1150.png[/img]

[fedeisas]

Hi Med, I would suggest you to use Firebug (https://addons.mozilla.org/es-ES/firefox/addon/1843).
With this tool you can actually make changes "live" in your css file and see instant results. It comes very handy when your trying to set typographys and text-size.
And for the white space issue, perhaps you can set a minium-height to the content area. Something like this:

Code:

#page-body {
min-height:500px;
}

Let me know if it helps. Good luck!

[med]

Thanks for the tip :) It’s a very cool plugin, using it now.

I tried to add the min height, but unfortunately it didn’t make a difference. My footer was working nicely a few days ago, but then I made quite a few alterations and now don’t know why the footer is messed up :cry: I fix one thing, but inevitably something else goes wrong!

[Author]

Posts