SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help me with active links.

    I really need some help I have tried EVERYTHING I could think of and NOTHING works

    I am trying to make it so when a link is active it has a whole differnt background. It's kind of hard to explain, but here is an example, look here: http://forums.invisionpower.com/ you should see on the Submenu (close to the top) the words: IPS Home - Discussion - Members - Blogs - Tracker - Calendar - Gallery. And how the Discussion one has a green background, and the others have a blue. Now click on the Members one and the Members one will have the green background. How do I get that!? I have tried everything I could think of! But nothing works!

    Please help if you know what it is
    Thank you

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,003
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    If you simply want the inks to look different you can use pseudo-selectors, eg. a:hover, a:active, a:visited

    If you want the "current tab" look you need to do something like invisionpower does
    HTML Code:
    <ul>
    	<li id='nav_home' class='left'>
    		<a href='http://www.invisionpower.com' title='Homepage' rel="home">IPS Home</a>
    	</li>
    	<li id='nav_discussion' class='left active'>
    		<a href='http://forums.invisionpower.com/index' title='Go to Discussion'>Discussion</a>
    	</li>
    	<li id='nav_members' class='left '>
    		<a href='http://forums.invisionpower.com/index.php?app=members&amp;section=view&amp;module=list' title='Go to Member List'>Members</a>
    	</li>
    Then style the .active tag accordingly.

  3. #3
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still don't get it . Here is my code that my forum uses for the menu I want to do it in.

    HTML Code:
    <!--ipb.javascript.start-->
    <script type="text/javascript">
     //<![CDATA[
     var ipb_var_st            = "{$this->ipsclass->input['st']}";
     var ipb_lang_tpl_q1       = "{$this->ipsclass->lang['tpl_q1']}";
     var ipb_var_s             = "{$this->ipsclass->session_id}";
     var ipb_var_phpext        = "{$this->ipsclass->vars['php_ext']}";
     var ipb_var_base_url      = "{$this->ipsclass->js_base_url}";
     var ipb_var_image_url     = "{$this->ipsclass->vars['img_url']}";
     var ipb_input_f           = "{$this->ipsclass->input['f']}";
     var ipb_input_t           = "{$this->ipsclass->input['t']}";
     var ipb_input_p           = "{$this->ipsclass->input['p']}";
     var ipb_var_cookieid      = "{$this->ipsclass->vars['cookie_id']}";
     var ipb_var_cookie_domain = "{$this->ipsclass->vars['cookie_domain']}";
     var ipb_var_cookie_path   = "{$this->ipsclass->vars['cookie_path']}";
     var ipb_md5_check         = "{$this->ipsclass->md5_check}";
     var ipb_new_msgs          = {$this->ipsclass->member['new_msg']};
     var use_enhanced_js       = {$this->ipsclass->can_use_fancy_js};
     var use_charset           = "{$this->ipsclass->vars['gb_char_set']}";
     var ipb_myass_chars_lang  = "{$this->ipsclass->lang['myass_chars']}";
     var ajax_load_msg		   = "{$this->ipsclass->lang['ajax_loading_msg_new']}";
     //]]>
    </script>
    <script type="text/javascript" src='jscripts/ips_ipsclass.js'></script>
    <script type="text/javascript" src='jscripts/ipb_global.js'></script>
    <script type="text/javascript" src='jscripts/ips_menu.js'></script>
    <script type="text/javascript" src='{$this->ipsclass->vars['img_url']}/folder_js_skin/ips_menu_html.js'></script>
    <script type="text/javascript" src='cache/lang_cache/{$this->ipsclass->lang_id}/lang_javascript.js'></script>
    <script type="text/javascript">
    //<![CDATA[
    var ipsclass = new ipsclass();
    ipsclass.init();
    ipsclass.settings['do_linked_resize'] = parseInt( "{$this->ipsclass->vars['resize_linked_img']}" );
    ipsclass.settings['resize_percent']   = parseInt( "{$this->ipsclass->vars['resize_img_percent']}" );
    //]]>
    </script>
    <!--ipb.javascript.end-->
    	<div id="logostrip"><a href='{$this->ipsclass->base_url}'><!--ipb.logo.start--><img src='style_images/<#IMG_DIR#>/logo4.gif' style='vertical-align:top' alt='IPB' border='0' /><!--ipb.logo.end--></a></div>
    	<div id="submenu">
    		<!--ipb.leftlinks.start-->
    		<div id='submenu_left'>
    		<if="$this->ipsclass->vars['home_url']">
    			<a href="{$this->ipsclass->vars['home_url']}">{$this->ipsclass->vars['home_name']}</a>
    		</if>
    		<if="$this->ipsclass->vars['csite_on']">
    			<a href="{$this->ipsclass->base_url}act=home">{$this->ipsclass->vars['csite_title']}</a>
    		</if>	
    		<!--IBF.RULES-->
    		</div>
    		<!--ipb.leftlinks.end-->
    		<!--ipb.rightlinks.start-->
    		<div id='submenu_right'>
    			<a href="{$this->ipsclass->base_url}act=Help">{$this->ipsclass->lang['tb_help']}</a>
    			<a href="{$this->ipsclass->base_url}act=Search&amp;f={$this->ipsclass->input['f']}" id="ipb-tl-search">{$this->ipsclass->lang['tb_search']}</a>
    			<a href="{$this->ipsclass->base_url}act=Members">{$this->ipsclass->lang['tb_mlist']}</a>
    			<a href="{$this->ipsclass->base_url}act=calendar">{$this->ipsclass->lang['tb_calendar']}</a>
    			<if="$component_links != """>
    				{$component_links}
    			</if>
    			<div class='popupmenu-new' id='ipb-tl-search_menu' style='display:none;width:210px'>
    				<form action="{$this->ipsclass->base_url}act=Search&amp;CODE=01" method="post">
    					<input type='hidden' name='forums' id='gbl-search-forums' value='all' /> 
    					<input type="text" size="20" name="keywords" id='ipb-tl-search-box' />
    					<input class="button" type="image" style='border:0px' src="{$this->ipsclass->vars['img_url']}/login-button.gif" />
    					<if="($this->ipsclass->input['act'] == 'sf' OR $this->ipsclass->input['act'] == 'st') AND $this->ipsclass->input['f']">
    						<br /><input type='checkbox' id='gbl-search-checkbox' value='1' onclick='gbl_check_search_box()' checked='checked' /> {$this->ipsclass->lang['gbl_forum_search']}
    					</if>
    				</form>
    				<div style='padding:4px'>
    					<a href='{$this->ipsclass->base_url}act=Search'>{$this->ipsclass->lang['gbl_more_search']}</a>
    				</div>
    			</div>
    			<script type="text/javascript">
    				ipsmenu.register( "ipb-tl-search", 'document.getElementById("ipb-tl-search-box").focus();' );
    				gbl_check_search_box();
    			</script>
    		</div>
    		<!--ipb.rightlinks.end-->
    	</div>
    <if="$this->ipsclass->can_use_fancy_js != 0">
    <script type="text/javascript" src='jscripts/ips_xmlhttprequest.js'></script>
    <script type="text/javascript" src='jscripts/ipb_global_xmlenhanced.js'></script>
    <script type="text/javascript" src='jscripts/dom-drag.js'></script>
    <div id='get-myassistant' style='display:none;width:400px;text-align:left;'>
    <div class="borderwrap">
     <div class='maintitle' id='myass-drag' title='{$this->ipsclass->lang['myass_drag']}'>
      <div style='float:right'><a href='#' onclick='document.getElementById("get-myassistant").style.display="none"; return false;' title='{$this->ipsclass->lang['myass_close']}'>[X]</a></div>
      <div>{$this->ipsclass->lang['myass_title']}</div>
     </div>
     <div id='myass-content' style='overflow-x:auto;'></div>
     </div>
    </div>
    <!-- Loading Layer -->
    <div id='loading-layer' style='display:none'>
    	<div id='loading-layer-shadow'>
    	   <div id='loading-layer-inner'>
    	 	<img src='style_images/<#IMG_DIR#>/loading_anim.gif' border='0' alt='{$this->ipsclass->lang['ajax_loading_msg']}' />
    		<span style='font-weight:bold' id='loading-layer-text'>{$this->ipsclass->lang['ajax_loading_msg']}</span>
    	    </div>
    	</div>
    </div>
    <!-- / Loading Layer -->
    <!-- Msg Layer -->
    <div id='ipd-msg-wrapper'>
    	<div id='ipd-msg-title'>
    		<a href='#' onclick='document.getElementById("ipd-msg-wrapper").style.display="none"; return false;'><img src='style_images/<#IMG_DIR#>/close.png' alt='X' title='Close Window' class='ipd' /></a> &nbsp; <strong>{$this->ipsclass->lang['gbl_sitemsg_header']}</strong>
    	</div>
    	<div id='ipd-msg-inner'><span style='font-weight:bold' id='ipd-msg-text'></span><div class='pp-tiny-text'>{$this->ipsclass->lang['gbl_auto_close']}</div></div>
    </div>
    <!-- Msg Layer -->
    </if>
    <!-- / End board header -->
    If someone could help me and tell me what I need to add. I know how to use the a, a:visited, a:hover, and a:active in my css, but none of those work....

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,003
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    Are you sure that's the right template file? I don't see any <li> tags in it. You may need to change your template/theme to one that supports tabbed list navigation.

    The invisionpower site has a rather extensive minified CSS file, but the applicable rules are
    Code CSS:
    #primary_nav ul li.active, 
    #primary_nav ul li a:hover, 
    #primary_nav ul li.active a {
      color: #fff;
      text-decoration: none;
     }
     
    #primary_nav ul li.active {
      background: transparent url([url]http://forums.invisionpower.com/public/style_images/master/tab_left.png[/url]) no-repeat top left;
      font-size: 1.05em;
      font-weight: bold;
      padding: 0;
      margin: -4px 0px auto auto;
      position: relative;
     }
     
    #primary_nav ul li.active a {
      background: transparent url([url]http://forums.invisionpower.com/public/style_images/master/tab_right.png[/url]) no-repeat top right;
      padding: 10px 15px 10px 10px;
      margin-left: 6px;
      display: block;
     }

  5. #5
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea, That is where I want it to be. Do I have to add the <li> tags? When I do it comes up with the list circle icon things. I can add things to it if I need to, but I don't know what to add, and where...

    Want me to add those css codes to my CSS...?

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,003
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    The list style markers can be removed using CSS, but IMHO you would be better off looking for a template/theme that already has that kind of navigation before attempting to hack your present file. Whatever you do, save back-ups before making any changes.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •