SMF Tab Mod like in MyBB

[NanoSector]

Good luck with support.

Thanks!

(I'd much rather have a huge support topic than nobody reacting at all, lol)

[Scareface]

Github link not working. Would please reupload it ?

[NanoSector]

Here you go:

https://github.com/Yoshi2889/smf-2.0-mods/blob/master/TabbedCategories/Releases/tc0.1.0.zip?raw=true

[N i g h t m a r e]

Here you go:

https://github.com/Yoshi2889/smf-2.0-mods/blob/master/TabbedCategories/Releases/tc0.1.0.zip?raw=true

Only one problem, it doesn't go well with all themes because its auto-set for the default SMF theme... i tried it for a black theme and it had a white outline and looked horrible o.o

[Antechinus]

Hey question: why serve the un-minified files from jQuery instead of minified from Google CDN?

Code Select Expand

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<style>
.ui-widget-header
{
background: url("' . $settings['default_images_url'] . '/theme/main_block.png") no-repeat scroll -10px -280px rgb(167, 185, 205);
}
</style>

Also, re that little bit of css: you could do that as an edit to index.css instead, which would make it easier for people to customise. You don't need "scroll" in the declaration either, as that is default behaviour.

[NanoSector]

Thanks Ant, I have no idea why I'm not serving minified files, heh. I'll fix those issues asap

I really copied the css from the default theme so if it has scroll here it should also have it in there. I'll trim it down asap

Thanks again.

@PulsiveForums: Quite possible the CSS is interfering with your theme. I'll make some changes in the next version.

[Antechinus]

Default theme has scroll there? Weirdness. Dunno how that got missed before Final.

ETA: Just looked. Doesn't have it in default. Must have been some other theme you were looking at.

[NanoSector]

Oh well, I have a workaround for the theme issue now, and it now uses minified versions of jQuery where possible.

https://github.com/Yoshi2889/smf-2.0-mods/blob/master/TabbedCategories/Releases/tc0.1.1.tar.gz?raw=true

[DSystem]

Great MOD, this of congratulations. Check out ai with was on my forum...

[DSystem]

Want to customize by changing the colors of the buttons. But I'm not getting. I need help.

Made in photoshop the result we need.

[Scareface]

Is this compatible with all versions and themes ?

[NanoSector]

@dsystem: Thanks
Do you want to swap the colours around or make other changes too?

@Scareface: The mod works with SMF 2.0 only, and there's no guarantee it works with all themes. It should work on any theme based on the Default/Curve theme, but it does not work on Core-based themes.

[DSystem]

@dsystem: Thanks
Do you want to swap the colours around or make other changes too?

Thinking only of invert the colors of tabs.

Would Look Like This:
Inactive tab would be white.
Active tab would be blue.

I'm still learning programming, know a little PHP and SQL, so that CSS do not know almost nothing yet. More just pass me where I have to change that will be great

[NanoSector]

dsystem: I'm preparing some code for you right now, please stand by

[NanoSector]

dsystem:

In Sources/BoardIndex.php, find:

Code (Find) Select Expand

$("#category_tabs").tabs();

And replace it with:

Code (Replace) Select Expand

$("#category_tabs").tabs({
activate: function()
{
var activetab = $("#category_tabs .ui-state-active");
$("#category_tabs ul li").addClass("ui-state-active");
activetab.removeClass("ui-state-active");
}
});
$("#category_tabs ul li").addClass("ui-state-active");
$("#category_tabs ul li:first").removeClass("ui-state-active");

This works for me.

[DSystem]

Nearly so.

This with some error, always gets two tabs selected. (in blue)

Check out this link-> http://eletronicabr.com/index.php

[NanoSector]

Try this snippet, then:

Code Select Expand

$("#category_tabs").tabs({
activate: function(event, ui)
{
var activetab = ui.newTab;
$("#category_tabs ul li").addClass("ui-state-active");
activetab.removeClass("ui-state-active");
}
});
$("#category_tabs ul li").addClass("ui-state-active");
$("#category_tabs ul li:first").removeClass("ui-state-active");

[DSystem]

Perfect. Thank you very much.

Only one detail that don't think it's possible to get. More it costs ask.

It is a small white line at the bottom of the tab. You can strip her to join up with the table?

[NanoSector]

The only possibility there is to completely remove the space between all the borders there, like this:
http://i.imgur.com/kC72iZF.png
(excuse the size )

If you are okay with doing so, after that snippet, add:

Code Select Expand

$("#category_tabs table").css("border-spacing", "0");

[DSystem]

I added this code. More took all the rows of the table.

It is best to stay with the white line. 

Thank you even for the help. I really liked this MOD.