Trying to integrate SMF with website...quick question

[mixx941]

Hi everyone. I've read the tutorial by [Unknown] and it worked earlier today for me, but one of my sites is doing a new layout. When integrating it with the new layout, things aren't going quite as smooth. I've got it almost the same size as the site, but there's one part that I just can't find where to edit.

Here is the screenshot

See all that white space that's filling up most of the page on both sides? I've looked all over for that setting to get rid of it (just trying to get it to match the page background), but I can't find it.

This is 1.1 Beta 3.

Thanks very much!

-Mark

[mixx941]

Okay well I decided to integrate another theme rather than the SMF original. However, I have one additional question.

Where is the code to remove the two borders in the following picture (around the main content and around the category boxes etc)?



In the real theme, I take off the padding to make it the full width, which makes the two borders even thicker. I'd like for there to be no border there. I've looked around and tried many things, but all borders I see are set to 0 and I just can't seem to find this one

Thanks in advance!

-Mark

[bloc]

I would try #bodyarea for the big border and .tborder for the border around the categories..not sure if they are used in this theme, but look in style.css and change them if they are there.

[mixx941]

Hi Bloc. Thanks for your response. That was it.

I do have one more question. From looking at the code, I'm still not sure how to get rid of (or change) the blue line that goes 100% across the screen in this screenshot, and how to get rid of the white below it (would just like the copyright, and then my footer):



I have the copyright like this, which may be the wrong way:

Code Select Expand


// The main content should go here.  A table is used because IE 6 just can't handle a div.
echo '
<table width="700" cellpadding="0" cellspacing="0" border="0" align="center"><tr>
<td id="bodyarea" style="background-color: #FFFFFF;">';
}

function template_main_below()
{
global $context, $settings, $options, $scripturl, $txt;

// Show the "Powered by" and "Valid" logos, as well as the copyright.  Remember, the copyright must be somewhere!
echo '</td>
</tr><tr class="copyright">

<td valign="middle" align="center" class="copyright" style="white-space: nowrap;">
', theme_copyright(), '<br />
&copy; 2003 Aquamania Skin by Andrea Hubacher
</td>
</tr></table>';


Thanks very much again!

-Mark

[bloc]

hm..look for #footerarea..se if it contains any "border" values, and just remove/change that.

[mixx941]

Thanks for the great help so far Bloc. I really appreciate it

I have just a few more questions

1) Something either in the CSS or the template must be pushing the navigation images down a couple pixels, because they aren't lining up with the table and how I have it set. Wondering where this might be:



2) Also in that same screenshot, the buttons are spaced out by a pixel or two. How can I get rid of that spacing so they are right next to each other and smooth?

3) The "User Info" area table seems to be a couple pixels wider than it should be. The code for this looks like:

Code Select Expand


// The logo and the three info boxes
echo '
<table width="700" cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #FFFFFF; position: relative;">
';


Is there some other area for it that I'm missing? If I put it to 100%, then it goes to about 90% of the screen, so this seems like the right code? 

4) Also, I notice whenever going in to my "Profile" and then "Forum Profile Information", the table gets bigger than 700 pixels which I have set them up to be. Have I missed a setting?

Thanks!

-Mark

[bloc]

No problem. These are things I deal with every time I make a theme, so its for the most part known stuff.

1.) and 2.) Most probably because the menu buttons have a margin defined.
Open index.template.php and look for template_menu(). Under there you will see all the buttons, just find the <img> tags and in each of them change probably style="margin: 0 2ex;" to simply style="margin: 0;". It might help with the vertical space, not sure about the horizontal, you might need to remove actual spaces in the HTML code there.

3.) Its done like that to allow for the newsbox and statsbox. If it were set to more it would probably push those out of the display area. If you don't use those boxes, or it works fine, then just use 100% if you like. Test in BOTH Firefox and IE though, they render it a bit different.

4.) Thats because the content sometimes needs more space than specified, and if you haven't defined "overflow: auto" in a style for example, it will just expand more. So, no, its not a setting..its the HTML acting like this. Try to allow for more width.

[mixx941]

1) Seemed to work on the vertical great . Not the horizontal, but I'll look at the HTML again (any ideas what the spaces might look like in the HTML?).

3) I have removed the statsbox completely, and disabled news via SMF itself. Here is what it looks like if I do 100%



However if I set 700, or 600, or 500, it still shows a pixel or so over 700. Am I modifying the wrong thing?

4) I understand that, and thought that might be it. SHouldn't be too big of a problem.

-Mark

[bloc]

- The spacing? Try to remove spacesso that:

Code Select Expand

echo '       <img /> <img />  ';
becomes

Code Select Expand

echo '<img /><img />';

Thats what I meant really.

- the newsbox use some negative values in position to make that "userinfo" button lie "on top" and up a bit of the underlying div. There are also 2 of them div's there..so I would perhaps either experiment with the width or remove the divs altogether, just letting the content stay alone there.

And btw...it looks quite nice from the partial screenshot there.

[mixx941]

Well the newsbox spacing over by a few pixels was two things. I removed a few margins and it reduced the overflow, and then I realized that there was no closing </tr>, </td>, or </table> tags on that table, and in the next line it goes to another table.

So I added in the closing tags and it went to the proper 700 pixel width. However, right after I made that change the color behind that area turned transparent instead of white like it was before the closing tags, and the border around it went away. I'm going through the CSS now to try to find anything, but the things pertaining to color that I changed to get that area background white in the first place are still there. Here is the code from the table:

Code Select Expand


// The logo and the three info boxes
echo '
<table width="700" cellspacing="0" cellpadding="0" border="0" align="center" style="background-color: #FFFFFF; position: relative;">
';

// This part is the logo and forum name.  You should be able to change this to whatever you want...


echo '
</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr id="upshrinkHeader"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
<td valign="top">
<div class="headertitles" style="position: relative;"><img src="', $settings['images_url'], '/blank.gif" height="12" alt="" /></div>
<div class="headerbodies" style="position: relative; background-image: url(', $settings['images_url'], '/box_bg.gif);">
<img src="', $settings['images_url'], '/' , $context['user']['language'] , '/userinfo.gif" style="position: absolute; left: ', $context['browser']['is_ie5'] || $context['browser']['is_ie4'] ? '0' : '-1px', '; top: -18px; clear: both;" alt="" /></td></tr></table>


On the spacing, none of the images have closing </img> tags at all. But I've tried to adjust the spacing of the <a href>s from:

Code Select Expand


echo '
<a href="', $scripturl, '?action=login">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] .

To:

Code Select Expand


echo '<a href="', $scripturl, '?action=login">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] .


...That didn't do much.

Thanks for the nice comments . We're redesigning the site that goes along with this forum, and rather than use phpBB any more, I suggested to use SMF. So we picked out a template, and I've been trying my first little coding project of modifying this to fit the site. After trying many things, learning about SMF in the process, and ALMOST being forced to stop the project and use phpBB with the subSilver theme ( )...I think we're almost done 

-Mark