I am very new to Wordpress. I have strated working on new theme for my automotive blog and have decided to use IDtab's tabbed sidebar (JQuery); however, I can't seem to get it to work or show properly. The website is www.autotribute.net (look at how IDtabs shows up on the sidebar...). Does any one know the steps I need to take to get it to work?
Hi, it looks like Your tabs are using YAHOO.widget.TabView widget and not jQuery, and it looks like it works correctly (tabs are swiching with no problems - but the tabs content and the tabs background are in the same color -white - so it is not visible - just change #sidebar {color: #000} to see the difference) -- Mariush
IDtabs is the last widget on the sidebar. I'm using two tabbed widgets, one of which is the YAHOO tabs.
ok, now I see - my fault - but now the other problem is that the idtab jQuery script 'jquery.idTabs.min.js' and jQuery library itself 'jquery-latest.min.js' dont even load - so please check the path to those scripts -- Mariush
I understand that it's not loading; however, I am very new to Wordpress so I don't know what you mean when you say 'check the path of those scripts". I have the latest version of Wordpress; I thought it incorporated JQuery. Could you do me favor? I looked at the setup page, but it doesn't give too much insight for Wordpress newbies like myself. I was wondering if you could give me a simple walk-through of the setup?
<?php wp_enqueue_script('idtabs', get_bloginfo("template_url") . '/js/jquery.idTabs.min.js', array('jquery')); ?> PHP: put above line in header.php file in Your theme before this line: <?php wp_head(); ?> PHP: of course first You need to download jquery.idTabs.min.js file and put it inside /js/ directory in Your theme directory (so for example if Your theme directory is: /wp-content/themes/misty-free/misty/ then copy jquery.idTabs.min.js file into /wp-content/themes/misty-free/misty/js/ directory - if there isn't /js/ directory then create one) -- Mariush
Could I just copy and paste the jquery.idTabs.min.js file into an extra php section of my website? I did that and enclosed it in between <script src="jquery.js"> and </script>. Is that possible?
i don't know what do You mean by extra php section and please write where did You put (in which directory) downloaded jquery.idTabs.min.js file because I cant find it (I was tring to find this file on Your website and without success), anyway if You don't know how to and where to put this file then You have an alternative way: 1) now I see on Your website that finally in some way You included jQuery to Your site - that is ok, so now please 2) go to Your admin panel and click "Appearance -> Widgets" from left menu and then from available widgets list drag&drop 'Text widget' into Your sidebar (place it at the last position on the sidebar list) and copy&paste content of jquery.idTabs.min.js file into this widget (of course remember to enclose this with script tags <script language="javascript" type="text/javascript"> <!-- //place here content of jquery.idTabs.min.js file --> </script>). Now it should work. -- Mariush
I tried this approach -- after having to create a js folder, I uploaded the jquery.idTabs.min.js script/file into it. However, IDtabs still doesn't show up properly on my website.
I just checked Your website and it seems that You finally get those idTabs plugin to work (I mean successfully included plugin file in the site), I am curious what was wrong that idTabs plugin file can't load on the site before.
If it's working, how come it's not showing properly? Why is it that it doesn't look anything like how it does on the developer's page?
it is working properly (I mean javascript plugin), however You need to apply appropriate 'css styles' if You want Your tab to look as on the developer's page. Here is the 'css style' piece of code You need to copy&paste at the end of Your style.css file in Your theme directory: #sidebar .usual { background:#181818; color:#111; padding:15px 20px; width:500px; border:1px solid #222; margin:8px auto; } #sidebar .usual li { list-style:none; float:left; } #sidebar .usual ul a { display:block; padding:6px 10px; text-decoration:none!important; margin:1px; margin-left:0; font:10px Verdana; color:#FFF; background:#444; } #sidebar .usual ul a:hover { color:#FFF; background:#111; } #sidebar .usual ul a.selected { margin-bottom:0; color:#000; background:snow; border-bottom:1px solid snow; cursor:default; } #sidebar .usual div { padding:10px 10px 8px 10px; *padding-top:3px; *margin-top:-15px; clear:left; background:snow; font:10pt Georgia; } #sidebar .usual div a { color:#000; font-weight:bold; } Code (markup): above piece of code is directly from the developer's page source code (I only add #sidebar selector, because without that some idTabs elements was getting style from other wordpress style selectors that were more precise), in addition You also need to enclose Your html tabs elements in <div class="usual"> tag as below: <div class="usual"> <ul class="idTabs"> <li><a href="#jquery">jQuery</a></li> <li><a href="#official">Tabs 3</a></li> </ul> <div id="jquery">If you haven't checked out ...</div> <div id="official">idTabs is only a simple ...</div> </div> Code (markup): ...on the developer's page he or she did not mention about that probably because he/she assumed that potencial users know that and because it is about javascript jQuery plugin and not about css styles.
Can anyone help with another issue? I need help aligning the tabs on my YAHOO tabbed sidebar. It seems that the inactive tab (the one furthest to the left) won't float to the left. How do I do it so that it floats to the same position as the active "breaking" tab? Here is the CSS that I used: