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
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.
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. ;)
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. :)
Quote from: eldʌkaː on April 29, 2007, 01:35:17 AM
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.
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
(http://heartdaughter.com/Downloads/twocolumn.jpg)
I will make this into a dark theme, perhaps black and dark purple
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... :(
Quote from: sportsguy on April 30, 2007, 11:22:47 AM
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
(http://heartdaughter.com/Downloads/threecolumn.jpg)
the linktree, is on the right here, with the forum name, category name, board name, child board name, and message title
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
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.
Personally I just like bars :D 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...
Quote from: sportsguy on April 30, 2007, 11:22:47 AM
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:
// 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
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
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.
// 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
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.
// 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
(http://heartdaughter.com/Downloads/sidebar_tutorial_01.jpg)
nada
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.
// 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
#bodyarea
/* the whole forum body not the sidebar though */
{
width: 100%;
}
.sidebar200
{
width: 15%;
}
.usercontent
{
width: 70%;
}
and a pic
(http://heartdaughter.com/Downloads/sidebar_tutorial_02.jpg)
that's it!
nada
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.
#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
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!
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
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?
Quote from: piroman on May 14, 2007, 03:20:27 PM
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..
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
Well, first of all I didn't know that I liked sidebars ;)
But then again... after a second thought...
Maybe it's nice since my laptop is running 1200x800
and that gives me more space on the sides than on the top/bottom.
Sammy :)
For the most part I dislike them with the exception of those rare times when they provide either information that I need or those times that they make my navigation more simplified/quicker.
If you dislike them, it's only because you haven't seen them used properly. Which is fair enough... it is pretty rare to see them used properly.
Quote from: eldʌkaː on May 14, 2007, 08:38:27 PM
If you dislike them, it's only because you haven't seen them used properly. Which is fair enough... it is pretty rare to see them used properly.
I believe that I have been converted, because while working on this theme with a left sidebar, I am so used to it, then when I go to my live forum, I keep pointing over there for everything!
I like it alot.
I was able to leave some code in there with commented instructions for adding a right side bar.
regards,
nada
Dear Nada,
THANK YOU! You made my wish come true! I have a random img block form gallery in my smf site now, but I still have to ask you for small help. After I've added your example left sidebar, to my aero79 theme, my forum shrunk, could you help me fix this issue?
(http://www.ciklidi.org/slike/suzenje.jpg)
Quote from: piroman on May 15, 2007, 09:39:55 AM
Dear Nada,
THANK YOU! You made my wish come true! I have a random img block form gallery in my smf site now, but I still have to ask you for small help. After I've added your example left sidebar, to my aero79 theme, my forum shrunk, could you help me fix this issue?
<snip picture>
Looking at the photo, because your logo is full size, I suspect you have an html code after the menubar section that is limiting your template_main section to less than full width.
If you added this to any html : class="sidebar200"
and you set this in your styles.css
.sidebar200
{
width: 200px;
}
or something like that, then check to see that you have these things set the way you want.
if it is not that, then if you used this section of code below, then look here for something..
// 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 !!
Look here at the bottom part where you open a new td for your main body section, which has shrunk.. did you open a new table there? did you set the width="100%" there... something like that
also, when looking to solve these kinds of problems, go ahead and use the xhtml validator button at the bottom of your forum
http://validator.w3.org/check/referer
and use the... Revalidate With Options and check the Show Source button and run it again, then it will show you where the errors are in your code! this helps me fix the table-tr-td mis-matches
lemme know how you make out.
I am sooooo glad you got the gallery to work.
nada
lady, it depends on the theme, tbh, when i design a theme i think of how i want it to look and try both normal and side and see what one works with the theme :)
Neither is better nor worse
ladynada ~
Thanks for all of your explanations. You are very thorough and clear.
Do these directions work for all themes or just the Default? I am using the Electron theme, and I can't seem to get that right sidebar up that I want so desperately to be there.
Teaberry,
In general the instructions should 'help' you to make the same adjustments for all themes. I am not familiar with the electron theme, but if you approach the task by understanding what that theme is doing, then it will dawn on you where to intervene to make your right sidebar.
Sometimes I practice by taking a section OUT of a theme, and then looking to see how it comes out, to understand how the theme is displaying.
The flow is the most important thing to understand; above - main - below
If you have some specific code for me to look at, maybe I can help you figure it out (with God's help).
nada
Thank you nada. If you don't mind, which pages of code would you like to see?
Quote from: Teaberry on June 05, 2007, 09:22:47 PM
Thank you nada. If you don't mind, which pages of code would you like to see?
here is the link to the theme for anyone who wants to peak at it
http://custom.simplemachines.org/themes/index.php?lemma=67
This is a very nice theme!
Well, I am thinking that the most important issue is what are you trying to put in the right sidebar? Also, are you trying to make a THREE column theme out of it? Are you putting BOTH a left and right sidebar?
Please let me know, and I can probably just install the theme on my home pc and add the right side bar and post the code here for you. It would go in the Index.template.php file.
lemme know please,
nada
Nada ~
I am trying to place just a right sidebar. I'm interested in placing mainly links there and some click-thrus. Nothing seems to work!
Thanks for your efforts. I really appreciate it! How nice.
Hi,
I see why you had problems because quite a bit of the code is already modified. I used the example I posted here and was able to make a little forum stats table in a right sidebar, and it held its spot through all the other forum options, and no errors in the forum log.
Here is the code, and you will find where it goes by looking at where this begins and ends.
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" width="200px">
<table border="0" cellpadding="0" cellspacing="0">';
// add your RIGHT sidebar in here
echo '
<tr>
<td>';
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 two column main screen window with the closing </td>
echo '
</td>
</tr></table>';
// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '
Hope that works for you!
nada
Nada - that was a great help!!!!!
I'm presently working on it and tweaking it, but the right sidebar has made its guest appearance!
When I'm done I'll post my site and you can see. Many thanks again! How wonderful of you to help me.
no problem hunnie bunnie
:)