Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    jtw
    jtw is offline
    New Coder
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Custom Navigation Help

    Hi,

    I've been reading up on CSS but I'm still having some difficulties on customizing a navigation. I'm trying to create a custom navigation for an individual page through CSS. Is there a way i can possible override the current nav. with a new custom nav? I'm using a template from Virb and I'm wanting to have a custom nav. just for one of the pages. The tricky thing is, i'm only able to add custom CSS on individual pages and not HTML.


    CSS:
    Code:
    /* ---------- NAVIGATION ---------- */
    div#site_nav {
        padding: 0 0 10px 0;
        font-size: <virb get="customize.fonts.nav_size" />;
    }
        #site_nav ul li {
        	padding: 0 0 10px 0;
        }
        #site_nav ul li.section {
            padding: 5px 0 15px 0;
        }
        	#site_nav ul li ul li {
        		padding: 0;
        	}
    	
        	#site_nav ul li a,
        	body.homepage #site_nav ul li.page a {
        		color: <virb get="customize.colors.nav_link" />;
        		cursor: pointer;
        	}
        	#site_nav ul li a:hover, 
        	body.homepage #site_nav ul li a:hover,
        	#site_nav ul li.page.active a {
        		color: <virb get="customize.colors.nav_hover" />;
        	}
    	
        	#site_nav ul li.page.active a {
        		cursor: default;
        	}
        #site_nav ul li span.section_name {
        	cursor: default;
        	color: <virb get="customize.colors.nav_section" />;
    Here's the HTML just in case:

    Code:
    <!DOCTYPE html>
    <!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html lang="en" class="ie ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html lang="en" class="ie ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
    <html>
        <head>
            <virb load="title" />
            <virb load="meta" />
            <virb load="css" />
            <virb load="icon" />
    		<!--[if lt IE 8]>
    		<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    		<![endif]-->
        </head>
        <body class="get[page.type] get[page.format] get[page.class]">
            <!-- LEFT SIDE -->
            <div id="container_left">
            	<!-- HEADER -->
            	<div id="header">
                    <div class="module" id="display_name">
                        <h1><a href="/"><virb get="customize.logo" /></a></h1>
                    	<h2 id="virb_customize_tagline"><virb get="customize.tagline" /></h2>
                    </div>
                </div>
            	<!-- END HEADER -->
            	<hr/>
            	
                <div id="site_nav"><virb load="nav" /></div>
            	<hr/>
    			<!-- SIDEBAR -->
            	<div id="sidebar">
            		<virb load="sidebar" />
            	</div>
            	<!-- END SIDEBAR -->
            	
            	<!-- FOOTER -->
            	<div id="footer">
            		<p><virb get="customize.footer" /></p>
            	</div>
            	<!-- END FOOTER -->
            	
            </div>
            <!-- END LEFT SIDE -->
            <!-- RIGHT SIDE -->
            <div id="container_right">
            	<!-- PAGE -->
            	<div id="page">
                    <virb load="template" />
                </div>
                <!-- END PAGE -->
                
            </div>
            <!-- END RIGHT SIDE -->
            
        </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Do you have a link to your site?

  • Users who have thanked SeattleMicah for this post:

    jtw (06-06-2012)

  • #3
    jtw
    jtw is offline
    New Coder
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    The tricky thing is, i'm only able to add custom CSS on individual pages and not HTML.
    So you have no way to edit the HTML?

    Without distinguishing the HTML of that blog nav from that of the other pages, I don't think there is a way to edit to look of just that page.

    nice work btw

  • #5
    jtw
    jtw is offline
    New Coder
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I can edit the html, but if i do make changes, it affects the entire site. Unless there is a work around?

    HTML

    Code:
    <!DOCTYPE html>
    <!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html lang="en" class="ie ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html lang="en" class="ie ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
    <html>
        <head>
            <virb load="title" />
            <virb load="meta" />
            <virb load="css" />
            <virb load="icon" />
    		<!--[if lt IE 8]>
    		<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    		<![endif]-->
        </head>
        <body class="get[page.type] get[page.format] get[page.class]">
            <!-- LEFT SIDE -->
            <div id="container_left">
            	<!-- HEADER -->
            	<div id="header">
                    <div class="module" id="display_name">
                        <h1><a href="/"><virb get="customize.logo" /></a></h1>
                    	<h2 id="virb_customize_tagline"><virb get="customize.tagline" /></h2>
                    </div>
                </div>
            	<!-- END HEADER -->
            	<hr/>
            	
                <div id="site_nav"><virb load="nav" /></div>
            	<hr/>
    			<!-- SIDEBAR -->
            	<div id="sidebar">
            		<virb load="sidebar" />
            	</div>
            	<!-- END SIDEBAR -->
            	
            	<!-- FOOTER -->
            	<div id="footer">
            		<p><virb get="customize.footer" /></p>
            	</div>
            	<!-- END FOOTER -->
            	
            </div>
            <!-- END LEFT SIDE -->
            <!-- RIGHT SIDE -->
            <div id="container_right">
            	<!-- PAGE -->
            	<div id="page">
                    <virb load="template" />
                </div>
                <!-- END PAGE -->
                
            </div>
            <!-- END RIGHT SIDE -->
            
        </body>
    </html>

  • #6
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    To clarify, you wont all of the navigation links, only on the blog page, to appear different, be it their color or whatever?

  • #7
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Just create a new div id in your stylesheet such as

    div#site_nav2{

    with your new menu code within this new set of rules. Be sure each rule for the menu has the proper designation( use the current menu rules as a guideline for naming the ul's and li's )

    Now for your single page just call

    <div id="site_nav2">MENU HTML</div>
    Last edited by badwolf; 06-08-2012 at 05:42 PM.

  • #8
    jtw
    jtw is offline
    New Coder
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Seattle, yes, i'm just looking to have a different set of nav. links for just the blog page.

    badwolf, i'll give it a try and see how it works out. Thanks.


  •  

    Posting Permissions

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