Topic: Top Alignment problem.

[Black Tiger]

I just installed simpleportal and I like it. 

However, I've got a bit of an alignment problem on top, and I don't know if this is a theme problem, or a portal problem. I think a portal problem, because without portal, I don't have this issue.

Simpleportal 2.3.5. on SMF 2.0.7 is used.

See the attached images. On the portal the top alignment is ok.
But on the forum, the right blocks are a little bit higher. This -only- happens on the forum and on the search page. On the search page it's even a bit more difference.

See the screenshots, I've put arrows in them so point out the alignment difference.
First screenshot is from the portal and all is ok, on the second screenshot, the difference in height is visible if you take a good look.

[Chen Zhen]

  I see you have just center blocks and right blocks on your forum whereas the 2 are not vertically aligned correctly?  The navigation container above it is 100% width therefore atm I do not see what is causing the issue however I can suggest a fix for that theme specifically.

  Attached is a portal css file that you can put into that theme's css folder which will override the default css for that theme.

put the attachment in the directory path:
../Themes/ProRedV1-u/css

  All I did was adjust/add a padding-top attribute to your top block within the css file.
You can adjust the attributes within the css file yourself to fine tune the display. I will put what you need to look for within the file in this code block:

Code: [Select]

#sp_main
{
width: 100%;
border-spacing: 5px;
table-layout: fixed;
}
#sp_header, #sp_footer
{
vertical-align: top;
margin: 0 0.4em;
}
#sp_left
{
vertical-align: top;
}
#sp_right
{
vertical-align: top;
}
#sp_center
{
vertical-align: top;
padding-top:13px;
}


I added padding-top:13px; to the sp_center container because it worked while testing in my browser. However you can change 2 of the containers to what you see below if that does not work as expected:

Code: [Select]

#sp_right
{
vertical-align: top;
padding-top:2px;
}
#sp_center
{
vertical-align: top;
padding-top:0px;
}

Regards.

[Black Tiger]

Wow this is great and fast support!

Thank you very much, I will build it in later today.

Great, thanks!!

[Black Tiger]

I just tried... unfortunately it won't do it all.
If I use it, it makes things worse. So I had to make the second adjustment you suggested.
When doing that, the forum is oke but other things, even the portalpage, is out of sync.

If I change the padding top in #sp_right to 0px then we're back to original.

So it's no global thing but really specific for a couple of them. I can't remember if I had a good look when I tried the other portal, so I can't say if it's the portal or the Theme.

However, I like support here so I stick to this portal anyway.

[Chen Zhen]

  Yes I see that it has to do with the alignment of the first board container. I can think of 2 possible options

• create two Hosting Fun right-top blocks and designate one to show on the portal only and the other to show on the forum but add padding-top to its custom title style

~ or ~

• I can give you a custom edit to the Portal.template.php php file and you put it in that custom theme's directory

  I suggest the first option which you can probably manage to do yourself.

[Black Tiger]

Well if it would work, the second solution might be best.
Because at this time it's a Hosting Fun ad, next time the Adsense will be on top, or it will be another kind of thing. What I'm trying to say is that normally the right side blocks will vary from time to time.

But take your time, this is low priority, no hurry at all.

[Chen Zhen]

Put the attached file into this path:
../Themes/ProRedV1-u

All I did was add a custom style to the sp_right table cell whereas I added padding-top:17px; which seems to align the right blocks with your top board container. The conditional logic should only have it apply where that container is viewed (action=forum).

  It may require your own fine tuning if it does not line up properly when you apply it. To do that just edit the 17px to your own adjustment. The line shown below is in the file at approx. line 87.

Code: [Select]

<td id="sp_right"', !empty($modSettings['rightwidth']) ? ' width="' . $modSettings['rightwidth'] . '"' : '', $context['SPortal']['sides'][4]['collapsed'] && empty($modSettings['sp_disable_side_collapse']) ? ' style="display: none;"' : ((!empty($_REQUEST['action'])) && $_REQUEST['action'] === 'forum' ? 'style="padding-top:17px;"' : ''), '>';


  By putting it in that theme's directory, it will not effect other themes.

Regards.

[Black Tiger]

Great, that almost did it. Almost everything is aligned now, except for the search section. Which also had more difference then other sections before the fix. Nothing changed on that one.

I provided a screenshot.

Maybe a quick question in between. How do I change the "Index" (navbar next to forum on the left) to "Home" like you have here?

[Chen Zhen]

The Index text seems to be what is in your Norwegian language file.

edit the files:
../Themes/default/languages/index.norwegian.php
../Themes/default/languages/index.norwegian-utf8.php       (<-- if it exists)

find:

Code: [Select]

$txt['home'] = 'Index';

replace with:

Code: [Select]

$txt['home'] = 'Home';


The action in the url itself is search??
ie. ../index.php?action=search

[Black Tiger]

Thanks for the code.

Yes correct, the action in the url itself is search, just as in your example.

[Chen Zhen]

  I'm not sure if the vertical alignment is exactly the same because I can not access search as a guest.
Would you be able to temporarily allow guests to use that feature so I can test it?

Regards.

[Black Tiger]

Ofcourse! And done, you should be able to use the search function now. The alignment was a little bit different then the other alignment. A little more height difference.
I think I might have not enabled the English language, so it's the "Zoek" button.

[Chen Zhen]

Put the attached file into this path (overwrite old file):
../Themes/ProRedV1-u

Regards.

[Black Tiger]

Superb!
That fixed it, thank you very much!

[Black Tiger]

I marked it unsolved again.
Reason: I decided to use standalone option.

You've read about my problem and reinstalling Simpleportal again. The custom portal template was not removed.
The funny thing is, at the moment, the search page alignment is ok.
As is the portal page, the help page and the member page.
Downloads, contact and forum are out of sync again.

Could it be there are differences when using standalone option?

[Chen Zhen]

Put the attached file into this path (overwrite old file):
../Themes/ProRedV1-u

An action that does not exist will still cause an issue unless you add the following edit to index.php
File: ../index.php

find:

Code: [Select]

// Get the function and file to include - if it's not there, do the board index.
if (!isset($_REQUEST['action']) || !isset($actionArray[$_REQUEST['action']]))
{
// Catch the action with the theme?
if (!empty($settings['catch_action']))
{
require_once($sourcedir . '/Themes.php');
return 'WrapAction';
}

// Fall through to the board index then...
require_once($sourcedir . '/BoardIndex.php');
return 'BoardIndex';
}

replace with (or just add the obvious 2 changes):

Code: [Select]

// Get the function and file to include - if it's not there, do the board index.
if (!isset($_REQUEST['action']) || !isset($actionArray[$_REQUEST['action']]))
{
$_SESSION['smf_no_action'] = 'none';
// Catch the action with the theme?
if (!empty($settings['catch_action']))
{
require_once($sourcedir . '/Themes.php');
return 'WrapAction';
}

// Fall through to the board index then...
require_once($sourcedir . '/BoardIndex.php');
return 'BoardIndex';
}
else
$_SESSION['smf_no_action'] = false;


Regards.

[Black Tiger]

Oeps, this one made it worse. Now everything is out of line again.

[Chen Zhen]

Tell me your exact setup regarding file paths & urls that you adjusted for this standalone setup.
Also include changes you made to your Subs.php since your forum link is .../forum/index.php

I need to adjust a local installation to the same set up for testing else I will not observe the same behavior.

[Black Tiger]

My PortalStandalone.php is renamed to index.php and present in /home/user/public_html/index.php so in my root folder.
Portal is at this moment setup as standalone. And indeed the forum itself is in /home/user/public_html/forum/index.php as you correctly stated.

Owz... changes to Subs.php? I wouldn't know. I did not manually made any changes to that.
But I've got the following mods installed:
1. SimplePortal - Dutch    2.3.5
2. Remove "Last edit" mod    0.2.5
3. SimplePortal    2.3.5
4. Downloads System    2.0
5. Contact Page    3.2

I don't know if they made any changes to Subs.php.
Would I have this problem with any portal?

[Chen Zhen]

Black Tiger,

  That is a standard setup for standalone but I wanted to make sure before posing another file.


  Ensure the edit that I previously mentioned for index.php was performed.

Put the attached file into this path (overwrite old file):
../Themes/ProRedV1-u

Regards.

[Black Tiger]

An edit to index.php?
Oeps... then I might have misunderstood something. I did not make any changes to the index.php. Would that be the main index.php in the /forum directory or the index.php in public_html (which was named PortalStandalone.php initially)?

[Chen Zhen]

Black Tiger,

  The previous edit was for the main index.php file (../forum/index.php). It just fixes it when someone types in a bogus action into the url.


  The file in the last post should work just fine for you. However I am going to post another replacement file that should be set up simple enough for you to understand how to add your own future custom actions and sub-actions without my assistance.  This is in case you add mods or custom pages that require further corrections.

Put the attached file into this path (overwrite old file):
../Themes/ProRedV1-u

Here is an array that is contained within the file that imo you can figure out how to add to if necessary in the future:

Code: [Select]

$customActionArray = array(
'forum' => 17,
'search' => 21,
'download' => 17,
'contact' => 17,
'pm' => 16,
'pm;sa=send;' => 15,
);

  So when you add something (mod, page, etc.) in the future that requires a fix for the top right block, you just add it to that array contained within the file (approx. line 92). It is set up as: [ACTION] or  ACTION;sa=[SUB-ACTION]. 

  Make sure the entries are lower case as my explanation is just to stress what to do.  Also ensure all sub-actions are at the end of the array.

[Black Tiger]

Oh wow, you're the best, I can adjust it myself now. Just found out that contact was a bit too high, easy to adjust put 2 px less and it works. Great!
I can edit this myself indeed, you made my life easy now. 

Just a last question. Is it just as easy to have the vertical white space kind of the same? Or is this a lot of work? It's not problem if it can't be done the same way, I'm already very happy with all the work you did for me and the horizontal alignment.

I added a screenshot to let you see what I mean, this space differs on some actions:
1 = vertical white space difference
2 = white space difference between main forum and right side column

Again, this has no hurry at all and if it can't be done, I'm already very thankfull for all your work done now.

[Chen Zhen]

  The space at the top under the link tree is actually theme related specifically & not to do with Simple Portal. However, I will show you a simple edit to lessen the space under the link tree.

File: ../Themes/ProRedV1-u/index.template.php

find:

Code: [Select]

echo '
<div class="navigate_section">
<ul>';

replace with:

Code: [Select]

echo '
<div class="navigate_section" style="position:relative;height:0.1em;">
<ul>';


Put the attached file into this path (overwrite old file):
../Themes/ProRedV1-u

  There is now some adjustment that lessens the space between the side blocks and the center. However the exact width is not uniform for the home page compared to all other pages although it is imo close enough.

[Black Tiger]

Thanks! With your tip I can adjust that vertical whitespace myself.

For the portal template, I don't see any visual difference between the previous and the last one after implementation.

There is probably 1 px difference between forum and downloads. Only the search has 2-3px more white space.

On the Portal.template.php I changed the following myself:
1.) download -> downloads (cause the action is called downloads and the aligment works too)
2.) Contact 17px->15px

No other changes made.

[Chen Zhen]

Black Tiger,

Put the attached file into this path (overwrite old file):
../Themes/ProRedV1-u

The array has now been changed to include a left positioning adjustment.

Code: [Select]

$customActionArray = array(
'forum' => array(17, -5),
'search' => array(21, -9),
'downloads' => array(17, -3),
'contact' => array(15, -3),
'pm' => array(16, -3),
'pm;sa=send;' => array(15, -3),
);

The format is:
'[ACTION]' => array([TOP PADDING], [LEFT PROPERTY]),

or

'[ACTION];sa=[SUB-ACTION]' => array([TOP PADDING], [LEFT PROPERTY]),


The default left property integer should be -3 and you can adjust it if you see something not lining up with any custom edits you add.

[Black Tiger]

Thank you, but something still isn't working......
I changed:

Code: [Select]

'search' => array(21, -9),to

Code: [Select]

'search' => array(21, -3),and nothing changed.

However, I think we can't solve this little problem. Because when I have a look with Internet Explorer, the alignment looks very good.
It doesn't change in IE either when I change -9 to -3, but the whitespace is much more equal there between then actions then with Firefox.
In spite of the fact that I don't use cache in Firefox, refreshed the page, deleted the cache, it just looks better with IE.
And I presume these kind of browser specific differences can't be fixed, correct?

[Chen Zhen]

  I found the portal css for the space between cells which will probably work better than the extra edit I added for that display.

  The behavior is different for most browsers. I found that custom theme has many css padding entries not to mention that some of the default template files it uses contain line breaks in some areas which is why the center drops down so much in specific areas.  Imo the only way to get something working as you want is to write a routine that detects the browser and adjusts according to that (ie. using javascript). Also to copy some of the theme files from the default to that theme's directory and edit them to remove various line breaks and/or add custom styling attributes.

  All of this is just something custom for your preference whereas the current appearance/display will be similar for any portal you opt to use. That being said, this is something that is mostly not Simple Portal support specific but rather a custom project to adjust that theme.
 

[Black Tiger]

I already thought something like that. Thank you for explaining.

But even thank you more for all the effort you put in this with all the work. I'm very satisfied with support and very happy my top alignment is adjustable now!

Thanks!!
 

[Chen Zhen]

  Due to the horizontal spacing between blocks in the last template file that was provided, it may be better to use the template file from this post:
http://simpleportal.net/index.php?topic=13243.msg65537#msg65537


For the space between blocks, you can edit the following file:
../Themes/default/css/portal.css

.. you can also copy that file to: ../Themes/ProRedV1-u/css and edit it within that folder if you do not want to affect other themes.

Find this:

Code: [Select]

#sp_main
{
width: 100%;
border-spacing: 5px;
table-layout: fixed;
}

.. edit the border-spacing attribute to something smaller. To have finer measurement control you can use em instead of px whereas decimals can be used. The int number will have be smaller though ie. 0.5em

Regards.

[Black Tiger]

I used the template from the post you pointed to, and changed the px from 5 to 3px in portal.css.
Looks nice! And I can play with it furter if needed, but I think it's good this way.
I don't mind those 2 that differ a bit.

Tonight or tomorrow I will fix the white space in height with the tips you gave me.

Great work, thank you!

[Chen Zhen]

  Sometimes the easiest solution does not come to me, other times right away.
I am going to quote what I just wrote to someone which applies to your situation.

If you installed the theme after Simple Portal, then perhaps try uninstalling Simple Portal & then installing it again. This process will add image files and edit that theme's display template.

Please let me know if that solves the issue.

[Black Tiger]

I don't think so, because I already had my Pro Red theme installed before I installed Simpleportal.
And when I had the problem this week when I changed to stand alone portal, I also uninstalled and reinstalled again.
So in this case it did not work for me.