Please explain WHY people LIKE SIDEBARS !?!?!

[ladynada]

Hello everyone,

I am working on a new theme with a sidebar on the left.

I need to know why people like sidebars.

I personally see it as a waste of valuable screen space.

With the stuff up top and a collapse button, you can use the whole width of the screen for the main content.

Please explain to me why you like sidebars?

thanks
nada

[Dannii]

When you have a big screen it's actually a better use of space.. I've read that the optimal reading width of a column is only about 660px (66em I think). And it allows you to display information that otherwise wouldn't be easy to display. Grids are good in designs.

[sportsguy]

I like them as a way to showcase links to other content I offer - keeps all that "other" content handy for users and more likely to be accessed.

It's also a space to integrate ads and generate some revenue.

[talk-zones]

I also see them as an convenient and clear way to provide access to other features of my site alongside the forum.

I was actually using both a right and left sidebar at one point and had made good use of both but I run my own system at a high resolution with a widescreen monitor and the forum looked a bit squashed at lower sizes so I ditched the right sidebar and cut back and merged some of my content to provide it only on the left.

I have always used collapsible sidebars which allows users to maximize the forum at any time, while still able to bring back the sidebar's with a mouse click if they want fast access to anything else.

[Peter Duggan]

When you have a big screen it's actually a better use of space.. I've read that the optimal reading width of a column is only about 660px (66em I think). And it allows you to display information that otherwise wouldn't be easy to display. Grids are good in designs.

While I'm neither for nor against sidebars per se, I agree completely on the readability front (NB font size plays its part here too with optimum line length also being related to the number of characters per line) and often use a tall, narrow (book-shaped?) browser window for text-based sites.

The wider your columns, the more leading your text requires, but I doubt many websites use anything like enough for high-resolution full-screen browsing at typical font sizes by unthinking users.

[ladynada]

I appreciate these responses.

I have toyed around with some code and have the left sidebar in place.  I tried the right one too, today, but came to the same conclusion mentioned here, and cut the right one out again.

I have it now so you can have fader news up top, just under the logo, and can collapse BOTH to just a one liner.

on the left side, I have the guest login which is replaced by avatar and hello user (with link to mail)

under that is forum stats

then search with advanced button

then random news (behaves well on small width on the side)

then latest 10 (configurable) postings only when on boardindex, otherwise it does not appear

dats it...

have a screen shot



I will make this into a dark theme, perhaps black and dark purple

[sportsguy]

Any chance you'd share HOW you got that stuff up on the left hand side ladynada?  I'm looking to do pretty much the same thing myself, but haven't yet figured out how...

[ladynada]

Any chance you'd share HOW you got that stuff up on the left hand side ladynada?  I'm looking to do pretty much the same thing myself, but haven't yet figured out how...

Oh I sure will.  Lemme finish it, or at least get to a clean stopping spot, before I share it.

Ummmmmmm... I have a new screen shot.. now this new idea is to put the LINKTREE on the right side in a sidebar

I am really wavering on this decision... I dunno if it is worth it or not.. it only saves about 3 lines at the top in the middle when you are reading a message.

THREE COLUMN SCREEN SHOT




the linktree, is on the right here, with the forum name, category name, board name, child board name, and message title

[ladynada]

this is my thinking...

I do not have, nor plan to have ads on my site.. but if I make a theme with the linktree on the right side, you could simply insert ads and schtuff there, by adding more <table> tables.  Having the linktree on the side saves the vertical space that it uses.  You could also insert your homepage [website] link above the linktree on the side.

it would just open up the theme to most personal customization, even though, I personally do not like it, I think I should make one for others to customize.

So, I am curious as to what you all think about the linktree on the right side, cuz I could just put some other stats or something there.

thanks for the feedback,
nada

[sportsguy]

I'd personally like to try just a right-side column that's at least 250px wide.   I prefer only one vertical column, but could work with two.

[HoTmetal]

Personally I just like bars j/k
Like Peter, I'm not for or agaisn't them. As long as the site flows nice and I can navigate throught it with out breaking out a compass and other survivor gear... I'm ok...

[ladynada]

Any chance you'd share HOW you got that stuff up on the left hand side ladynada?  I'm looking to do pretty much the same thing myself, but haven't yet figured out how...

Okay, it is always better to understand what you are doing than to only copy what was done.

Today, I am working on stripping out the whole section and starting from scratch so that my tables and trs and tds all line up and match like they are supposed to, and you get xhtml validation when you are done.

What we all need to understand is the flow of CONTROL when the forum main page is displayed.  It is all controlled by the theme files in conjunction with the index.php and its huge $_REQUEST['action'] array.

We do not need to know how to code to arrange things the way we want, but only understand when the code is passing control to which parts of the index.template.php file, and then we just supply the html that we want to display.

okay, so our focus is on the index.template.php file and the very first part that gets displayed to the user is this:

Code Select Expand



// The main sub template above the content.
function template_main_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

.........

.........

}



Look inside your index.template.php at this part shown above and you will see the top part of the html page that the user will be shown.  The important 'code' to understand is that this function starts with an open bracket
{

and will do everything in the code before it reaches the close bracket

}

So, the first thing showed to the user is the function called
template_main_above()

// The main sub template above the content.

this comment is saying that this function shows the top menu section where people usually have their Forum logo and maybe a login section, user logged section with avatar, etc.... all the stuff up to and including the menu bar with all the buttons with the options like search, profile, etc.

Here is the tricky part now:

Remember and realize, that when a user first arrives at your forum screen, that he has NOT chosen any menu options yet, so by default the setup will display the boardindex.  THEREFORE, this same function ALSO displays another function WITHIN IT, a function that you do NOT even see, in the index.template.php file!

aha!

that function is called template_main()  and also will have an open and close bracket

Code Select Expand

function template_main()
{

......

......

}

Open your theme's boardindex.template.php or the one in the default theme, and you will see this function right at the top.

So, you could argue that the setup shows,
function template_main_above()

and then
function template_main()

but, the fact is, if you start a table inside template_main_above() then you must finish it in
function template_main_below()

dont get confused....
Here is the flow of control

function template_main_above()
function template_main()
function template_main_below()

But the key is, that when a user presses a button, the program will call the array and the array will load what the user asked for, and that file will have this in it:

function template_main()

So, in order to do sidebars or otherwise control the entire display before and after whatever the user selects, then you must start your html in

function template_main_above()

and close it out in

function template_main_below()

You will understand this better if you reread it and look at your
own files.




will continue in next messages
nada

[ladynada]

Here is a section of my edited index.template.php.  This section will show you a stripped down look at where the menu buttons are displayed, and then the main content, and then the bottom function.

Code Select Expand



//  The TOP part of the front page STOPPED above this line!


// the menu bar buttons with your forum options comes next

echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
<tr>
<td class="button_back">';
// Show the menu here, according to the menu sub template.
template_menu();
echo '
</td>';

echo '
</tr>

</table>';

// the menu buttons strip ended above

// all the main screen content starts here, so arrange your tables here
// The main content should go here.  A table is used because IE 6 just can't handle a div.

echo '
<table id="bodyarea" valign="top" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>';

// BEFORE this routine ends, whatever the user has selected will be displayed
// And the file that controls what is displayed has to have a  template_main() function
// that function will display and then give control to the template_main_below() function below
// therefore, you must close out any tables started before the template_main function
// close them out at the beginning of this template_main_below funtction below


// the bracket below ends the function template_main_above() section !!

}

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

//  These commands close out the table that was started in template_main_above() at bodyarea


echo '
</td>
</tr>
</table>
<br />';

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!



Here should be a clear example of what I explained in the previous message, how you start a table in the above menu, then whatever the user asked for is shown in the main menu, and you close your table in the below menu, before the copyright and misc logo ads at the bottom

now.. you can make your side bar, left or right or both, because all they are, are <td></td>

so you could put your left side bar in first, then YOU NOW KNOW that the main content will be shown after, and in the middle, and then

you now know you put your right sidebar inside the below function, at the beginning, because that is shown after the main content..

right?  LOL

let me work an another example now.. I hope I can post it here later today..

nada

[ladynada]

okay.. I added a little forum stats code to show a simple side bar on the left. the key here is the colspan="2" and the valign="top" directives.
Below is the code, please see it is the same code as in the previous message, only now, we added the sidebar, and you must RE-OPEN the <td> just before the program will show the user's selected content from the template_main function.

Code Select Expand


// the menu buttons strip ended above

// all the main screen content starts here, so arrange your tables here
// The main content should go here.  A table is used because IE 6 just can't handle a div.

echo '
<table id="bodyarea" valign="top" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2" valign="top" align="center">';

// BEFORE this routine ends, whatever the user has selected will be displayed
// And the file that controls what is displayed has to have a  template_main() function
// that function will display and then give control to the template_main_below() function below
// therefore, you must close out any tables started before the template_main function
// close them out at the beginning of this template_main_below funtction below
echo '
<table class="sidebar200" border="0" cellpadding="0" cellspacing="0">';
// add your left sidebar in here, use the class sidebar200 in sytles.css to set the width
echo '
<tr>
<td class="forum_stats">';
echo '
', $txt[645], '<br />
', $txt[19], ': ', $context['common_stats']['total_members'], ' <br />', $txt[95], ': ', $context['common_stats']['total_posts'], ' <br />',  $txt[64], ': ', $context['common_stats']['total_topics'], '
', ($settings['show_latest_member'] ? '<br /> New User:' .  ' <b>' . $context['common_stats']['latest_member']['link'] . '</b>' : '');
echo '
</td>
</tr>
</table>';

// In order to have user selection display NEXT to sidebar, open another <td>

echo '
</td>
<td>';



// the bracket below ends the function template_main_above() section !!

}

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

//  These commands close out the table that was started in template_main_above() at bodyarea

echo '
</td>
</tr>
</table>
<br />';

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!



here is a pic



nada

[ladynada]

ready to add the right sidebar?

okay so, I changed it to  colspan="3" since now we will have 3 columns (it does not seem to matter, but it is better to put the right html in there just in case)

I added a class for the usercontent so you can control the width in the styles.css

and I put another forum stats for the example, after the user selected content.

Code Select Expand



//  The TOP part of the front page STOPPED above this line!


// the menu bar buttons with your forum options comes next

echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
<tr>
<td class="button_back">';
// Show the menu here, according to the menu sub template.
template_menu();
echo '
</td>';

echo '
</tr>

</table>';
// the menu buttons strip ended above

// all the main screen content starts here, so arrange your tables here
// The main content should go here.  A table is used because IE 6 just can't handle a div.

echo '
<table id="bodyarea" valign="top" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3" valign="top" align="center">';

// BEFORE this routine ends, whatever the user has selected will be displayed
// And the file that controls what is displayed has to have a  template_main() function
// that function will display and then give control to the template_main_below() function below
// therefore, you must close out any tables started before the template_main function
// close them out at the beginning of this template_main_below funtction below
echo '
<table class="sidebar200" border="0" cellpadding="0" cellspacing="0">';
// add your left sidebar in here, use the class sidebar200 in sytles.css to set the width
echo '
<tr>
<td class="forum_stats">';
echo '
', $txt[645], '<br />
', $txt[19], ': ', $context['common_stats']['total_members'], ' <br />', $txt[95], ': ', $context['common_stats']['total_posts'], ' <br />',  $txt[64], ': ', $context['common_stats']['total_topics'], '
', ($settings['show_latest_member'] ? '<br /> New User:' .  ' <b>' . $context['common_stats']['latest_member']['link'] . '</b>' : '');
echo '
</td>
</tr>
</table>';

// In order to have user selection display NEXT to sidebar, open another <td>

echo '
</td>
<td class="usercontent" valign="top" align="center">';



// the bracket below ends the function template_main_above() section !!

}

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

//  These commands close out the table that was started in template_main_above() at bodyarea

echo '
</td>';

// The </td> above closed out the user's selected content, now you can show a RIGHT sidebar
// Open a new <td>

echo '
<td valign="top" align="center">
<table class="sidebar200" border="0" cellpadding="0" cellspacing="0">';
// add your RIGHT sidebar in here, use the class sidebar200 in sytles.css to set the width
echo '
<tr>
<td class="forum_stats">';
echo '
', $txt[645], '<br />
', $txt[19], ': ', $context['common_stats']['total_members'], ' <br />', $txt[95], ': ', $context['common_stats']['total_posts'], ' <br />',  $txt[64], ': ', $context['common_stats']['total_topics'], '
', ($settings['show_latest_member'] ? '<br /> New User:' .  ' <b>' . $context['common_stats']['latest_member']['link'] . '</b>' : '');
echo '
</td>
</tr>
</table>';
// Now close the entire three column main screen window with the closing </td>
echo '
</td>
</tr>
</table>
<br />';

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!



here is the section in the styles.css

Code Select Expand



#bodyarea
/*    the whole forum body not the sidebar though     */

{
width: 100%;
}

.sidebar200
{
width: 15%;
}
.usercontent
{
width: 70%;
}



and a pic



that's it!

nada

[ladynada]

You will want to try out different settings on the width of the sidebar and usercontent in styles.css.  I am only going to use just the left sidebar, and I have just found a good setting for up to font size 14 in firefox, so that you do not get a horizontal scrollbar on the widest screens, like in the profile and some admin screens.

Code Select Expand



#bodyarea
/*    the whole forum body not the sidebar though     */

{
width: 100%;
}

.sidebar200
{
width: 200px;
}
.usercontent
{
width: 100%;
}



Notice that you can set the pixels for the sidebar, and then leave the usercontent at 100% to just be allowed to use all the room that is left over.

nada

[piroman]

I need side bar to put random pix and new pic from gallery, adds, faq links, articles links etc. In any case, side bar if very usable because you can put lot of cool stuff in it. Banners etc are a must have in a sidebar. Now when we're clear on this matter I will try to add sidebar to my theme, and when I fail, I'll cry in this thread about it

Thanks for nice walkthrough in adding side bars!

[ladynada]

okay piroman,
please let me know how it comes out.

Take care on the width of the sidebar, it will wordwrap text, but I do not know what it will do with pictures.  Also, a single word that is SIXTEEN characters long with no spaces, might make a 200px width sidebar, EXPAND and push the main content over to the right.  Just to let you know what limits I have discovered.  This, btw, is at 14 point font in firefox, so naturally most users are at 12 font or lower, so should not be a problem.

that reminds me too, in your <table> commands for stuff you put in the sidebar, it is okay to use width="100%" so that your stuff fills the whole sidebar, otherwise at SMALL FONTS it will leave a gap on the right side, INSIDE the sidebar, and show the background, and look very tacky.

okay,
nada

[piroman]

I'm stuck with gallery2 random img block

When I try to add gallery php code, I get nothing in theme, cry cry cry, could someone help me with this issue?

[ladynada]

I'm stuck with gallery2 random img block

When I try to add gallery php code, I get nothing in theme, cry cry cry, could someone help me with this issue?

Hi,

I am not familiar with gallery or its code.  But do you now how to enter php code together in a file that has html and php code?  You have to code it a certain way so that SMF can tell which part is php code, to execute, and which part is html code, to SHOW.

Look at this simple example, and maybe, even if you do not know how to program in php, you can still cut and paste your gallery code, and it will work... maybe..

Code Select Expand



echo '
<table class="sidebar200" border="0" cellpadding="0" cellspacing="0">';
// add your left sidebar in here, use the class sidebar200 in sytles.css to set the width
echo '



Notice in this example, that the code

echo '

is used to tell SMF okay get ready to display what follows to the user, this will be html

then notice how the html code ENDS with a ';

see that semi-colon tells SMF okay the html that you were showing has ended.. see the end quote and the semi-colon after it, says that what comes next is PHP code or a COMMENT

so you see the comment is next

// add your left sidebar in here, blah blah

comments begin with //

you can only have a comment like that within PHP code, so that would be after a '; (or within some other PHP code)

so the key is, for you to cut and paste your gallery code, make sure you shut off the echo with a '; at the end of the last html coded line before your gallery code

then, before you can show html again, you need

echo '



of course there is more to learn about programming in php with html, but this might work for you

nada