Hide default menu + Use font-awesome css custom menu + Tabs issue

Started by elf_fu, September 08, 2014, 02:46:16 AM

Previous topic - Next topic

elf_fu


:welcome: Howdy. It's me again. Guess what, chicken butt?


I want to do something completely out of the scope of my own knowledge. Again. Still.


The basics, my forum is:
SMF 2.0.8
Theme: Crips Back n' Black
Mods: A lot, can list them all if needed


First: I discovered font-awesome today and a nifty as heck css menu. I like it. It's a lot shinier than the default the forum/forum theme provides, and, I could theoretically customize at whim/add remove links, reorganize and so on.


Currently I am using a simple portal block only visible to admins (which is me) to start monkeying around with the look.


In a perfect world, I would have this disappear/be hidden:



---and turn into this:



But I have issues. (Don't we all?)
1.) Displaying the portal block at the top of my forum messes up my beautiful tabbed categories that Nano so helpfully mashed errors and worked on the theme to install. If I just try and check it out, that menu turns the tabs from this:
[/font]


to this:
[/font]


2.) Absolutely no frakkin' clue how I would go about coding this. Yeah! Newb bro fist?


Mod I have installed for tabbed categories is here: http://custom.simplemachines.org/mods/index.php?mod=3720
Also have Menu Editor Lite installed: http://custom.simplemachines.org/mods/index.php?mod=3310


This is the big ol' chunk of css & html I have in a Simpleportal block for now:
<center><nav class="nav">
  <ul>
    <li><a href="#"><i class="fa fa-home"></i><Br/>Home</a></li>
    <li><a href="#"><i class="fa fa-pencil"></i><Br/>Forum</a></li>
    <li><a href="#"><i class="fa fa-book"></i><Br/>Getting Started</a>
         <ul>
           <li><a href="#"><i class="fa fa-cog"></i>Register an Account</a></li>
           <li><a href="#"><i class="fa fa-envelope"></i>AOL Email registration issues</a></li>
           <li><a href="#"><i class="fa fa-exclamation-triangle"></i>Guidelines</a></li>
           <li><a href="#"><i class="fa fa-bullhorn"></i>GR's Mature Rating</a></li>
           <li><a href="#"><i class="fa fa-question"></i>About GreaterRealms</a></li>
           <li><a href="#"><i class="fa fa-exclamation-triangle"></i>Chat Room Guidelines</a></li>
           <li><a href="#"><i class="fa fa-question"></i>Beginner's Guide</a></li>
           <li><a href="#"><i class="fa fa-question"></i>How to participate</a></li>
           <li><a href="#"><i class="fa fa-question"></i>Knowledge Base</a></li>
           <li><a href="#"><i class="fa fa-question"></i>Questions & Support Forum</a></li>
        </ul>
    </li>
    <li><a href="#"><i class="fa fa-gamepad"></i><Br/>Gaming & Shops</a>
<ul>
           <li><a href="#"><i class="fa fa-cogs"></i>Log into the Chat Room</a></li>
           <li><a href="#"><i class="fa fa-pencil-square-o"></i>Chat Room Logs</a></li>
           <li><a href="#"><i class="fa fa-calendar"></i>RP Event Calendar</a></li>
           <li><a href="#"><i class="fa fa-plus"></i>Add your RP event to Calendar</a></li>
           <li><a href="#"><i class="fa fa-eye"></i>View RP Event forum</a></li>
           <li><a href="#"><i class="fa fa-gamepad"></i>Visit GR's Arcade</a></li>
           <li><a href="#"><i class="fa fa-eye"></i>View the Awards List</a></li>
           <li><a href="#"><i class="fa fa-beer"></i>RDI & ROH Log Viewer</a></li>           
           <li><a href="#"><i class="fa fa-shield"></i>RPG Shop</a></li>
           <li><a href="#"><i class="fa fa-shopping-cart"></i>GR Swag</a></li>
        </ul>
   
    <li><a href="#"><i class="fa fa-user"></i><Br/>Member Area</a>
    <ul>
           <li><a href="#"><i class="fa fa-eye"></i>View our Team Page</a></li>
           <li><a href="#"><i class="fa fa-desktop"></i>Check your PM's</a></li>
           <li><a href="#"><i class="fa fa-code"></i>Send a PM</a></li>
           <li><a href="#"><i class="fa fa-cog"></i>Edit your Character Profile</a></li>
           <li><a href="#"><i class="fa fa-cog"></i>Change the Look & Feel of the Forum</a></li>
           <li><a href="#"><i class="fa fa-cog"></i>Your Account Settings</a></li>
           <li><a href="#"><i class="fa fa-code"></i>Manage your Subaccounts</a></li>
           <li><a href="#"><i class="fa fa-eye"></i>View your own Profile</a></li>
           <li><a href="#"><i class="fa fa-eye"></i>View the Memberlist</a></li>
           <li><a href="#"><i class="fa fa-search"></i>Search for Members</a></li>
           <li><a href="#"><i class="fa fa-eye"></i>View the Banlist</a></li>
           <li><a href="#"><i class="fa fa-star"></i>Hand out Awards to fellow Members</a></li>
        </ul>
    <li><a href="#"><i class="fa fa-money"></i><Br/>Donate</a></li>
    <li><a href="#"><i class="fa fa-power-off"></i><Br/>Log Out</a>
    <li><a href="#"><i class="fa fa-tachometer"></i><Br/>Staff</a>
       
</nav></center>






<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>


<style>
/* Styling the navigation bar */
.nav {
    background-color:#282828;
    width:auto;
    }

.nav ul {
    margin:0;
    padding:0;
    }

.nav ul li {
    list-style:none;
    display:inline-block;
    margin:0;
    }

.nav ul li a {
    display:block;
    text-decoration:none;
    text-align:center;
    padding:10px 30px 10px 30px;
    color:#6495ed;
    font-size:15px;
    font-family:Arial, Helvetica, sans-serif;
    transition: color 0.5s, background 0.5s;
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */
    }   
     
.nav ul li:hover a {   
    color:#6495ed;
    padding-bottom:10px;
    background-color:#171717;
    transition: color 0.5s, background 0.5s;
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */
    }


/* Styling the dropdown */
.nav ul li ul {
    display:none;
    }   
     
.nav ul li:hover ul {
    z-index:2;
    position:absolute;
    display:block;
}   

.nav ul li ul
{
    position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.nav ul li ul:before, .nav ul li ul:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.;
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.;
    box-shadow:0 0 20px rgba(0,0,0,0.;
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

.nav ul li ul li {
    list-style:none;
    display:block;
    float:none;
    }

.nav ul li ul li:hover a { 
    color:#c9dcff;
    padding-bottom:10px;
    background-color:#212121;
    transition: color 0.5s, background 0.5s;
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */
    }

.nav ul li ul li {}

.nav ul li ul li a {
    padding:5px 15px 5px 15px;
    text-align:left;
    }

.nav ul li ul li a i {
    min-width:20px;
    padding-right:10px;
    }


/* Adding a mark to indicate a dropdown */
.nav li > a:after { content: ' »'; }

   
.nav > li > a:after {content: ' »'; }

 
.nav li > a:only-child:after {content: ''; }


/* Active class to let users know what page they are on */
.nav ul .active {
    color:#FFF;
}
</style>



Would anyone please like to try and help walk me through how to hide the old menu/add the new one/help me figure out if it will conflict with my Tabbed Categories Mod like it does already as a SimplePortal Block? Is it too much work to ask help for without offering dollahdollah bills? (My husband just lost his job, otherwise I would offer right away to pay for someone instead of for help)

GR

Antechinus

It should be pretty easy to sort. Someone else can have a crack at it, since I'm not currently much into coding (got other things on the go). If you get really stuck I might take a look.

Hj Ahmad Rasyid Hj Ismail

I just noted about font-awesome yesterday. I am also thinking on how to apply this as well. Though I am very interested with this css thing, I also don't have not much time to play with it. I will try to have a visit and see how e can work on this later.

elf_fu

Quote from: Antechinus on September 08, 2014, 04:14:54 AM
It should be pretty easy to sort. Someone else can have a crack at it, since I'm not currently much into coding (got other things on the go). If you get really stuck I might take a look.


Given the work you've done on the Apocalypse theme, I should think you'd be ready to take a 10 year coding break <3 Coolbeans, and good luck with all the other projects!

QuoteI just noted about font-awesome yesterday. I am also thinking on how to apply this as well. Though I am very interested with this css thing, I also don't have not much time to play with it. I will try to have a visit and see how e can work on this later.

Thank you!

GR

Advertisement: