Tabbed panel: PHPFusion 8 Support

Home
Search

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.

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/

Edited by Kevin Maschke on 31-05-2011 00:38, 13 y

0 replies

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

Code Download source

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

Code Download source

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

Code Download source

echo "<li><a href='#tab3'>Tab 3</a></li>";

Remember to add this for all new tabs you making

Code Download source

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

Code Download source

echo "<div id='tab3' style='display: none; '>Tab 3 is always last!</div>";

Ups... forgot to attach the file
here you go:

Edited by Lippke on 31-05-2011 20:49, 13 y

Lippke attached the following file:

infusions_1.zip [No information available / 437 Downloads]

0 replies

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:

Edited by Kevin Maschke on 31-05-2011 12:22, 13 y

Kevin Maschke attached the following file:

tabs.png [No information available / 107 Downloads]

tabs2.png [No information available / 112 Downloads]

0 replies

link please

0 replies

http://www.km.hostei.com/php-fusion/

0 replies

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

Edited by Lippke on 31-05-2011 12:52, 13 y

Lippke attached the following file:

infusions_2.zip [No information available / 451 Downloads]

0 replies

Using your "infusions_2" files it looks the same...

Here my code:

Code Download source


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();

0 replies

What version of PHPFusion are you using?

0 replies

Quote

lippke wrote:

What version of PHPFusion are you using?

PHPFusion v7.02.02

:(

0 replies

okay try changing this

Code Download source

".$data['articles_articles']."

to this

Code Download source

".$data['article_article']."

Merged on May 31 2011 at 18:19:06:
Try this code

Code Download source

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();

Edited by Lippke on 31-05-2011 20:47, 13 y

0 replies

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

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 PHPFusion 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"

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: progid

XImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ecebeb'

;
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: progid

XImageTransform.Microsoft.gradient(startColorstr='#eb1c24', endColorstr='#a30c10'

;
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: progid

XImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'

;
-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%;
}
}
/*** PHPFusion 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]

0 replies

Change...

Code Download source

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

To....

Code Download source

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

0 replies

Quote

Craig wrote:

Change...
Code Download source
 echo "<script type='text/javascript'>
   $('#usual1 ul').idTabs();
   </script>";
To....
Code Download source
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)

0 replies

Can not immediately see anything that conflicts

but it is the theme there conflict

se link

@Craig: Oops forgot that

Edited by Lippke on 31-05-2011 20:50, 13 y

0 replies

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?

0 replies

I do not know but trying to figure it out

0 replies

Quote

lippke wrote:

I do not know but trying to figure it out

Thanks a lot!

0 replies

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

Edited by DrunkeN on 01-06-2011 13:14, 13 y

DrunkeN attached the following file:

works.png [No information available / 89 Downloads]

tabs_panel.zip [No information available / 428 Downloads]

0 replies

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 [No information available / 87 Downloads]

0 replies

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.

0 replies

Category Forum

Modifications and Requests - 8

Labels

None yet

Statistics

Views 0 views
Posts 52 posts
Votes 0 votes
Topic users 8 members

8 participants

Notifications

Track thread

You are not receiving notifications from this thread.

Tabbed panel

52 posts

PHPFusion

Resources

Community

Development