Joomla Templates Club 406,261 posts

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#185984

Hi,
I am using on my home page the default style of the template (onepage) and on all the other pages the metro style.
I like a lot the style of the menu on the metro style and I would like to have the same style of the menu on the home page as well.

how can I do that?

thanks.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#487063

Would you not simply assign the metro style to your Home Page as well?

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#487064

NO….I don’t want that style… just the menu style.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#487068

<em>@tiwebmaster 365237 wrote:</em><blockquote>NO….I don’t want that style… just the menu style.</blockquote>
In that case … What you might try doing is overwriting the CSS for the menu styling within the default theme with that of the CSS for the menu styles from the Metro style.

IMPORTANT NOTE:
MAKE SURE YOU MAKE A BACKUP OF YOUR CURRENT SITE FILES BEFORE YOU START TO OVERWRITE/CHANGE THINGS …. so that you can always revert back to your starting point if need be.

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#487070

I don’t know CSS very good. could you let me know how to do it? what to copy? to where?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#487181

Hi,

Firebug in firefox or Inspect Element addon in Chrome will be helpful here, you can use these tools to check which css file you need to change.

For example, with template.css file:

– For default theme, you can open file: /templates/ja_onepage/css/template.css


.t3-mainnav .navbar .nav {
margin: 0;
}
.t3-mainnav .navbar .nav > li > a {
border-top: 0;
margin: 0 15px;
padding: 19.5px 0;
outline: none;
text-shadow: none;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.t3-mainnav .navbar .nav > li > a:focus {
color: #666
background: transparent;
}
.t3-mainnav .navbar .nav > li > a:hover {
background: transparent;
color: #eee
cursor: pointer;
text-shadow: none;
}


– You can check the same class and edit to make it the same as in metro theme: templatesja_onepagecssthemesmetrotemplate.css


.t3-mainnav .navbar .nav > li > a {
color: #eee
font-size: 14px;
}
.t3-mainnav .navbar .nav > li > a:focus {
color: #eee
background: transparent;
}
.t3-mainnav .navbar .nav > li > a:hover {
color: #f09609
}
.t3-mainnav .navbar .nav > li > a:hover .caret {
border-bottom-color: #f09609
border-top-color: #f09609
}


[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#487216

thanks. I also changed in bootstrap.css from:

.navbar .nav > li > a {
float: none;
padding: 19.5px 15px 19.5px;
color: #666
text-decoration: none;
text-shadow: 0 1px 0 #ffffff
}

to:

.navbar .nav > li > a {
float: none;
padding: 19.5px 15px 19.5px;
color: #fff
text-decoration: none;
text-shadow: 0 1px 0 #ffffff
}

and then, it was perfect.:)

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#487314

Glad to hear that :laugh:

[Author]

Posts