ITS HERE!!! Yahoo styled tabbed content

RoarinRow · October 29, 2006, 11:24:03 PM

Quote from: Aku on October 29, 2006, 11:11:29 PM
instead of naming the folder "avstabs" try "moofx"

also try not to use BB codes (they may work or not - but i havent tested them yet)

Also one very important point...open up the CSS file and do this:
http://www.tinyportal.net/smf/index.php?topic=7915.msg81398#msg81398

I tried that and it still didn't work. I changed from 'avstabs' to 'moofx' and removed the BB codes. Also updated css file.

Code Select

<head>
<title>About AVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/moofx/prototype.lite.js"></script>
<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/moofx/scripts/moo.fx.js"></script>
<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/moofx/moo.fx.pack.js"></script>
<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/moofx/moo.fx.config.js"></script>
<link href="http://www.avalanchestyle.net/forum/moofx/template_css.css" rel="stylesheet" type="text/css"/>

</head>



<div id="spotlight">

      <ul class="headtab-wrapper">
                <li class="headtab" id="headtab-1">
          <a>Welcome</a>
        </li>
                <li class="headtab" id="headtab-2">
          <a>Did you get tagged?</a>
        </li>
                <li class="headtab" id="headtab-3">

          <a>Did you know?</a>
        </li>
                <li class="headtab" id="headtab-4">
          <a>Events</a>
        </li>
      </ul>


      <div class="sl-wrapper">

                <div class="stretcher" id="stretcher-1">
		<div class="moduletable">
		  		
Welcome to AvalancheStyle.com!

We are a Chevy Avalanche community and welcome all truck enthusiasts.  There's no charge to look around because we are a FREE forum.  Register to view all categories and features of the site.  It only takes a minute.  

Member's benefits:

Open forum to discuss our beloved Chevy Avalanches
Downloadable Chevy Avalanche related material
Streaming video, music, and live TV

- 800+ arcade games
- Photo gallery
- Chat and AVS Shoutbox!
- Selectable themes and collapsable modules
- Monthly newsletter
- More. . .

AVS archives:

News - http://www.avalanchestyle.com/forum/index.php?cat=54
How To's - http://www.avalanchestyle.com/forum/index.php?cat=373

Other useful links:

Search Wikipedia - http://www.avalanchestyle.com/forum/index.php?page=69
Yahoo! Top Stories - http://www.avalanchestyle.com/forum/index.php?page=52
Fresno Calendar of Events - http://www.avalanchestyle.com/forum/index.php?page=82
AVS Frappr Map - http://www.avalanchestyle.com/forum/index.php?page=60
AVS Flash Gallery - http://www.avalanchestyle.com/forum/index.php?page=15
Link Exchange - http://www.avalanchestyle.com/forum/index.php?topic=2491.0

		</div>
		</div>
                <div class="stretcher" id="stretcher-2">
          	<div class="moduletable">

		
If you got tagged by one of our members, be sure to post in this thread - http://www.avalanchestyle.com/forum/index.php?topic=4004.msg81027;topicseen#new

		
		</div>
		</div>
		        
                <div class="stretcher" id="stretcher-3">
		<div class="moduletable">
				
There's alot to see an do on the site.  Start with our 'Did you know?' section - http://www.avalanchestyle.com/forum/index.php?topic=4004.msg81027;topicseen#new

Did you know we have over 20 different themes to choose from?  We do!  Find out how in our 'Did you know' section.
			
                </div>
                </div>

                <div class="stretcher" id="stretcher-4">
          	<div class="moduletable"> 

Come meet the AVS members at the next get together.  Check the calendar or Events master list - http://www.avalanchestyle.com/forum/index.php?topic=4004.msg81027;topicseen#new

                </div>
		</div>
     			<script language="javascript" type="text/javascript">init();</script>
	</div>
</div>

Here's what it looks like on my backup site - http://www.avalanchestyle.net/forum/index.php?board=1.0

akulion · October 29, 2006, 11:30:13 PM

i think i put one of the paths wrong in the code in the 1st post

this:
http://www.avalanchestyle.net/forum/moofx/scripts/moo.fx.js

should be this:
http://www.avalanchestyle.net/forum/moofx/moo.fx.js

RoarinRow · October 29, 2006, 11:36:48 PM

Quote from: Aku on October 29, 2006, 11:30:13 PM
i think i put one of the paths wrong in the code in the 1st post

this:
http://www.avalanchestyle.net/forum/moofx/scripts/moo.fx.js

should be this:
http://www.avalanchestyle.net/forum/moofx/moo.fx.js

Doh! that was my bad. I didn't see that scripts directory. I fix it, it works, now I just have to clean it up, change the color background, etc. :up: Thank you!

akulion · October 29, 2006, 11:41:04 PM

yup just play around with the css to fix the colors up :up:

u can add pics and stuff using plain html and a table layout for neatness

thanks to moofx an joomla for the cool script
(for danimal)

RoarinRow · October 30, 2006, 12:02:37 AM

Quote from: Aku on October 29, 2006, 11:41:04 PM
yup just play around with the css to fix the colors up :up:

u can add pics and stuff using plain html and a table layout for neatness

thanks to moofx an joomla for the cool script
(for danimal)

So strange, on my default theme it's perfect, on other themes there is a blank space. I just wanted it all grey, with black text. The yellow text for the highlighted tab is o.k. with me

This is what my css looks like right now

Code Select


/* BEGIN: SPOTLIGHT */
#spotlight {
	float: center;
	width: 750px!important;
	width: 750px;
	padding: 0 5px;
	margin: 10px 0 10px;
	line-height: normal;
}

#spotlight .sl-wrapper {
	padding: 0 0 0 5px;
	border-top: 1px solid #CCC9C9;
	border-right: 1px solid #CCC9C9;
	border-bottom: 1px solid #CCC9C9;
	background: #CCC9C9;
}

#spotlight ul.headtab-wrapper {
	margin: 0;
	padding: 0;
	list-style: none outside;
	background: none;
	text-align: center;
	height: 24px;
}

#spotlight li.headtab {
	margin: 4px 2px 0;
	float: left;
	padding: 0;
	display: block;
	background: none;
	font-size: 11px;
}

#spotlight li.headtab-current {
	margin: 0;
	float: left;
	padding: 0;
	display: block;
	background: none;
	font-size: 11px;
}

#spotlight li.headtab a {
	width: 100px;
	display: block;
	background: #CCC9C9;
	color: #253135;
	line-height: 20px;
	text-align: center;
	height: 20px;
	cursor: pointer;
}

#spotlight li.headtab a:hover {
	color: #F9FCD1;
	background: #CCC9C9;
	text-decoration: none;
}

#spotlight li.headtab-current a {
	width: 100px;
	border-right: 1px solid #36474D;
	display: block;
	background: #CCC9C9;
	color: #F9FCD1;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
	height: 24px;
	cursor: pointer;
}

#spotlight .article_seperator {
	visibility: hidden;
}

#spotlight .contentheading {
	color: #FFFFFF;
}

#spotlight .moduletable {
	border: none;
	margin: 10px 0 0;
	padding-bottom: 0;
	background: #CCC9C9;
}

#spotlight .moduletable a {
	font-size: 11px;
}

#spotlight .moduletable h3 {
	border-left: 5px solid #CCC9C9;
	background: #CCC9C9;
	line-height: 20px;
	height: 20px;
}

#spotlight .stretcher div.col {
	width: 32%!important;
	width: 32%;
	float: left;
	margin-right: 6px;
}

/* END : SPOTLIGHT */

akulion · October 30, 2006, 12:11:28 AM

try changing the width of the :

#spotlight li.headtab a {
width: 100px;

and headtab-current

cos from what i see the text is getting pushed out probably because of the text sizes for the theme

An alternative (also easier) you have also is in the head tab where u put your heading u could specify which font and size to use by having something like:

Code Select


<ul class="headtab-wrapper">
                <li class="headtab" id="headtab-1">
          <a><font face="Verdana" size="2">Have you been tagged?</font></a>
        </li>

that way no matter what the theme is ur text size and style will stay fixed and not get effected by the Themes CSS

RoarinRow · October 30, 2006, 12:29:30 AM

Quote from: Aku on October 30, 2006, 12:11:28 AM
try changing the width of the :

#spotlight li.headtab a {
width: 100px;

and headtab-current

cos from what i see the text is getting pushed out probably because of the text sizes for the theme

An alternative (also easier) you have also is in the head tab where u put your heading u could specify which font and size to use by having something like:
Code Select Expand
<ul class="headtab-wrapper"> <li class="headtab" id="headtab-1"> <a><font face="Verdana" size="2">Have you been tagged?</font></a> </li>

that way no matter what the theme is ur text size and style will stay fixed and not get effected by the Themes CSS

I tried the second option, but the original code works best for now. Thanks again! :up:

akulion · October 30, 2006, 12:30:36 AM

welcome :up:

now im off to beddie

finally some rest

RoarinRow · October 30, 2006, 12:36:45 AM

Quote from: Aku on October 30, 2006, 12:30:36 AM
welcome :up:

now im off to beddie finally some rest

Have a good one. I'm sure I'll have more questions in the morning.

Lesmond · October 30, 2006, 02:34:56 PM

Aku, Can I ask? in your "whats new" tab, how did you get "Latest Games In The Arcade" to work?

Thanks Les

Recent

User

Stats

Members

Stats

Users Online

ITS HERE!!! Yahoo styled tabbed content

RoarinRow

akulion

RoarinRow

akulion

RoarinRow

akulion

RoarinRow

akulion

RoarinRow

Lesmond

This website is proudly hosted on Crocweb Cloud Website Hosting.