Advertise Here

Author Topic: [Code] Move the Navigation  (Read 1208 times)

0 Members and 1 Guest are viewing this topic.

Offline Celebrus

  • SMF For Free Hero
  • *
  • Posts: 941
    • View Profile
    • Vikhyat Korrapati

  • Total Badges: 16
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
[Code] Move the Navigation
« on: February 02, 2009, 01:23:35 am »
Preview: http://celebrusisawesome.smfforfree.com/

First, ensure you have the jQuery include in your headers. It looks somewhat like this-
Code: [Select]
<script src="/jquery.js" type="text/javascript"></script>

Next, put this wherever your new tabs should appear.
Code: [Select]
<div id="_nav"></div>
In the preview, I put it at the very top of my headers.

Finally, add this to your footers.
Code: (javascript) [Select]
<script>
/*
 * Code created by Celebrus
 * - www.vikhyat.info
 * - aetus.net
 * - revolutionx.smffofree3.com
 */
// EDIT AFTER THIS IF YOU WANT TO.
reclass =                        "mirrortab";            // decides the root, try changing it to 'maintab' and see what happens
align_to_right =               true;                    // true/false
get_rid_of_top_padding =  false;                   // works better when 'reclass' is set to 'maintab'. once again, true/false
// EDITING ANYTHING AFTER THIS WILL VOID YOUR WARRANTY.

$(".maintab_active_back:contains(Home)").parent().parent().parent().appendTo("#_nav");
$(".maintab_back:contains(Home)").parent().parent().parent().appendTo("#_nav");
if(align_to_right)$("div#_nav").css("float","right").next().css("clear","both");
if(get_rid_of_top_padding)
{
  $("body").css("padding-top","0");
  $("#_nav").css("margin-bottom","10px")
}
$("div#_nav td.maintab_back").removeClass("maintab_back").addClass(reclass+"_back");
$("div#_nav td.maintab_first").removeClass("maintab_first").addClass(reclass+"_first");
$("div#_nav td.maintab_last").removeClass("maintab_last").addClass(reclass+"_last");
$("div#_nav td.maintab_active_back").removeClass("maintab_active_back").addClass(reclass+"_active_back");
$("div#_nav td.maintab_active_last").removeClass("maintab_active_last").addClass(reclass+"_active_last");
$("div#_nav td.maintab_active_first").removeClass("maintab_active_first").addClass(reclass+"_active_first");
</script>

Customization:
As you can see, there are 3 variables you can edit. They should be more or less self-explanatory, but I'll explain them.
reclass: This variable decides what the 'root' class of your new navigation will be. With 'maintab', the curved edges will be at the bottom. It looks like the default tabs. With 'mirrortab' the same thing would be inverted. In the preview, it is set to 'mirrortab'.
align_to_right: In the preview, you'd see that the tabs are to the right of the page. If you want it to be on left, change this to false. (without quotes)
get_rid_of_top_padding: This will basically stick the tabs at the very top of the page (with no gap) if you put the <div> on top of your headers.

Further customization:
If you want to customize it further, such as adding padding, and you know what you are doing, you can customize it with CSS using the div#_nav rule.

Notes:
1. This was inspired by sibyl's Endless theme which was a conversion of one by Crip.
2. I don't know if it's legal to have an underscore at the start of an id.

Disclaimer: THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Offline asdfbls12

  • SMF For Free Newbie
  • *
  • Posts: 13
    • View Profile

  • Total Badges: 14
    Badges: (View All)
    Poll Voter Level 3 Fourth year Anniversary Windows User Topic Starter
Re: [Code] Move the Navigation
« Reply #1 on: February 02, 2009, 02:00:36 am »
Awesome! I'll try this out right away.

 

Related Topics

  Subject / Started by Replies Last post
12 Replies
4904 Views
Last post March 31, 2009, 08:25:54 am
by Gablilg
10 Replies
2574 Views
Last post November 29, 2008, 10:44:09 pm
by simply sibyl
6 Replies
1790 Views
Last post November 28, 2008, 02:08:22 pm
by Josh[y]
1 Replies
684 Views
Last post December 13, 2008, 08:26:32 pm
by simply sibyl
0 Replies
1641 Views
Last post January 26, 2011, 05:53:59 pm
by Arekay