Jump to content


Photo
Hero Nav

Individual Hero Nav Style (by groups of pages)



Best Answer micstepl , 24 July 2014 - 08:25 AM

@micstepl,

 

Sorry to hear you're having trouble styling Hero Nav the way you want Michael.  I can offer some suggestions but custom coding like this is really outside the scope of this forum.

 

 

You can achieve different styles on different pages by nesting your styles in the class for the specific page you want to style.

 

You could try something like this, using the following LESS as an example:

 
// assuming page id is 50
body.page-id-50 {
	.section-hero-nav .hero-nav .hero-nav-ul.separated > li {
	border-right: 1px solid #afafaf;
	}
	 
	.section-hero-nav .hero-nav .hero-nav-ul > li > a {
	color: #0099ff;
	}
	 
	.section-hero-nav .hero-nav {
	background-color: #afafaf;
	shadow: silver 0 -6px 6px;
	border-bottom: 1px solid #afafaf;
	}
	 
	.hero-nav-collapse-btn {
	padding: 4px 8px;
	font-size: 1.0em;
	}
}

// assuming page id is 52
body.page-id-50 {
	.section-hero-nav .hero-nav {
		background-color: @gray;
	}
}

Simply inspect the body tag on the page you want to customize to see the relevant page-id-X class to use.

 

Like I mentioned before, this is what my PageLESS extension is designed for - custom styles for individual pages/posts.  No need to fuss with these classes.  You can define your own custom styles for any page/post using LESS/CSS.

 

Good luck!

 

 

Thanks SOOOOOO much :) I really appreciate your tip - it worked!#

 

I can only recommend you as a developer for your pragmatic, competent support!

 

br

,Michael

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 micstepl

micstepl

    Super Member

  • Members


  • 143 posts
  • LocationVIE
  • Framework Version:latest
  • Country: Country Flag

Posted 23 July 2014 - 02:18 PM

Is there a possibility to create custom CSS ...

  • that adds different style options
  • to different menues on a site (on fdiffernt sites)
  • ... which bypasses the General setting scheme

 

Reason for that is, that I want to have some sort of different color coding on different pages (eg. Text color).

Using this class to than enter the new class into the respektive sections "Custom Styling Classes".

 

br

,Michael



#2 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 222 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 23 July 2014 - 03:36 PM

@micstepl,

 

Yes it is possible, but there is no built-in feature in Hero Nav to accomplish that if that's what you're asking?  The Hero Nav styles are global and apply to all instances of the section and you can't simply change one of the styling options for it on one page.

You would need to create those styles yourself and apply them on the pages you want to change.

To do that, you could use the unique page-id class that is added to the body, or you could use a more sophisticated tool like my Page{LESS} extension.

 

Hope that helps!



#3 micstepl

micstepl

    Super Member

  • Members


  • 143 posts
  • LocationVIE
  • Framework Version:latest
  • Country: Country Flag

Posted 23 July 2014 - 03:44 PM

@micstepl,

 

Yes it is possible, but there is no built-in feature in Hero Nav to accomplish that if that's what you're asking?  The Hero Nav styles are global and apply to all instances of the section and you can't simply change one of the styling options for it on one page.

You would need to create those styles yourself and apply them on the pages you want to change.

To do that, you could use the unique page-id class that is added to the body, or you could use a more sophisticated tool like my Page{LESS} extension.

 

Hope that helps!

 

not really :(

 

WORKING

I tried to  to change style with code below, which works when inserting in the custom code field. It overrides than the global settings, but un all NAVĀ“s.

 

NOT WORKING

If I wrap code bist in custom classes and insert the classes than in the Section it doees not work.

 

pls help

tax in advance

,Michael

 

 

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
 
.section-hero-nav .hero-nav .hero-nav-ul.separated > li {
border-right: 1px solid #afafaf;
}
 
.section-hero-nav .hero-nav .hero-nav-ul > li > a {
color: #0099ff;
}
 
.section-hero-nav .hero-nav {
background-color: #afafaf;
shadow: silver 0 -6px 6px;
border-bottom: 1px solid #afafaf;
}
 
.hero-nav-collapse-btn {
padding: 4px 8px;
font-size: 1.0em;
}
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
 
eg. 
 
 
.MyOwnClass {.section-hero-nav .hero-nav .hero-nav-ul > li > a {
color: #0099ff;
}
}
 


#4 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 222 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 23 July 2014 - 11:17 PM

@micstepl,

 

Sorry to hear you're having trouble styling Hero Nav the way you want Michael.  I can offer some suggestions but custom coding like this is really outside the scope of this forum.

 

 

You can achieve different styles on different pages by nesting your styles in the class for the specific page you want to style.

 

You could try something like this, using the following LESS as an example:

 
// assuming page id is 50
body.page-id-50 {
	.section-hero-nav .hero-nav .hero-nav-ul.separated > li {
	border-right: 1px solid #afafaf;
	}
	 
	.section-hero-nav .hero-nav .hero-nav-ul > li > a {
	color: #0099ff;
	}
	 
	.section-hero-nav .hero-nav {
	background-color: #afafaf;
	shadow: silver 0 -6px 6px;
	border-bottom: 1px solid #afafaf;
	}
	 
	.hero-nav-collapse-btn {
	padding: 4px 8px;
	font-size: 1.0em;
	}
}

// assuming page id is 52
body.page-id-50 {
	.section-hero-nav .hero-nav {
		background-color: @gray;
	}
}

Simply inspect the body tag on the page you want to customize to see the relevant page-id-X class to use.

 

Like I mentioned before, this is what my PageLESS extension is designed for - custom styles for individual pages/posts.  No need to fuss with these classes.  You can define your own custom styles for any page/post using LESS/CSS.

 

Good luck!



#5 micstepl

micstepl

    Super Member

  • Members


  • 143 posts
  • LocationVIE
  • Framework Version:latest
  • Country: Country Flag

Posted 24 July 2014 - 08:25 AM   Best Answer

@micstepl,

 

Sorry to hear you're having trouble styling Hero Nav the way you want Michael.  I can offer some suggestions but custom coding like this is really outside the scope of this forum.

 

 

You can achieve different styles on different pages by nesting your styles in the class for the specific page you want to style.

 

You could try something like this, using the following LESS as an example:

 
// assuming page id is 50
body.page-id-50 {
	.section-hero-nav .hero-nav .hero-nav-ul.separated > li {
	border-right: 1px solid #afafaf;
	}
	 
	.section-hero-nav .hero-nav .hero-nav-ul > li > a {
	color: #0099ff;
	}
	 
	.section-hero-nav .hero-nav {
	background-color: #afafaf;
	shadow: silver 0 -6px 6px;
	border-bottom: 1px solid #afafaf;
	}
	 
	.hero-nav-collapse-btn {
	padding: 4px 8px;
	font-size: 1.0em;
	}
}

// assuming page id is 52
body.page-id-50 {
	.section-hero-nav .hero-nav {
		background-color: @gray;
	}
}

Simply inspect the body tag on the page you want to customize to see the relevant page-id-X class to use.

 

Like I mentioned before, this is what my PageLESS extension is designed for - custom styles for individual pages/posts.  No need to fuss with these classes.  You can define your own custom styles for any page/post using LESS/CSS.

 

Good luck!

 

 

Thanks SOOOOOO much :) I really appreciate your tip - it worked!#

 

I can only recommend you as a developer for your pragmatic, competent support!

 

br

,Michael







Also tagged with one or more of these keywords: Hero Nav