Evolution Theme: Thickbox tweaks

[athlon24]

Currently, the thickbox has 3 columns, recent, categories and archives. I am planning to incorporate another column. Like in blogging tips, your thick box has 4 columns. I want to add the Popular post, as the first column. I think, I need to make the Header's fontsize smaller, then add the column. Can I ask how to do it? :)

[sarahG]

Thickbox is a jQuery lightbox so I don't think you mean that? Do you mean the tabs on the right hand side? If so then you need to do the following steps

1. All the top tab so open tabs.php and find this block of code near the top

<li class="TabLink"><a id="tab0" onclick="ShowTab(0)">Recent</a></li>
<li class="TabLink"><a id="tab1" onclick="ShowTab(1)">Categories</a></li>
<li class="TabLink"><a id="tab2" onclick="ShowTab(2)">Archive</a></li>

You need to copy the top line and insert it above the rest. Change 'Recent' to be 'Popular'. Then for each of the lines above, change the number after ShowTab to the next one up ie.

<li class="TabLink"><a id="tab0" onclick="ShowTab(0)">Popular</a></li>
<li class="TabLink"><a id="tab0" onclick="ShowTab(1)">Recent</a></li>
<li class="TabLink"><a id="tab1" onclick="ShowTab(2)">Categories</a></li>
<li class="TabLink"><a id="tab2" onclick="ShowTab(3)">Archive</a></li>

2. under the following code

<li class="NavLinks" id="paging2"><div style="display:none"></div></li>

add

<li class="NavLinks" id="paging3"><div style="display:none"></div></li>

3. Then, find this code

<!-- First Tab Code -->
<div class="TabContent" style="display:none" id="div0">
<?php rewind_posts(); ?>
<ul id="recent">
<?php $posts = get_posts('numberposts=10'); foreach ($posts as $post): setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?>
</a></li>
<?php endforeach; ?>
</ul>
</div>


And copy it. Insert the copied version above the code above so you would have the code above twice.

Then change the first version of the code to be

<!-- First Tab Code -->
<div class="TabContent" style="display:none" id="div0">
<!-- code here to display popular posts -->
</div>


You need to then change the comment above to have the popular posts code or function in it along with any markup needed.

Then for each line as

<div class="TabContent" style="display:none" id="div0">

at the start of each opening tab, you need to change the number after the id of 'div' to be 1 more ie. the one above needs to be div1, then div1 becomes div2, div2 becomes div3.

Hopefully that makes sense.

To target the headers you can target li.TabLink

[athlon24]

I'm sorry, I thought the thickbox is what the tabs that you have in the sidebar. Oh my ignorance. I'll keep in touch in this one, I'll to implement it later after my class.

----------
@Sarah, I followed your steps, but I think, something is wrong again. when I click the recent, it goes to the categories and the design of the tabs is like when I had the jquery problem. :(

---------
It's working now, you had two tab0 in the first set of code that you gave, so I tried changing that too, into 0, 1, 2, 3 and it works like a charm. Thanks, Sarah.

[sarahG]

Ahh sorry, too late in the day, I missed the first tabX change. Glad you found it for yourself :)