Newbie here with a simple/basic question....
Is there a TinyPortal API that I can use to integrate SMF into my existing website? Is it possible to use TinyPortal just for the "edit this page" functionality and continue using my own css stylesheet for styling and navigation? I can see that it's possible to have "articles" in TP but what if I want editable pages that are not "articles", they're just ordinary editable pages? Please tell me if there are docs or demos on this.
Thanks in advance for help. :)
Quotewhat if I want editable pages that are not "articles", they're just ordinary editable pages?
That's what articles are. Ordinary editable pages.
I took a site that was a combination of html pages, php pages and an InvisionBoard forum and put it all into a SMF/TP combination. Works great.
The only thing would be that you would need to translate your css stylesheet into a theme. The advantage to that is that you would have a nicely coordinated site, with your forum looking the same as the rest of your pages.
Thanks JPDeni....
If I install TinyPortal, what about Navigation? I have a current website with about 15 static pages. Navigation is via a navbar at the top of the page -for main categories- and then hyperlinks on the side of each page for sub-categories (pulled-in via a ssi-include on each page of the sub-category). When porting a website to Tiny Portal do most people give up their own navigation system and start using some default TinyPortal Navigation system or is it practical to code one's own navigation system when moving over to TP? Also, is it possible/practical to have some static webpages in a website when using TinyPortal or must all pages be stored in a Database?
Thanks again in advance! :)
Take a look in the themes section espressoguy, you'll find lots of them there and you may find some that you would like for your site, most are free plus there are some that are paid.
The short answer to your question is yes, but there are so many ways that SMF/TP can be customized that the only real limits are up to you and how much work you wish to put into the process. You can build a great looking and working site with whats available 'off the shelf' or you can rework and alter many of the features and looks including navigation links and buttons.
Okay but I'm still trying to understand navigation in a TP site[. I have an existing hierarchy in my current website. If I were to port it over to TP, how would I maintain that heirarchy? The heirarchy is very logical and its important that it be maintained.
Well, there's no way for us to figure that out for you without you showing us, or actually describing the heirarchy.
Not sure I understand exactly what you are trying for, but as JPDeni mentioned you could always use articles to pull your existing pages into SMF/TP.
Take a look at the following link to one of my pages where you'll find a series of articles. Some of these pages began life as static pages on my original html website but after adding SMF/TP to my site I have slowly been changing over my old html pages to articles.
See if this is anything like what you want to do:
http://www.ourfamilyforum.org/FamilyForum/index.php?page=110
Quote from: IchBinâ,,¢ on September 05, 2008, 12:37:15 AM... describing the heirarchy.
Quote from: Ken. on September 05, 2008, 12:41:04 AM
http://www.ourfamilyforum.org/FamilyForum/index.php?page=110
Wow! nice looking site! I assume we're talking not about the main page you provided a hyperlink to (which is the "wikistyle" page - I don't want wikistyle) but to the other sections of the site. Thanks IchBin and Ken :)
I'm on my way home now ...
will post a link when I get home to show you the kind of navigation I have in mind.
Thanks, glad you like it. :)
Those 'how-to' pages that the link goes to are set to display only in the Wiki theme, but could be set to show in whatever the forum default theme is, or any theme that is available on the site.
Okay so the kind of navigation I'd like to do is something like what's being explained here (http://woork.blogspot.com/2008/08/elegant-glass-style-navigation-bar.html) (Toggling css div's with javascript) ...but I'd really prefer vertical submenus similar to the ones on this website (http://dhtmljavascriptmenu.com/how-to/how-make-submenu-using-javascript-and-css-with-example.html) ...it's possible to get vertical submenus very similar to this by just toggling css div's with javascript.
I'm trying to get some kind of understanding of what it would take to get this kind of navigation into TinyPortal.
Thanks again!! :)
You could find any script with any navigation like that, and put it right into a block just like this site.
Take a look at my site http://www.morethanspike.com The navigation is by a menu system at the very top of the pages, which I created. Most of the things under "James" and "Features" are either html or php articles.
You can set it up however you want.
Quote from: JPDeni on September 05, 2008, 05:03:42 AM
Take a look at my site http://www.morethanspike.com The navigation is by a menu system at the very top of the pages, which I created. Most of the things under "James" and "Features" are either html or php articles.
Yes that's exactly what I had in mind. So did you do the coding for the navigation yourself by editing appropriate files or did you do it some other way?
Yes, I edited the files. I created a new theme and edited the index.template.php file. I also edited the style.css file to make it look like I wanted.
Quote from: JPDeni on September 05, 2008, 01:50:12 PMYes, I edited the files. I created a new theme and edited the index.template.php file. I also edited the style.css file to make it look like I wanted.
Thanks JPDeni, that helps alot. Help me to understand something.... Is Tinyportal a CMS? I'm familiar with CMS's but not sure how TinyPortal works. If I understand correctly, in most CMS's the pages of the website are stored in the database, not static. Does TinyPortal store pages in the database? Does it give the user any flexibility in page format (Database, Static or some combination)? Does TinyPortal expect the user to create new pages through a "new Page" interface like many CMS's do or is TinyPortal mainly a Theme/SiteIntegration thing? What editor does TinyPortal use when I click "Edit this page" ...it's not FCKeditor, is it?
Thanks; I realize I'm asking alot of questions here but this will give you an idea of the kinds of questions whirrling through my mind. :)
Well.... TP is not exactly a CMS because it's a mod for SMF. It doesn't stand alone.
QuoteDoes TinyPortal store pages in the database?
Yes.
QuoteDoes it give the user any flexibility in page format (Database, Static or some combination)?
I guess not. The content of articles is stored in the database.
QuoteDoes TinyPortal expect the user to create new pages through a "new Page" interface like many CMS's do or is TinyPortal mainly a Theme/SiteIntegration thing?
There's an interface in the admin area.
QuoteWhat editor does TinyPortal use when I click "Edit this page"
There are two editors -- FCKeditor and whizzywig. I don't use either one of them. I just use html without an editor. You can choose which editor to use or not to use either one.
Quotethis will give you an idea of the kinds of questions whirrling through my mind.
The best thing for you to do is to create a test site. Install SMF and TP and find out what it does.
Quote from: JPDeni on September 06, 2008, 12:38:34 AM
The best thing for you to do is to create a test site. Install SMF and TP and find out what it does.
True ...actually I"ve done that, but of course these questions about database storage etc are not immediately evident in the gui interface. Thanks alot for the clarifications. :)
Once you grasp the concept of how TinyPortal 'wraps' around the SMF forum software, you can appreciate how it allows panels in various parts of the screen, which each contain blocks of content you can specify.
By working on a test site, you're not under pressure and can experiment with placement of content...
Try it out, give it a fair chance, and just know that you can always ask for support here. ;)
Thanks everyone for all the valuable help!! :)
I have been trying it out and what I cant figure out is this: JPDeni showed me his site which has nice heirarchical navigation but when I add a new page in my new forum I can't see how it fits in to any navigational heirarchy (if there is a navigational heirarchy). I can't even find the new page showing up on any menu. Of course I can see JPDeni's site; it works and it's TP ....what am I missing?
If you want things to link together you have to create the links yourself. You create an article, then go into the menu manager and add the link to the article if you want it there.
I'm having lots of trouble understanding the menu manager at all. I can't even see how it affects any menu anywhere. When I click "home" there doesn't seem to be any link to the newly-created page anywhere regardless of what I do in menu manager; I've just spent a half hour fiddling with this one feature and trying to find an explanation of it anywhere in the docs or forums.
However, I was really asking about the kind of navigation that JPdeni has implemented in his morethanspike.com site. I'm sure I could figure out how to make all that work if the pages were static but with pages in a a database, I wouldn't understand where to point the menu links (If I understand correctly that JPdeni implemented his navigation manually and not through the menu manager)
Thanks for the help guys! :)
(note: on this demo install, I'm running TPv0.9.8 with SMF 1.1.5 - should I tear-out the install and back the SMF down to 1.1.4?)
Quoteshould I tear-out the install and back the SMF down to 1.1.4
No.
Quotethat JPdeni has implemented in his morethanspike.com site
That would be "her morethanspike.com site". :) The woman in my avatar is me. The man is the actor that my site is about.
The pages that you create via the article system each have a URL. That's what you use in your menu.
I got my menu structure from http://www.cssplay.co.uk/index.html and is a combination of css and html -- the html being in the index.template.php file. I replaced the template_menu function with my own code, using the pattern that I found at CSSplay.
I don't know if it'll help, but I'll post the code for my menu and you might be able to see how it all works.
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;
echo '<div class="menu">
<ul>
<li><a href="', $scripturl, '">Home<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="', $scripturl, '?board=19.0" title="Announcements archive">Announcements</a></li>
<li><a href="', $scripturl, '?page=1" title="All about the site">About</a></li>
<li><a href="', $scripturl, '?page=2" title="What is here and how to find it">Site map</a></li>
<li><a href="', $scripturl, '?page=3" title="Who runs things">Staff</a></li>
<li><a href="', $scripturl, '?action=mlist" title="Our community">Member List</a></li>
<li><a href="http://www.livejournal.com/~morethanspike" title="Offline site information">LiveJournal</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?action=forum">Forums<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>';
if ($context['user']['is_logged'])
{
echo '
<li><a href="', $scripturl, '?action=unread">', $txt['tp-unread'], '</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">', $txt['tp-replies'], '</a></li>
<li><a href="', $scripturl, '?action=profile;u='.$context['user']['id'].';sa=showPosts">'.$txt['tp-showownposts'].'</a></li>
<li><a href="', $scripturl, '?action=bookmarks">Show Bookmarks</a></li>';
}
echo '
<li><a href="', $scripturl, '?action=search">Search</a></li>
<li><a href="', $scripturl, '?board=20.0">Rules</a></li>
<li><a href="', $scripturl, '?action=help">Help</a></li>
<li><a href="', $scripturl, '?board=12">FAQ</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?page=23">James<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="', $scripturl, '?page=4">Biography</a></li>
<li><a href="', $scripturl, '?page=5">Timeline</a></li>
<li><a href="', $scripturl, '?page=6">Articles</a></li>
<li><a href="', $scripturl, '?page=7">Images</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?page=10">Features<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="', $scripturl, '?cat=35">Bleedathons<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="', $scripturl, '?page=11">2003 Bleedathon</a></li>
<li><a href="', $scripturl, '?page=12">2004 Bleedathon</a></li>
<li><a href="', $scripturl, '?page=13">2005 Bleedathon</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?page=24">Toys and Games<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="', $scripturl, '?page=14">Paper Doll</a></li>
<li><a href="', $scripturl, '?page=16">OmniSlide</a></li>
<li><a href="', $scripturl, '?page=17">Easy Concentration</a></li>
<li><a href="', $scripturl, '?page=18">Hard Concentration</a></li>
<li><a href="', $scripturl, '?page=19">Word Search</a></li>
<li><a href="', $scripturl, '?page=20">Quizzes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?cat=39">Shop<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="', $scripturl, '?page=15">Zazzle</a></li>
<li><a href="', $scripturl, '?page=28">Dresden</a></li>
<li><a href="', $scripturl, '?page=30">Amazon</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="', $scripturl, '?action=calendar">Calendar</a></li>
<li><a href="', $scripturl, '?page=8">Links</a></li>';
if ($context['user']['is_guest']) {
echo '
<li><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>
<li><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';
}
if ($context['allow_admin']) {
echo '
<li><a href="', $scripturl, '?action=admin">Admin<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>';
if ($GLOBALS['user_info']['groups'][0] == 1)
echo '<li><a href="index.php?action=tpadmin;sa=blocks">Block Manager</a></li>';
echo '<li><a href="index.php?action=tpadmin;sa=articles">Article Manager</a></li>';
if ($GLOBALS['user_info']['groups'][0] == 1)
echo '<li><a href="index.php?action=viewErrorLog;desc">Error Log</a></li>';
echo '<li><a href="http://webmail.morethanspike.com/src/login.php" target="_blank">Webmail</a></li>';
echo '
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
';
}
echo '
</ul>';
echo '</div>';
}
I also moved the line
template_menu();
to put the menu up at the very top of the page instead of below the banner.
And then I added this to style.css:
/* Menu */
/* style the outer div to give it width */
.menu {font-size:0.85em;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none; height:3em;}
/* style the sub-level lists */
.menu ul ul {width:15em;}
/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {float:left;height:3em;line-height:3em;}
/* style the sub level list items */
.menu ul ul li {display:block;width:12em;height:auto; line-height:1em;}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
float:left;
height:100%;
font-size:1em;
text-decoration:none;
padding:0 3em 0 1em;
border:1px solid;
}
/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {display:block;width:12em;height:100%;line-height:1em; padding:0.5em 1em;}
* html .menu ul ul a, * html .menu ul ul a:visited {width:14em;}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; left:1px; top:0; width:0; height:0; font-size:1em; z-index:1;}
/* style the level hovers */
/* first */
* html .menu a:hover {position:relative; z-index:100;}
.menu li:hover {position:relative;}
/* second */
* html .menu ul ul a:hover{position:relative; z-index:110;}
.menu ul ul li:hover {position:relative;}
/* third */
* html .menu ul ul ul a:hover {position:relative; z-index:120;}
/* fourth */
.menu ul ul ul ul a:hover {position:relative; z-index:130;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:2.5em;left:0;width:14em;}
/* position the third level flyout menu */
.menu ul ul ul{left:12em;top:0;width:14em;}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible; height:auto; padding-bottom:3em;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
And I have another .css file that I use with the colors in it.
/* Menu */
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {background:#6E8189;}
/* style the links for the top level */
.menu a, .menu a:visited {color:#fff;background:#6E8189; border: #000; text-decoration:none;}
/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {background:#A1B9BE; color:#000; text-decoration:none;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#A1B9BE; text-decoration:none;}
/* style the fourth level background */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#A1B9BE; text-decoration:none;}
/* style the sub level 1 background */
.menu ul :hover a.sub1 {background:#A1B9BE; text-decoration:none;}
/* style the sub level 2 background */
.menu ul ul :hover a.sub2 {background:#E6EDEE;}
/* style the level hovers */
/* first */
* html .menu a:hover {color:#000;background:#A1B9BE; text-decoration:none;}
.menu li:hover {position:relative;}
.menu :hover > a {color:#000;background:#A1B9BE; text-decoration:none;}
/* second */
* html .menu ul ul a:hover{color:#000;background:#E6EDEE;}
.menu ul ul li:hover {position:relative;}
.menu ul ul :hover > a {color:#000;background:#E6EDEE; }
/* third */
* html .menu ul ul ul a:hover {background:#E6EDEE; text-decoration:none; }
.menu ul ul ul :hover > a {background:#E6EDEE; text-decoration:none;}
/* fourth */
.menu ul ul ul ul a:hover {background:#E6EDEE; text-decoration:none;}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{background:transparent url(images/trans.gif);}
I have the .css separated because of other things I do with the theme.
All of this is theme stuff.
Quote from: JPDeni on September 06, 2008, 05:31:07 AMThat would be "her ..."
Oops! :idiot2:
Quote from: JPDeni on September 06, 2008, 05:31:07 AM
The pages that you create via the article system each have a URL. That's what you use in your menu.
Oh ...that makes it easy! Thanks for telling me that Deni! Between the code and info you provide and recent study, I'm starting to get the picture. :)
One more question for JPDeni:
Deni, Do I understand correctly that on your morethanspike.com site, if you add a page (an "Article") through TP, and you want to be able to navigate to this new page using the hierarchical system that you have coded, you have to go in and manually add the code to pick up that new page in your hand-coded menu ...right?
Right. :)
I could probably have developed some sort of interface for a menu, but it's not like it's something I would be likely to change often so I didn't bother.
Thanks alot JPDeni. I tried out your code for the menu. It worked great!! ;)