Alignment

[bobbank]

Hi folks.  I am a complete noob and just recently converted my forums from phpbb3 to SMF.  Last night I installed Tinyportal, but I have not yet had time to really work on it.

The first thing I noticed is a minor alignment issue and I was wondering if I'm overlooking something or you could help me here.  If you go to my site, that is the easiest way to show:

http://sohguild.org/

Why does the Article start at  a lower vertical position than the blocks on the side?  I would like it if the top of the Article's frame lined up with the top of the User frame, for example.  Did I do something wierd when I set it up?

Thanks!

[Zetan]

Welcome to TinyPortal.

It's the way that this version has been designed. Thats not to say it can't be changed.
Why don't you try some different themes, many will display the hompage differently to the default theme.

There are topics on the site that will help you move or remove the Link Tree, which is whats causing the center panels and articles to move further down the page.. and then there are the panel Shrink buttons, which you don't seem to have enabled.

[bobbank]

Thank you for your reply.

Is the link tree the series of hyperlinks that appear right above the article?  If so, that does not fully explain the alignment issue.  For example, if you could please visit my site again, and change themes to Adagio.  On that one, those hyperlinks are moved out of the way.  But the article still appears vertically lower than anything else.

Is there some other item that I am missing?  Or is the only work around to put a block up top, so that it will be aligned with the top of the other blocks?

[Zetan]

The Link Tree is created using SMF's functions, which creates the Hyperlinks.

Each theme folder has a file called: index.template.php
If a theme doesn't have this file, it will use the one from the Default Core Theme, the one that you first see after installing SMF.

Below is the code that makes up the Default Core Theme's Link Tree (Other themes may be different).

Code Select Expand


// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree()
{
global $context, $settings, $options;

echo '<div class="nav" style="font-size: smaller; margin-bottom: 2ex; margin-top: 2ex;">';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo '<b>', $settings['linktree_link'] && isset($tree['url']) ? '<a href="' . $tree['url'] . '" class="nav">' . $tree['name'] . '</a>' : $tree['name'], '</b>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo '&nbsp;>&nbsp;';
}

echo '</div>';
}


I strongly suggest that you don't change any aspect of the Default Theme.. You have the option to make a copy of the Default theme in your Admin panel, under themes. You can play with the copy all you like.


You can either, move that code up or down in the index.template.php file, comment it out, or remove it. I don't suggest removing it as it's a very useful navigation tool.

[bobbank]

OK thank you for all that information!  Using this, I was able to modify the padding for Adagio's linktree, so I could confirm exactly what we're talking about.

The linktree is not what is creating the alignment issue.  For some reason, TinyPortal "indents" the center panel by one vertical line.  So, articles or even the forum, which show up in that panel, start lower in the screen than blocks on the left or right.  You can even highlight the skipped line.. it's as if it puts in a carriage return + line break for no reason, before it starts rendering whatever content you want showing up in the body of the site.

This is the thing I'm trying to fix.  It's not the linktree, which in Adagio is moved up and completely out of the way.

Any ideas what I need to edit, to change that?

It is a feature that every style I've tried so far shares, so it seems to be basic to Tinyportal.

[Zetan]

Yes, there is some padding in TPBlockLayout.template.php or TPBlocks.template.php, I can't remember which.. I think it's set at 15px maybe?

If you download: Firebug for Firefox, you'll be able to quickly find what the elements are. Its a great tool.. Get it.

[bobbank]

Ah, that's where I need to look then.  That firebug tool looks sweet.  I will have to install that once I get home.  (I'm at work all day so pretty limited with what I can try until I get home.)

Once I figure out the part that needs to be changed, I'll post my findings here, in case others would like to do the same.

[Zetan]

(I'm at work all day so pretty limited with what I can try until I get home.)

I'm at work too and can only post here when I get some quiet times.. and seeing as this place moves at snails pace, sometimes thats quite often.

And my ISP reeeeally need to fix my dang connection at home... it's been well over a month now and I'm gonna go ape soon.

[bobbank]

This Firebug tool is amazing!  Sorry for the tangent, but: is there a way to save your changes from Firebug?  I can't seem to figure it out, and I prefer that to opening the file and then duplicating the changes I make there.

[IchBin]

Nope, thats why I usually have the files I need opened up in an editor. Then apply the changes as I make them if they work. If not, refresh the page.