SMF For Free Support Forum

"Endless" -- original design/idea created by "Crip"
I think this is one of his best styles - has a nice clean look to it.
Thank you and credits to Celebrus for his "hide tab" scriipt and script to aid with use of the navigation menu.   

Temporary Preview Site



on, off, new_none, new_some images
(use on.png also for new_some -  off.png also for new_none)

http://i102.photobucket.com/albums/m105/mysmileyplace/endless/off.png
http://i102.photobucket.com/albums/m105/mysmileyplace/endless/on.png
http://i102.photobucket.com/albums/m105/mysmileyplace/endless/on2.png


Header Code:   (editing notes at bottom of post)

<!--Jquery - needed for Hide Tab Script in Footer-->
<script src="/jquery.js"></script>

<!--Wrapper and Header -->
<div id="wrapper"><div id="header"><div id="head-l"><div id="head-r">

<!--Logo Image -->
    <a href="/index.php" title=""><span id="logo"></span></a>
<!-- End Logo Image -->
</div></div></div>

<!--Navigation Toolbar-->
  <div id="toolbar">
    <div id="nav">
     <ul>
       <li><a href="/index.php"><span>home</span></a></li>
       <li><a href="/index.php?action=help"><span>help</span></a></li>
       <li><a href="/index.php?action=search"><span>search</span></a></li>
       <li style="display:none"><a href="/index.php?action=mlist"><span>members</span></a></li>
       <li><a href="/index.php?action=staff"><span>staff list</span></a></li>
       <li><a href="/index.php?action=calendar"><span>calendar</span></a></li>
       <li> <a href="/index.php?action=arcade"><span>arcade</span></a></li>
       <li><a href="/index.php?action=gallery"><span>gallery</span></a></li>
      </ul>
     </div>
    </div>
<!--Body Area-->
<div id="bodyarea"><br /><br />

Footer Code:

<!--Footer area and Credit to Crip-->
</div><div id="footer"><div id="foot-l"><div id="foot-r">
<div id="footerarea"><p class="smalltext">"Endless" Theme designed by <a href="http://www.jpr62.com"><b>Crip</b></a></p></div></div> </div></div>

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
if($(".maintab_active_back:contains(Home)").html())
{
   $("li:contains('home')").show().addClass('active');
}
if($(".maintab_back:contains(Members)").html())
{
   $("li:contains('members')").show();
}
if($(".maintab_active_back:contains(Members)").html())
{
   $("li:contains('members')").show().addClass('active');
}
if($(".maintab_active_back:contains(Help)").html())
{
   $("li:contains('help')").show().addClass('active');
}
if($(".maintab_active_back:contains(Search)").html())
{
   $("li:contains('search')").show().addClass('active');
}
if($(".maintab_active_back:contains(Arcade)").html())
{
   $("li:contains('arcade')").show().addClass('active');
}
if($(".maintab_active_back:contains(Gallery)").html())
{
   $("li:contains('gallery')").show().addClass('active');
}
</script></script>
<!--Script to Hide Links from Normal Tab Bar for main tab-->
<script>
//Made by Omikron 9861
$("table tbody tr td.maintab_back:contains(Home)").hide();
$("table tbody tr td.maintab_back:contains(Help)").hide();
$("table tbody tr td.maintab_back:contains(Search)").hide();
$("table tbody tr td.maintab_back:contains(Members)").hide();
$("table tbody tr td.maintab_back:contains(Calendar)").hide();
$("table tbody tr td.maintab_back:contains(Register)").hide();
$("table tbody tr td.maintab_back:contains(Login)").hide();
$("table tbody tr td.maintab_back:contains(Staff)").hide();
$("table tbody tr td.maintab_back:contains(Arcade)").hide();
$("table tbody tr td.maintab_back:contains(Gallery)").hide();

</script>
<!--Script to Hide Links from Normal Tab Bar for main active tab-->
<script>
//Made by Omikron 9861
$("table tbody tr td.maintab_active_back:contains(Home)").hide();
$("table tbody tr td.maintab_active_back:contains(Help)").hide();
$("table tbody tr td.maintab_active_back:contains(Search)").hide();
$("table tbody tr td.maintab_active_back:contains(Members)").hide();
$("table tbody tr td.maintab_active_back:contains(Calendar)").hide();
$("table tbody tr td.maintab_active_back:contains(Register)").hide();
$("table tbody tr td.maintab_active_back:contains(Login)").hide();
$("table tbody tr td.maintab_active_back:contains(Staff)").hide();
$("table tbody tr td.maintab_active_back:contains(Arcade)").hide();
$("table tbody tr td.maintab_active_back:contains(Gallery)").hide();
</script>
css:

/*define h1 */
h1
{
font-size: small;
}
/* Normal, standard links. */
a:link {
color: #1e1e1e;
text-decoration: none;
}
a:visited {
color: #1e1e1e;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited {
color: #222;
text-decoration: none;
}
a.nav:hover {
color: #666;
text-decoration: underline;
}
/* Tables should show empty cells. */

table {
empty-cells: show;
}
/* By default (td, body..) use verdana in black. */

body, td, th, tr {
line-height: 130%;
font-family: verdana, sans-serif;
color: #333;
font-size: small;
}
/* The main body of the entire forum. */

body {
background: #666666 url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/bgbody.jpg) repeat-x;
padding: 0px 0 0 0;
margin: 0;
}
/* Input boxes - just a bit smaller than normal so they align well. */

input, textarea, button {
color: #000000;
font-family: verdana, sans-serif;
}

input, button {
font-size: 100%;
}

textarea {
font-size: 100%;
color: #000000;
font-family: verdana, sans-serif;
}
/* All input elements that are checkboxes or radio buttons. */

input.check {}
/* Selects are a bit smaller, because it makes them look even better 8). */

select {
font-size: 100%;
font-weight: normal;
color: #000000;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
/* Standard horizontal rule.. ([hr], etc.) */

hr, .hrcolor {
height: 1px;
border: 0;
color: #666666;
background-color: #d4d4d4;
}
/* No image should have a border when linked */

a img {
border: 0;
}
/* A quote, perhaps from another post. */
.quote {
color: #000000;
background-color: #DBDBDB;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
line-height: 1.4em;
}
/* A code block - maybe even PHP ;). */
.code {
color: #000000;
background-color: #DBDBDB;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader {
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
}
/* Generally, those [?] icons.  This makes your cursor a help icon. */

.help {
cursor: help;
}
/* /me uses this a lot. (emote, try typing /me in a post.) */

.meaction {
color: red;
}
/* The main post box - this makes it as wide as possible. */

.editor {
width: 96%;
}
/* Highlighted text - such as search results. */

.highlight {
background-color: yellow;
font-weight: bold;
color: black;
}
/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body {
background-color: #FFF;
}
.windowbg2 {
background-color: #FEFEFE;
}
.windowbg3 {
background-color: #FCFCFC;
}
/* the today container in calendar */
.calendar_today {
background-color: #DBDBDB;
}
/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */

.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td {
color: #333;
font-style: normal;
background: white url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/titlebg-1.gif) repeat-x;
border-bottom: solid 1px #e3e3e3;
border-top: solid 1px #d5d5d5;
padding-left: 10px;
padding-right: 10px;
line-height: 18px;
}
.titlebg, .titlebg a:link, .titlebg a:visited {
font-weight: bold;
color: #333;
font-style: normal;
}
.titlebg a:hover {
color: #666;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited {
color: #333;
font-style: normal;
text-decoration: underline;
}
.titlebg2 a:hover {
text-decoration: underline;
}
/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg, tr.catbg td, .catbg3, tr.catbg3 td {
color: #e3e3e3;
padding-left: 10px;
padding-right: 10px;
background: #484848 url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/catbg.jpg) repeat-x;
}
.catbg2, tr.catbg2 td {
color: #e3e3e3;
padding-left: 10px;
padding-right: 10px;
background: #484848 url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/catbg.jpg) repeat-x;
}
.catbg, .catbg2, .catbg3 {}
.catbg, .catbg2 {
font-weight: bold;
}

.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited {
font-size: 95%;
color: #e3e3e3;
text-decoration: none;
}

.catbg a:link, .catbg a:visited, .catbg2 a:link, .catbg2 a:visited {
color: #e3e3e3;
text-decoration: none;
}

.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover {
color: #FFF;
text-decoration: underline;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */

.bordercolor {
background-color: #e3e3e3;
padding: 0px;
}
/* This is used on tables that should just have a border around them. */

.tborder {
padding: 1px;
border: 1px solid #e3e3e3;
}
/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */

.smalltext {
font-size: 90%;
font-family: verdana, sans-serif;
}

.middletext {
line-height: 18px;
text-indent: 10px;
}

.normaltext {
font-size: small;
}

.largetext {
font-size: large;
}
/* Posts and personal messages displayed throughout the forum. */

.post, .personalmessage {
width: 100%;
overflow: auto;
line-height: 1.3em;
}
/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */

.signature {
width: 100%;
overflow: auto;
padding-bottom: 3px;
line-height: 1.3em;
}
/* Sometimes there will be an error when you post */

.error {
color: red;
}
/* definitions for the main tab, active means the tab reflects which page is displayed */

.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last, .mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last {
color: #070707;
vertical-align: top;
text-transform: uppercase;
}

.maintab_back, .maintab_active_back, .mirrortab_back, .mirrortab_active_back {
color: #090909;
text-decoration: none;
font-size: 11px;
font-family: tahoma, sans-serif;
padding: 5px 10px 5px 10px;
}

.maintab_first,.mirrortab_first {
display: none;
}

.maintab_back,.mirrortab_back {}

.maintab_last,.mirrortab_last {
display: none;
}

.maintab_active_first, .mirrortab_active_first {
display: none;
}

.maintab_active_back, .mirrortab_active_back {
color: #000;
}

.maintab_active_last, .mirrortab_active_last {
display: none;
}
/* how links behave in main tab. */

.maintab_back a:link, .maintab_back a:visited, .mirrortab_back a:link, .mirrortab_back a:visited {
color: #252525;
text-decoration: none;
font-weight: bold;
}

.maintab_active_back a:link, .maintab_active_back a:visited, .mirrortab_active_back a:link, .mirrortab_active_back a:visited {
color: #272727;
text-decoration: none;
font-weight: bold;
}

.maintab_back a:hover, .maintab_active_back a:hover, .mirrortab_back a:hover, .mirrortab_active_back a:hover {
text-decoration: underline;
}
/* The AJAX notifier */

#ajax_in_progress {
background: #1d1d1d;
color: white;
text-align: center;
font-weight: bold;
font-size: 18pt;
padding: 3px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
#wrapper {
width: 950px;
min-width: 720px;
margin: 0 auto;
padding: 0;
}
#header {
position: relative;
height: 140px;
overflow: hidden;
background: 0 0 repeat-x;
}
#head-r {
height: 140px;
background: 100% 0 no-repeat;
}

#head-l {
background: 0 0 no-repeat;
}

#logo {
position: absolute;
top: 40px;
left: 20px;
display: block;
width: 275px;
height: 52px;
cursor: pointer;
background: url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/logo.png) no-repeat;
}

#userarea {
height: 83px;
float: right;
padding: 12px 25px 0 0;
text-align: right;
font-size: 1.0em;
color: #ddd;
font-family: arial, tahoma, sans-serif;
}

#userarea a:link, #userarea a:visited {
color: #eee;
}

#userarea a:hover {
color: #ccc;
text-decoration: underline;
}

#searcharea {
float: right;
padding: 2px 25px 0 0;
font-size: 8pt;
font-family: arial, century, tahoma;
margin: 0;
clear: both;
}

#toolbar {
margin: 0;
padding: 0;
height: 26px;
background: transparent;
}
#nav{
 clear:both;
 margin:10px 0 -15px 0}

#nav ul{
 margin:0;
 padding:0;
 list-style:none}

#nav li{
 float:left;
 margin-right:10px}

* html #nav li a{/* Filter for IE6 to prevent li stacking */
 float:left;
 text-decoration:none}

* html #nav li a span{/* Filter for IE6 to prevent li stacking */
  float:left;
  margin-left:4px;
  text-decoration:none}

#nav li a{
  display:block;
  height:26px;
  background:url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/bgtableft.gif) no-repeat left top;
  text-transform:lowercase;
  font-size:10pt;
  font-family:arial,century,tahoma;
  text-decoration:none
}

#nav li a span{
  display:block;
  margin-left:6px;
  padding-left:5px;
  padding-right:12px;
  line-height:26px;
  font-weight:bold;
  color:#FFF;
  background:url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/bgtabright.gif) no-repeat right top;
 text-decoration:none
}

#nav li a:hover{
 background-position:left -26px;
 text-decoration:none;
 cursor:pointer; /* For IE6 */
}

#nav li a:hover span{
 background-position:right -26px;
 color:#000}

#nav li.active a{
 background-position:left -26px}

#nav li.active a span{
 background-position:right -26px;
 color:#000}
#bodyarea {
padding: 10px;
margin: 0;
background: #fefdfd url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/repeater.gif) 0 0 repeat-x;
}

#footer {
background: #666 url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/ftr-bg.png) 0 100% repeat-x;
}

#foot-r {
height: 106px;
background: url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/ftr-r.png) 100% 100% no-repeat;
}

#foot-l {
background: url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/ftr-l.png) 0 100% no-repeat;
}

#footerarea {
text-align: center;
padding: 20px;
color: #fff;
}

#footerarea a:link, #footerarea a:visited {
color: #fff;
}

#footerarea a:hover {
color: #e3e3e3;
text-decoration: none;
}
#footerarea p {
padding-top: 40px;
text-transform: uppercase;
}

#footerarea p a {
color: #FFFFFF;
}

---

Editing Notes:
Links can be added, removed from the navigation menu however you have to do so in both the header and footer code.  To edit them will take knowledge of html.   If you have questions reply to this thread and as I can I'll help you with it.  

If you already have jquery in your header
Remove this part of the Header Code:

<!--Jquery - needed for Hide Tab Script in Footer-->
<script src="/jquery.js"></script>


To put your logo in place of the Endless Logo
Look for the following in the css -  change the url, width and height.   Change the top and left positions if needbe.  Do not use an image any larger then 100px in height.   

#logo {
position: absolute;
top: 40px;
left: 20px;
display: block;
width: 275px;
height: 52px;
cursor: pointer;
background: url(http://i102.photobucket.com/albums/m105/mysmileyplace/endless/logo.png) no-repeat;
}

To remove the "Endless" logo.
Remove the code above from the css.  Remove the following from the Header code:

<!--Logo Image -->
    <a href="/index.php" title=""><span id="logo"></span></a>
<!-- End Logo Image -->


ooooh, I like that, it is going on my site straight away, thanks .

thanks.  You can edit the code for the tabs and put most anything at the top.  Do not try putting the one for My Messages there however.  It will not show you if you have new PMs - the script doesnt work to do that.   I left Admin, My Messages, Profile, Logout in the normal spot.    I removed Login/Register as they are both already near the login box at the top of the forum.

you on a style parade lol very nice btw

lol must seem that way.  I tend to work on 3 or 4 at a time.   When I get cross eyed with one I switch to another.   I have a couple more I want to post but am waiting on approval for one before I do so.  (its way cool)

I hope to see it soon becuase the ones you have posted so far are very good

Hopefully so.   There is a language barrier so I'm not positive it will happen yet.  He does not understand what I am asking and I don't understand how to ask him (due to language barrier) to help him understand.   Replied to his last note - will see how it goes.

Nice work!

Stunning!

Oo err... Sibyl! Look at the forum now... The logo is messed up... Do I need to make it really small to use it?

Didds -  if you replace the information for the logo image that is in the header with this it will work but it does cover the grey part at the top.   It would work better if you DID make the image abit smaller  (then play with the 80px setting in the code to get it where you want it)

<!--Logo Image -->
<div  style="position:  relative;  bottom: 80px;">
    <a href="/index.php" title=""><span id="logo"></span></a>
</div>
<!-- End Logo Image -->