Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.

Tabbed panel

Hi, I need help making a tabbed panel, with 2 or more tabs. I'm speaking of a side panel.

I mean, a sidepanel with tabs and each tab displays diferent content (basically each tab shows a list of articles in a specific article category).

How can this be done?

And, would it be possible to make the tabs appear in the sidepanel header? I mean, The side panel header should be divided into 2... If not, a normal panel with tabs in it..

Merged on May 30 2011 at 23:38:31:
Here are 2 examples of tabs. Would it be possible to implement them into a panel?

http://www.sunsean.com/idTabs/#advanced

http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
Of course it is possible to put it into a panel


Do you want it in a side or center panel

Merged on May 31 2011 at 10:23:08:
Hey, here is the code
CodeDownload  
openside("Tabs");

   add_to_head ("<script type='text/javascript' src='".INFUSIONS."/tabs/jquery.idTabs.min.js'></script>");
   add_to_head("<link type='text/css' href='".INFUSIONS."tabs/tabs.css' rel='stylesheet' />");
   
   echo "<div id='usual1' class='usual'>";
   echo "<ul>";
    echo "<li><a href='#tab1' class='selected'>Tab 1</a></li>";
    echo "<li><a href='#tab2'>Tab 2</a></li>";
    echo "<li><a href='#tab3'>Tab 3</a></li>";
   echo "</ul>";
   echo "<div id='tab1' style='display: block; '>This is tab 1.</div>";
   echo "<div id='tab2' style='display: none; '>More content in tab 2.</div>";
   echo "<div id='tab3' style='display: none; '>Tab 3 is always last!</div>";
   echo "</div>";
 
   add_to_footer( "<script type='text/javascript'>
   $('#usual1 ul').idTabs();
   </script>");
closeside();



And if you want more tabs you just do like this
CodeDownload  
echo "<li><a href='#tab4'>Tab 4</a></li>"; 
echo "<li><a href='#tab5'>Tab 5</a></li>";
echo "<li><a href='#tab6'>Tab 6</a></li>";


and add it after this
CodeDownload  
echo "<li><a href='#tab3'>Tab 3</a></li>"; 



Remember to add this for all new tabs you making
CodeDownload  
echo "<div id='tab4' style='display: none; '>Tab 3 always comes before Tab 4</div>"; 
echo "<div id='tab5' style='display: none; '>Tab 4 always comes before Tab 6</div>";
echo "<div id='tab6' style='display: none; '>Tab 6 is always last!</div>";


and add it after this
CodeDownload  
echo "<div id='tab3' style='display: none; '>Tab 3 is always last!</div>"; 



Ups... forgot to attach the file
here you go:
Lippke attached the following file:
infusions_1.zip [2.05kB / 380 Downloads]
Hm.. it seems not to work correctly on my web, I see the panel like the attached image.

Merged on May 31 2011 at 11:22:20:
Hm... Now without changing anything, tabs are displayed, but wrong, attached image:
Kevin Maschke attached the following file:
tabs.png [3.07kB / 46 Downloads]
tabs2.png [3.55kB / 49 Downloads]
link please
http://www.km.hostei.com/php-fusion/
Try removing the images

Merged on May 31 2011 at 12:43:31:
and use these files


and share the modified code your using

Edit:

and it works fine on my side link
Lippke attached the following file:
infusions_2.zip [2.05kB / 376 Downloads]
Using your "infusions_2" files it looks the same...

Here my code:

CodeDownload  

openside("Tabs");

   add_to_head ("<script type='text/javascript' src='".INFUSIONS."/tabs/jquery.idTabs.min.js'></script>");
   add_to_head("<link type='text/css' href='".INFUSIONS."tabs/tabs.css' rel='stylesheet' />");
   
   echo "<div id='usual1' class='usual'>";
   echo "<ul>";
    echo "<li><a href='#tab1' class='selected'>Tab 1</a></li>";
    echo "<li><a href='#tab2'>Tab 2</a></li>";
    //echo "<li><a href='#tab3'>Tab 3</a></li>";
   echo "</ul>";
   echo "<div id='tab1' style='display: block; '>";
$result = dbquery("SELECT * FROM ".$db_prefix."articles WHERE `article_cat`='1' ORDER BY article_datestamp DESC LIMIT 0,15");
if (dbrows($result) != 0) {
while($data = dbarray($result)) {
$itemsubject = trimlink($data['article_subject'], 110);
echo "<a href='".BASEDIR."articles.php?article_id=".$data['article_id']."' class='hop'> ".$itemsubject."</a>";

echo "<br />".$data['articles_articles']."\n";
}
} else {
echo "No News";
}
   echo "</div>";
   echo "<div id='tab2' style='display: none; '>";
$result = dbquery("SELECT * FROM ".$db_prefix."articles WHERE `article_cat`='2' ORDER BY article_datestamp DESC LIMIT 0,15");
if (dbrows($result) != 0) {
while($data = dbarray($result)) {
$itemsubject = trimlink($data['article_subject'], 110);
echo "<a href='".BASEDIR."articles.php?article_id=".$data['article_id']."' class='hop'> ".$itemsubject."</a>";

echo "<br />".$data['articles_articles']."\n";
}
} else {
echo "No News";
}
   echo "</div>";
   //echo "<div id='tab3' style='display: none; '>Tab 3 is always last!</div>";
   echo "</div>";
 
   echo "<script type='text/javascript'>
   $('#usual1 ul').idTabs();
   </script>";
closeside();

What version of PHP-Fusion are you using?

Quote

lippke wrote:

What version of PHP-Fusion are you using?


PHP-Fusion v7.02.02

:(
okay try changing this
CodeDownload  
".$data['articles_articles']."

to this
CodeDownload  
".$data['article_article']."



Merged on May 31 2011 at 18:19:06:
Try this code
CodeDownload  
openside("Tabs");

   add_to_head ("<script type='text/javascript' src='".INFUSIONS."/tabs/jquery.idTabs.min.js'></script>");
   add_to_head("<link type='text/css' href='".INFUSIONS."tabs/tabs.css' rel='stylesheet' />");
   
   echo "<div id='usual1' class='usual'>";
   echo "<ul>";
    echo "<li><a href='#tab1' class='selected'>Tab 1</a></li>";
    echo "<li><a href='#tab2'>Tab 2</a></li>";
    //echo "<li><a href='#tab3'>Tab 3</a></li>";
   echo "</ul>";
   echo "<div id='tab1' style='display: block; '>";
$result = dbquery("SELECT * FROM ".$db_prefix."articles WHERE `article_cat`='1' ORDER BY article_datestamp DESC LIMIT 0,15");
if (dbrows($result) != 0) {
while($data = dbarray($result)) {
$itemsubject = trimlink($data['article_subject'], 110);
echo "<a href='".BASEDIR."articles.php?article_id=".$data['article_id']."' class='hop'> ".$itemsubject."</a>";

echo "<br />".$data['article_article']."<br />";
}
} else {
echo "No News";
}
   echo "</div>";
   echo "<div id='tab2' style='display: none; '>";
$result = dbquery("SELECT * FROM ".$db_prefix."articles WHERE `article_cat`='2' ORDER BY article_datestamp DESC LIMIT 0,15");
if (dbrows($result) != 0) {
while($data = dbarray($result)) {
$itemsubject = trimlink($data['article_subject'], 110);
echo "<a href='".BASEDIR."articles.php?article_id=".$data['article_id']."' class='hop'> ".$itemsubject."</a>";

echo "<br />".$data['article_article']."";
}
} else {
echo "No News";
}
   echo "</div>";
   //echo "<div id='tab3' style='display: none; '>Tab 3 is always last!</div>";
   echo "</div>";
 
   add_to_footer( "<script type='text/javascript'>
   $('#usual1 ul').idTabs();
   </script>");
closeside();

Sorry, still not working.

The main problem is that the tabs are shown one under the other one. But I need them on beside the other one.

With your last code, I still see them one under the other one, but with "article name" and under it "article subject". I just want article name...

But as said, my main problem is that the design is not showing as it should sad I mean, as on your site.

Merged on May 31 2011 at 17:33:20:
OK, I think it is a theme problem. I changed my sites theme (see my site) and the tabs are showing ok.

Could my themes CSS conflict?

This is my theme CSS:
[syntaxhighlighter brush=css,first-line=1,highlight=0,collapse=false,html-script=false]/*
Theme Name: iTheme2
Theme URI: http://themify.me/themes/itheme2
Version: 1.0.0
Author: Themify
Author URI: http://www.themify.me
Converted to PHP-Fusion by: Khalid545 (http://khalidb.co.cc/)
*/
/* RESET */
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
margin: 0;
padding: 0;
}
img, fieldset {
border: 0;
}
/* GENERAL STYLING */
body {
background: #0d1424 url(images/body-bg.jpg) no-repeat center top;
font: .81em/150% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif;
color: #666;
}

body#tinymce {
background:none;
width: 250px;
}

p {
margin: 0 0 1.2em;
padding: 0;
}
a {
text-decoration: none;
outline: none;
color: #026acb;
}
a:hover {
text-decoration: underline;
}
small {
font-size: 87%;
}
em, i {
}
ul, ol {
margin: 1em 0 1.4em 24px;
padding: 0;
line-height: 140%;
}
li {
margin: 0 0 .5em 0;
padding: 0;
}
blockquote {
font: italic 15px/130% "Times New Roman", Times, serif;
padding: 8px 30px 15px;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.4em;
margin: 20px 0 .4em;
color: #333;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1.1em;
}
h6 {
font-size: 1em;
}
input, textarea, select {
font-size: 100%;
font-family: inherit;
}
textarea {
line-height: 150%;
max-width:96%;
}
input[type=text], input[type=password], textarea {
border: solid 1px #ccc;
padding: 5px 7px;
background: #f0f0f0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
textarea:focus, input[type=password]:focus, input[type=text]:focus {
border: solid 1px #666;
background: #fff;
outline: none;
}
input[type=reset], input[type=submit], .button {
background:#5c5c5c url("images/btn_bkg.png"wink repeat-x;
display:inline-block;
color:#fff !important;
text-decoration:none;
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);
text-shadow:0 -1px 1px rgba(0,0,0,0.3);
position:relative;
cursor:pointer;
padding:4px 12px 5px;
border-radius:7px;
-moz-border-radius:7px;
margin:2px 5px 2px 0;
border:none;
}
input[type=reset]:hover, input[type=submit]:hover, .button:hover {
background-color:#1d1e56;
text-decoration:none;
}
.button.blue {
background-color:#2166ac;
}.button.blue:hover {
background-color:#0a579f;
}
hr {
border-color:#ddd;
}
/* STRUCTURE */
#pagewrap {
width: 978px;
margin: 0 auto;
}
#content.fullwidth {
width: 937px;
}
/* GRID */
.col4-1,
.col4-2,
.col4-3,
.col3-1,
.col3-2,
.col2-1
{
float: left;
margin: 0 0 0 30px;
}
.col4-1 {
width: 222px;
}
.col4-2, .col2-1 {
width: 474px;
}
.col4-3 {
width: 726px;
}
.col3-1 {
width: 306px;
}
.col3-2 {
width: 642px;
}
.first {
margin-left: 0;
clear: left;
}
.col.last {
margin: 0;
clear: left;
}
/* grid in content container */
#content .col4-1 {
width: 204px;
}
#content .col4-3 {
width: 672px;
}
#content .col4-2, #content .col2-1 {
width: 438px;
}
#content .col3-1 {
width: 282px;
}
#content .col3-2 {
width: 594px;
}
/* HEADER */
#header {
position: relative;
height: 175px;
margin-bottom: 20px;
}
#site-logo {
position: absolute;
top: 30px;
}
#site-logo a {
font: bold 190%/110% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
padding-bottom: 2px;
}
#site-description {
color: #ddd;
position: absolute;
top: 70px;
font: italic 100%/120% Georgia, "Times New Roman", Times, serif;
}
/* SOCIAL WIDGET */
.social-widget {
position: absolute;
top: 80px;
right: 10px;
font-size: 95%;
line-height: 120%;
text-align: right;
}
.social-widget a {
color: #fff;
}
/* rss button */
.social-widget .rss {
float: left;
}
.social-widget .rss a {
background: url(images/rss.png) no-repeat left 4px;
padding: 10px 0 10px 30px;
}
/* SEARCH FORM */
#header #searchform {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 101;
}
#header #searchform #s {
border: none;
width: 120px;
padding-left: 28px;
background: #e1e1e1 url(images/search.png) no-repeat 8px center;
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 -1px 0 rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.3);
}
/* MAIN NAVIGATION */
#nav-bar {
width: 100%;
position: absolute;
right: 0;
bottom: 0;
z-index: 100;
border: solid 1px #333;
background: #37397b url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#786dbf), to(#37397b));
background: -moz-linear-gradient(top, #786dbf, #37397b);
background: linear-gradient(-90deg, #786dbf, #37397b);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
}
#main-nav {
margin: 0;
padding: 0;
}
#main-nav li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
border-right: solid 1px #575757;
-webkit-box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1);
box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1);
}
#main-nav li:hover {
background: #474747;
background: -webkit-gradient(linear, left top, left bottom, from(#1d1e56), to(#323474));
background: -moz-linear-gradient(top, #1d1e56, #323474);
background: linear-gradient(-90deg, #1d1e56, #323474);
-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.8);
-moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.8);
box-shadow: inset 0 2px 3px rgba(0,0,0,.8);
}
/* home icon */
#main-nav .home {
width: 42px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
#main-nav .home a {
background: url(images/home-icon.png) no-repeat 14px center;
width: 16px;
text-indent: -9000em;
}
#main-nav .home a:hover, #main-nav .home.current_page_item a, #main-nav .home.current-menu-item a {
background-position: -41px center;
}
/* home icon current */
#main-nav .home.current_page_item, #main-nav .home.current-menu-item {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
/* main level link */
#main-nav a {
color: #fff;
display: block;
padding: 14px 15px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.7);
}
/* main level link :hover */
#main-nav a:hover {
color: #fff;
}
/* current page li */
#main-nav .current_page_item, #main-nav .current-menu-item {
border-left: solid 1px #000;
border-right: solid 1px #000;
background: #474747;
background: -webkit-gradient(linear, left top, left bottom, from(#1d1e56), to(#323474));
background: -moz-linear-gradient(top, #1d1e56, #323474);
background: linear-gradient(-90deg, #1d1e56, #323474);
-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.8);
-moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.8);
box-shadow: inset 0 2px 3px rgba(0,0,0,.8);
}
/* current link */
#main-nav .current_page_item a, #main-nav .current-menu-item a {
color: #fff;
}
/* current link :hover */
#main-nav .current_page_item a:hover, #main-nav .current-menu-item a:hover {
color: #fff;
}
/* sub-levels current page li */
#main-nav ul .current_page_item, #main-nav ul .current-menu-item {
border: none;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* sub-levels link */
#main-nav ul a, #main-nav .current_page_item ul a, #main-nav ul .current_page_item a, #main-nav .current-menu-item ul a, #main-nav ul .current-menu-item a {
color: #666;
font-size: 95%;
font-weight: normal;
padding: 5px 0 5px 15px;
margin: 0;
width: 180px;
height: auto;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-shadow: none;
}
/* sub-levels link :hover */
#main-nav ul a:hover, #main-nav .current_page_item ul a:hover, #main-nav ul .current_page_item a:hover, #main-nav .current-menu-item ul a:hover, #main-nav ul .current-menu-item a:hover {
background: #F3F3F3;
color: #000;
color: black;
}
/* dropdown ul */
#main-nav ul {
border: solid 1px #ccc;
background: #fff;
margin: 0;
padding: 5px 0;
list-style: none;
position: absolute;
z-index: 100;
display: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.3);
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
#main-nav ul li {
background: none;
padding: 0;
margin: 0;
height: auto;
border: none;
}
#main-nav ul li:hover {
background: none;
}
/* sub-levels dropdown */
#main-nav ul ul {
left: 190px;
top: 5px;
}
/* show dropdown ul */
#main-nav li:hover > ul {
display: block;
}
/* CONTENT */
#content {
width: 666px;
background: #fff;
padding: 20px;
margin-bottom: 10px;
float: left;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.post {
margin: 0 0 45px;
position: relative;
}
/* post title */
.post-title {
margin: 0 0 5px;
padding: 5px 36px 0 0;
font: bold 170%/120% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif;
}
.ttitle {
margin: 0 0 15px;
padding: 5px 36px 0 0;
font: bold 170%/120% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif;
}
.post-title a {
color: #333;
text-decoration: none;
}
/* post date */
.post-date {
float: left;
width: 52px;
text-align: center;
margin: 0 12px 5px 0;
border: solid 1px #bebebe;
background: #fff;
filter: progidgrinXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ecebeb'wink;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ecebeb));
background: -moz-linear-gradient(top, #ffffff, #ecebeb);
background: linear-gradient(-90deg, #ffffff, #ecebeb);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.15);
box-shadow: 0 1px 1px rgba(0,0,0,.15);
}
.post-date .month {
color: #fff;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
padding: 2px 0;
width: 100%;
position: relative;
left: -1px;
top: -1px;
border: solid 1px #a11216;
background: #cb151b;
filter: progidgrinXImageTransform.Microsoft.gradient(startColorstr='#eb1c24', endColorstr='#a30c10'wink;
background: -webkit-gradient(linear, left top, left bottom, from(#eb1c24), to(#a30c10));
background: -moz-linear-gradient(top, #eb1c24, #a30c10);
background: linear-gradient(-90deg, #eb1c24, #a30c10);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.2);
box-shadow: 0 1px 0 rgba(0,0,0,.2);
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.post-date .day {
color: #666;
padding: 2px 0 1px;
font: bold 18px/100% Arial, Helvetica, sans-serif;
display: block;
}
.post-date .year {
color: #999;
padding: 0 0 4px;
font: 10px/100% Arial, Helvetica, sans-serif;
display: block;
}
/* post meta */
.post-meta {
color: #999;
font-size: 85%;
line-height: 120%;
margin: 0 0 15px;
}
/* post comments */
.post-meta .post-comments a {
font-size: 13px;
text-align: center;
text-decoration: none;
color: #666;
background: url(images/post-comments.png) no-repeat;
width: 36px;
height: 26px;
padding: 8px 0 0;
position: absolute;
top: -2px;
right: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.post-meta .post-comments a:hover {
color: #000;
}
/* post image */
.post-image {
margin: 5px 0 10px;
}
.post-image img {
margin-top: 5px;
}
.post-image.left img {
margin-right: 15px;
}
.post-image.right img {
margin-left: 15px;
}
/* page title */
.page-title {
margin: 0 0 10px;
font: bold 190%/120% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif;
}
/* PAGE NAVIGATION */
.pagenav {
clear: both;
padding: 7px 5px 0;
text-align: right;
}
.pagenav a, .pagenav span {
background: #026acb;
color: #fff;
text-decoration: none;
padding: 2px 7px;
margin-left: 2px;
vertical-align: middle;
display: inline-block;
zoom:1;
*display:inline;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
color: #d9eef7;
border: solid 1px #333;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top, #666, #000);
filter: progidgrinXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'wink;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
text-shadow: 0 -1px 0 rgba(0,0,0,.9);
}
.pagenav a:hover {
text-decoration: none;
background: #333;
}
.pagenav span, .pagenav span:hover {
background: #999;
filter: none;
color: #fff;
border: none;
border: solid 1px #888;
}
/* COMMENTS */
.commentwrap {
margin: 40px 0 20px;
padding: 3% 4%;
position: relative;
clear: both;
background: #f6f6f6;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,.1);
-moz-box-shadow: 0 -1px 0 rgba(0,0,0,.1);
box-shadow: 0 -1px 0 rgba(0,0,0,.1);
}
.comment-title {
font-size: 140%;
margin: 0 0 10px;
padding: 0;
}
/* commentlist */
.commentlist {
margin: 0;
padding: 5px 0 0;
list-style: none;
border-top: solid 1px #ddd;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.commentlist li {
margin: 0;
padding: 15px 0 0;
list-style: none;
position: relative;
}
.commentlist .comment-author {
margin: 2px 0 5px;
padding: 0;
}
.commentlist cite {
font: bold 120%/130% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif;
}
.commentlist cite a {
text-decoration: none;
}
.commentlist .comment-time {
font-size: 75%;
text-transform: uppercase;
display: block;
margin: 2px 0 0;
}
.commentlist .commententry {
position: relative;
min-height: 40px;
overflow: hidden;
padding-bottom: 5px;
border-bottom: solid 1px #ddd;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.9);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.9);
box-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.commentlist ul, .commentlist ol {
margin: 0 0 0 60px;
padding: 0;
}
/* SIDEBAR */
#sidebar {
float: right;
width: 250px;
margin-bottom: 10px;
margin-top: 1px;
font-size: 90%;
}
.widget {
background: #fff;
margin-bottom: 20px;
padding: 15px 18px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widgettitle {
width: 100%;
display: block;
padding: 6px 18px 7px 18px;
margin: 0 0 -5px 0;
position: relative;
left: -18px;
top: -16px;
border: solid 1px #333;
font: bold 14px/110% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif;
color: #fff;
background: #37397b url(images/widgettitle-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#786dbf), to(#37397b));
background: -moz-linear-gradient(top, #786dbf, #37397b);
background: linear-gradient(-90deg, #786dbf, #37397b);
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.15);
box-shadow: 0 1px 1px rgba(0,0,0,.15);
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.7);
}
.widgettitle a {
color: #333;
text-decoration: none;
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 6px 0;
list-style: none;
clear: both;
border-bottom: solid 1px #ddd;
}
.widget li:last-child {
border-bottom: none;
}
.widget ul ul {
margin: 6px 0 -6px 0px;
padding: 0;
border-top: solid 1px #ddd;
}
.widget ul ul li {
margin: 0;
padding-left: 10px;
}
/* FOOTER */
#footer {
clear: both;
font-size: 90%;
}
#footer .widget {
margin: 15px 0;
}
#footer .footer-text {
clear: both;
padding: 0 0 20px 5px;
color: #ccc;
}
#footer .footer-text a {
color: #fff;
}
#footer .credits {
font-size: 90%;
}
/* CLEAR & ALIGNMENT */
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.textleft {
text-align: left;
}
.textright {
text-align: right;
}
.textcenter {
text-align: center;
}
/* clearfix */
.clearfix:after, .widget li:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix, * html .widget li
{
zoom: 1;
} /* IE6 */
*:first-child+html .clearfix, *:first-child+html .widget li
{
zoom: 1;
} /* IE7 */

/* POST FORMATTING */
img.alignleft, img.aligncenter, img.alignright, img.alignnone {
background: #fff;
padding: 4px;
border: solid 1px #ccc;
margin-bottom: 15px;
}
.alignleft {
float: left;
margin-right: 30px;
}
.alignright {
float: right;
margin-left: 30px;
}
.aligncenter {
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
/* IMAGE STYLES */
img.alignleft, img.aligncenter, img.alignright, img.alignnone, .wp-caption img,
.widget .feature-posts-list .post-img,
.widget .flickr_badge_image img,
.commentlist .avatar,
.recent-comments-list .avatar,
#body .gallery img,
.attachment img,
.post-image img,
.feature-img,
.post-img
{
padding: 4px;
background: #fff;
border: solid 1px #ccc;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.15);
box-shadow: 0 1px 1px rgba(0,0,0,.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* MEDIA QUERIES */
/* smaller than 980 */
@media screen and (max-width: 980px) {
/* reset grid to percentage */
#content .col,
#content .col4-1,
#content .col4-2,
#content .col4-3,
#content .col3-1,
#content .col3-2,
#content .col2-1
{
margin-left: 0;
}
.rtllyt #content .col,
.rtllyt #content .col4-1,
.rtllyt #content .col4-2,
.rtllyt #content .col4-3,
.rtllyt #content .col3-1,
.rtllyt #content .col3-2,
.rtllyt #content .col2-1
{
margin-right: 0;
margin-left:30px;
}
#content .col4-1 {
width: 25%;
}
#content .col4-2, #content .col2-1 {
width: 50%;
}
#content .col4-3 {
width: 75%;
}
#content .col3-1 {
width: 33%;
}
#content .col3-2 {
width: 66%;
}
/* set img and object max width */
img, object {
max-width: 100%;
height: auto;
}
#pagewrap {
width: 95%;
}
#content.fullwidth {width:92%;}
/* header */
#header {
margin-bottom: 15px;
}
#content {
width: 60%;
padding: 3% 4%;
}
#sidebar {
width: 30%;
}
}
/* smaller than 720 */
@media screen and (max-width: 720px) {
#pagewrap {
width: 90%;
}
#content.fullwidth {width:90%;}
/* header */
#header {
height: auto;
}
#content {
width: 90%;
float: none;
padding: 5%;
}
/* reset absolute elements to static */
#header .social-widget, #site-logo, #site-description, #header #searchform, #nav-bar {
position: static;
float: none;
clear: both;
}
/* header */
#header .social-widget {
padding: 0 0 30px;
}
#header #searchform {
padding: 10px 0;
position: absolute;
top: -10px;
right: 0;
z-index: 103;
}
#header #searchform #s {
width: 50px;
text-align: right;
}
#header #searchform #s:focus {
width: 150px;
}
#site-logo {
margin: 15px 100px 10px 0;
}
.rtllyt #site-logo {
margin: 15px 0 10px 100px;
}
#site-description {
margin: 0 0 15px;
}
/* post title */
.post-title {
font-size: 150%;
line-height: 120%;
padding-top: 0;
}
/* commentlist */
.commentlist ul {
margin-left: 20px;
}
.rtllyt .commentlist ul {
margin-right: 20px;
margin-left: 0;
}
.commententry {
clear: both;
}
/* sidebar */
#sidebar {
width: 100%;
}
/* footer */
#footer .footer-text {
text-align: center;
padding-top: 10px;
}
}
/* smaller than 560 */
@media screen and (max-width: 560px) {
html {
-webkit-text-size-adjust: none;
}
#pagewrap {
width: 95%;
}
/* main nav */
#nav-bar {
height: auto;
}
#main-nav li {
height: auto;
}
#main-nav a {
font-size: 80%;
padding: 8px;
}
.rtllyt #main-nav .home a {
background-image:none;
text-indent:0;
width:auto;
}
/* post date */
.post-date {
width: 44px;
}
/* post-nav */
.post-nav span {
width: auto;
margin-bottom: 10px;
}
/* post title */
.post-title {
font-size: 140%;
line-height: 130%;
}
}
/*** PHP-Fusion Styles ***/

/* General table properties */

.spacer {
margin-bottom:5px;
}
.center, [align=center] {
margin-left: auto;
margin-right: auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.tbl1, .tbl2, .forum-caption {
padding: 10px;
}
.tbl2 {
background-color:#f8f8f8;
border: 1px solid #F5F5F5;
}
.tbl {
padding:3px;
}
.tbl-border {
background: #fff;
border: 1px solid #d7d4cb;
border-collapse: separate;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.08);
-webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.08);
-moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.08);
color: #444;
text-shadow: none;
margin-bottom:5px;
}
.forum-caption {
background: #fafafa;
border-bottom: 1px solid #efefef;
color: #444;
font-weight:bold;
}
/* Forum */
.forum_breadcrumbs, .forum_table .tbl2, .forum_thread_table .tbl2, .forum_idx_table .tbl2, #page-downloads .tbl2, #page-weblinks .tbl2 {
background:none;
border:0 none;
}
.tbl-border.forum_thread_table, .tbl-border.forum_table, .tbl-border.forum_idx_table {
padding: 0;
font-size: 108%;
}
.tbl2.forum_thread_user_info, .tbl2.forum_thread_ip {
border-right: 1px dashed #dedddc;
}
.forum_thread_user_name, .forum_thread_post_date, .forum_table .forum-caption, .forum_idx_table .forum-caption {
background: #fafafa !important;
border-bottom: 1px solid #efefef !important;
border-top: 1px solid #efefef !important;
color: #444;
font-style: italic;
font-weight:bold;
padding: 10px 15px;
}
.forum_thread_title, .forum_cat_name {
font-size:1.3em;
font-weight:bold;
font-style:normal !important;
}
.forum_thread_user_name, .forum_idx_table .forum_name a {
font-size: 108%;
}
.tbl2.forum_thread_userbar {
border-top: 1px dashed #dedddc;
padding: 5px;
}
.forum {
padding-top:10px;
}
.forum_thread_post_space {
display:none;
}
/* Forms Elements */
.bbcode {
font-family: Arial, Helvetica, Tahoma, sans-serif;
font-size:12px;
color:#000;
background-color:#f0f0f0;
border:1px solid #ccc;
margin-top:2px;
}
.bbcode-popup {
background-color:#f0f0f0;
padding:5px;
z-index:100;
}
.textbox {
border: 1px solid #ccc;
background-color:#f0f0f0;
font-family: Arial, Helvetica, Tahoma, sans-serif;
font-size:12px;
color:#555;
}
/* Poll */
.poll {
height:12px;
border:1px solid #bbb;
}
/* Shoutbox */

.comment-name,.shoutboxname {
font-weight:bold;
}
.shoutbox {
color:#777;
}
.shoutboxdate {
color:#888;
}
/* Admin message */
#close-message {
position: fixed;
text-align: center;
top: 0;
width: 82%;
z-index: 9999;
}
.admin-message {
text-align:center;
color: #d8000c;
background-color: #ffbaba;
border: 1px solid #d8000c;
padding: 2px;
}
.admin-message a {
font-weight:bold;
color:inherit;
}
#close-message .admin-message {
background: #37397b url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#786dbf), to(#37397b));
background: -moz-linear-gradient(top, #786dbf, #37397b);
background: linear-gradient(-90deg, #786dbf, #37397b);
border:0;
border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
color: #fff;
margin: 0 auto;
max-width: 200px;
padding: 3px 4px 5px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
/* News Images */
.news-image {
border:1px solid #555;
padding:2px;
margin: 3px 5px 0 0;
float: right;
}
.news-category {
border:0;
margin: 3px 5px 0 0;
float: right;
}
/* Debug bar */

#debug {
background: #37397b url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#786dbf), to(#37397b));
background: -moz-linear-gradient(top, #786dbf, #37397b);
background: linear-gradient(-90deg, #786dbf, #37397b);
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
bottom: 0;
color: #fff;
font-size: 10px;
padding: 5px;
position: fixed;
right: 0;
}
#debug:hover {
opacity:0;
}
/* Other */
.quote {
color:#555;
padding:4px;
margin:0 20px;
border:1px solid #bbb;
}
.small2,.side-small {
font-weight:normal;
}
.small {
font-weight:normal;
}
.side-label {
margin:2px 0;
padding:2px 2px 3px;
}
.bullet {
display:none;
}
.alt {
color:#026ACB;
}
.panel-button {
position: relative;
top: -29px;
text-align: right;
}
#panel-side1 li, #panel-side2 li, #panel-side3 li, #panel-side4 li, #site-links, #panel-side1, #panel-side2, #panel-side3, #panel-side4 {
margin:0;
}
/* RTL Support */
body.rtllyt {
direction:rtl;
font-family:Tahoma, Arial;
}
.rtllyt .social-widget {
left: 10px;
right: auto;
text-align: left;
}
.rtllyt #main-nav li {
border-left: 1px solid #575757;
border-right:0;
float: right;
}
.rtllyt #main-nav ul li {
border: none;
}
.rtllyt #header #searchform {
left: 10px;
right:auto;
}
.rtllyt #main-nav .home {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
}
.rtllyt .widgettitle {
font-size: 15px;
left:auto;
right:-18px;
}
.rtllyt #content {
float:right;
}
.rtllyt #sidebar {
float:left;
}
.rtllyt .post-meta .post-comments a {
right: auto;
left:0;
}
.rtllyt .post-date {
float: right;
margin: 0 0 5px 12px;
}
.rtllyt .post-date .month {
font-family:Tahoma, Arial;
right: -1px;
left:auto;
letter-spacing: 0;
text-transform: none;
}
.rtllyt .post-meta .post-comments a {
background-image: url(images/post-comments_rtl.png);
}
.rtllyt .credits {
font-size:10px !important;
direction:ltr;
text-align:center;
}
.rtllyt #debug {
right:auto;
left:0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
}
.rtllyt #main-nav ul a, .rtllyt #main-nav .current_page_item ul a, .rtllyt #main-nav ul .current_page_item a, .rtllyt #main-nav .current-menu-item ul a, .rtllyt #main-nav ul .current-menu-item a {
padding: 5px 15px 5px 0;
}
.rtllyt #main-nav ul ul {
left: auto;
right: 190px;
}
.rtllyt .forum_thread_user_name, .rtllyt .forum_thread_post_date, .rtllyt .forum_table .forum-caption, .rtllyt .forum_idx_table .forum-caption {
font-family:Arial;
font-size:15px;
font-style: normal;
}
.rtllyt .tbl-border.forum_thread_table, .rtllyt .tbl-border.forum_table, .rtllyt .tbl-border.forum_idx_table {
font-size: 100%;
}
.rtllyt .tbl2.forum_thread_user_info, .rtllyt .tbl2.forum_thread_ip {
border-left: 1px dashed #dedddc;
border-right: 0;
}
.rtllyt .pagenav {
text-align: left;
}
.rtllyt .bbcode {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size:11px;
}
.rtllyt .textbox {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size:11px;
}
.rtllyt .col4-1,
.rtllyt .col4-2,
.rtllyt .col4-3,
.rtllyt .col3-1,
.rtllyt .col3-2,
.rtllyt .col2-1
{
float: right;
margin: 0 30px 0 0;
}
.rtllyt .first {
margin-right: 0;
clear: right;
}
.rtllyt .col.last {
clear: right;
}[/syntaxhighlighter]
Change...

CodeDownload  
 echo "<script type='text/javascript'>
   $('#usual1 ul').idTabs();
   </script>";



To....

CodeDownload  
add_to_footer( "<script type='text/javascript'>
   $('#usual1 ul').idTabs();
   </script>");



In 7.02 we now add javascript like that to the footer instead of header.

See more info here on DEV...

http://dev.php-fusion.co.uk/forum/viewthread.php?thread_id=1624#post_12518

Quote

Craig wrote:

Change...

CodeDownload  
 echo "<script type='text/javascript'>
   $('#usual1 ul').idTabs();
   </script>";



To....

CodeDownload  
add_to_footer( "<script type='text/javascript'>
   $('#usual1 ul').idTabs();
   </script>");



In 7.02 we now add javascript like that to the footer instead of header.

See more info here on DEV...

http://dev.php-fusion.co.uk/forum/viewthread.php?thread_id=1624#post_12518




That did also not help :( Could it be conflicting with my themes CSS? (Posted in my previous post)
Can not immediately see anything that conflicts

but it is the theme there conflict

se link

@Craig: Oops forgot that

Quote

lippke wrote:

Can not immediately see anything that conflicts

but it is the theme there conflict

se link

@Craig: Oops forgot that



Hm... And what could be conflicting in the theme?
I do not know but trying to figure it out

Quote

lippke wrote:

I do not know but trying to figure it out



Thanks a lot!
It works for me. Download the files and test. Upload the folder "tabs_panel" folder into "infusion" folder and go to Admin >> System Admin >> Panel and add it as new panel
DrunkeN attached the following file:
works.png [6.47kB / 31 Downloads]
tabs_panel.zip [3.43kB / 370 Downloads]

Quote

DrunkeN wrote:

It works for me. Download the files and test. Upload the folder "tabs_panel" folder into "infusion" folder and go to Admin >> System Admin >> Panel and add it as new panel


I attached screenshot. As you can see, on my website it is not displayed correctly. Lippke and I think it could be conflicting with our theme.
Try to use the panel with the theme my website is using. You'll see it wont work.

Could it be conflicting with the themes JS? (superfish.js)
Kevin Maschke attached the following file:
tabs_1.png [3.06kB / 33 Downloads]

Quote

Kevin Maschke wrote:

Quote

DrunkeN wrote:

It works for me. Download the files and test. Upload the folder "tabs_panel" folder into "infusion" folder and go to Admin >> System Admin >> Panel and add it as new panel


I attached screenshot. As you can see, on my website it is not displayed correctly. Lippke and I think it could be conflicting with our theme.
Try to use the panel with the theme my website is using. You'll see it wont work.

Could it be conflicting with the themes JS? (superfish.js)


Yes it must be conflict with "iTheme" as you use. I use gillette and it works fine for me. I should download iTheme and test and figure out what is the problem.
Thread Information
Author
Replies
53 posts
Views
17,927 times
Last Post
Last updated on 9 years ago
You can view all discussion threads in this forum.
You cannot set up a bounty in this discussion thread.
You can start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
Users who participated in discussion: Craig, Kevin Maschke, Mangee, DrunkeN, khalid545, Lippke, Ryan Stewart, GMUDuckman