...
PDA

Custom Navigation Help

jtw
06-05-2012, 01:27 PM
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:
/* ---------- 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:

<!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>
SeattleMicah
06-05-2012, 04:27 PM
Do you have a link to your site?
jtw
06-06-2012, 04:28 PM
http://ideologyphotography.com/blog
SeattleMicah
06-06-2012, 04:48 PM
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
jtw
06-07-2012, 05:31 AM
I can edit the html, but if i do make changes, it affects the entire site. Unless there is a work around?

HTML

<!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>
SeattleMicah
06-07-2012, 10:49 PM
To clarify, you wont all of the navigation links, only on the blog page, to appear different, be it their color or whatever?
badwolf
06-08-2012, 04:37 PM
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>
jtw
06-11-2012, 10:36 PM
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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum