Infusion/Panel with 3 tabs: General Addon and Modification 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.

There used to be an Infusion/Panel that you could place in the center of your site. It had 3 tabs on it for different subjects. Does anyone know if it still exists and if so where can I find it. Any help would be great. Thanks

0 replies

Just in case you are remembering this one (take a look at a couple of my sites utilizing it), called the MI Tab Panel which I have updated to work on Fusion 9. The tab panel can be installed in any panel position (except side of course), below header, upper or lower center or above footer as the two sites below are using it. The original infusion (for PF7) had 5 tabs; I extended it to 10. You just enable as many as you need. One slight drawback is that you cannot pull a remote url into it and cannot use scripts. Only html.

#1 - https://www.fortworthbonsai.org
Scroll all the way to bottom of screen. This site is using 8 of 10 tabs.
#2 - https://www.elgheko.us
This site is only using 4 of the 10 tabs available.

Edited by Grimloch on 23-06-2020 18:19, 4 y

1 reply

Perhaps this is to your liking:
Trio panel with latest threads, news and articles

0 replies

Here is what I am getting. When I click on the Admin Infusion Icon. Wont let me open the Infusions Admin.

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator, and inform them of the time the error occurred, and anything you might have done that may have caused the error.

More information about this error may be available in the server error log.

administration/index.php
get_headers(): https:// wrapper is disabled in the server configuration by allow_url_fopen=0 Line: 200

Edited by Vyper69 on 28-06-2020 06:10, 4 y

1 reply

Quote

Regardless of admin control panel settings, they are all messed up.

Define 'all messed up' for me. Are you saying you think the tabs infusion is all messed up or that it is causing the admin system itself to be 'all messed up' ? Examine the picture closely of the infusion on my 8.00.50 system; that's exactly what the mi_tabs_panel infusion admin should look like.

1 reply

@Grimloch
The picture I posted shows the infusion panel perfect, what is all messed up is the system admin portion. as you can see there are no icons, only jumbled words off to the left.

@Falk
I did try toggling the bootstrap and font, but nothing changed, it remained the same.

I am running v8. It was a fresh install, and all infusions or panels are ones I have used before or acquired since i just got back into websites. I have made no changes to any files except to install infusions or panels. The only added extras have been images to change banners, nothing more. So pretty much everything is generic.

0 replies

@Grimloch
Is there a version for 9.03. if so can you send me the download link please.

0 replies

This tab infusion is useless.. You can use Bootstrap tabs and can easily customize it via css https://getbootstrap.com/docs/3.4/jav...ript/#tabs. Much better than use old v7 infusion.

1 reply

Quote

This tab infusion is useless.

I beg your pardon? It works perfectly fine on 9.03 after I modded it.
@Vyper69: I answered you in the PM and included the d/l link.

0 replies

I didn't intend to offend you.
V9 uses Bootstrap so for simple things like this you can just copy few lines of HTML from Bootstrap docs and paste em to panel. No need additional addon.

Code Download source

<div>
 <ul class="nav nav-tabs">
 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 <li><a href="#profile" data-toggle="tab">Profile</a></li>
 <li><a href="#messages" data-toggle="tab">Messages</a></li>
 <li><a href="#settings" data-toggle="tab">Settings</a></li>
 </ul>

 <div class="tab-content">
 <div class="tab-pane active" id="home">...</div>
 <div class="tab-pane" id="profile">...</div>
 <div class="tab-pane" id="messages">...</div>
 <div class="tab-pane" id="settings">...</div>
 </div>
</div>

1 reply

We use Bootstrap so this will be really useful for you. On this site you can find ready to use html.
No tutorials, just tons of HTML codes.
https://getbootstrap.com/docs/3.4/com...omponents/

2 replies

First, drop the <table>. In modern times, <table> is for data display, like statistics, accounting display, administration list etc. Never use it for UI because table is worst of the worst when it comes to "mobile" view, and chromium browser especially hates that.

Next, just look at this part for Bootstrap 3.4 CSS grid implementation. I have guessed you have not done that in full yet before start asking questions. We all don't mind answering but we get no where when you don't understand what we tell you.

Address the problem, spacing.

Quote

Image - Text Area----------------------------------------------Image - Text Area

1. To start drawing up a row.

Code Download source

<div class='row'></div>

2. Then we need the columns. They are made of a maximum unit of "12" by design. Since you have 4 columns. We'll start with the number on desktop, 2,4,2,4. They add up to 12 in total. So

Code Download source


<div class='row'>
   <div class='col-lg-2'>image</div>
   <div class='col-lg-4'>textarea</div>
   <div class='col-lg-2'>image</div>
   <div class='col-lg-4'>textarea</div>
</div>

Now for mobile, it is controlled by .col-xs-* class, and smaller devices, .col-sm-* , and tablets .col-md-* . They stack up so you just add accordingly like this:

Code Download source


<div class='row'>
   <div class='col-xs-12 col-lg-2'>image</div>
   <div class='col-xs-12 col-lg-4'>textarea</div>
   <div class='col-xs-12 col-lg-2'>image</div>
   <div class='col-xs-12 col-lg-4'>textarea</div>
</div>

Please read up bootstrap 3.4. Mind that Bootstrap is now already 4+ and soon v5. The one v9 is using is v3.4

0 replies

Just so you know, I did read the section for indentation, but I have to be doing something wrong. The code in the post is without indentation. Reason I am trying to indent the lines is, that it sits right on the edge of the panel. Just trying to push it over a little. I guess I'm just not understanding the indentation part.

Code Download source

<div>
 <ul class="nav nav-tabs">
 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 <li><a href="#profile" data-toggle="tab">Profile</a></li>
 <li><a href="#messages" data-toggle="tab">Messages</a></li>
 </ul>

 <div class="tab-content">
 <div class="tab-pane active" id="home"><div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h5 class="media-heading">Middle aligned media</h5>
 ...
 </div>
</div>
<div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h5 class="media-heading">Middle aligned media</h5>
 ...
 </div>
</div>
<div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h5 class="media-heading">Middle aligned media</h5>
 ...
 </div>
</div>
<div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h5 class="media-heading">Middle aligned media</h5>
 ...
 </div>
</div>
</div>
 <div class="tab-pane" id="profile">...</div>
 <div class="tab-pane" id="messages">...</div>
 </div>
</div>
<hr/>

Also if I add this to the panel, It takes over and shows on the entire left side. It will enclose all my panels in one single panel.

Code Download source

<div class="panel panel-default">
 <div class="panel-heading">
 <h3 class="panel-title">Panel title</h3>
 </div>

0 replies

Category Forum

Panels and Infusions

Labels

None yet

Statistics

Views 0 views
Posts 12 posts
Votes 0 votes
Topic users 6 members

6 participants

Notifications

Track thread

You are not receiving notifications from this thread.

Infusion/Panel with 3 tabs

12 posts

PHPFusion

Resources

Community

Development