Jump to content
Support Closed Read more... ×

Community

TAMAN

mdPanel - Material Design IPS Theme [ support topic ]

Recommended Posts

Just now, DanLemX said:

how to select the icons for menu navigation? Say I have custom links, and want to chose my own icon. 

Simple,

Say your custom link is named Activity

You can change the menu icon by targeting the menu text like this

[data-navtitle="Activity"] .ta_navIcon:before {
	content: "\f080"; /*  This is font awesome icon unicod https://fontawesome.com/v4.7.0/icons  */
}

 

Share this post


Link to post
Share on other sites
Just now, SammyS said:

Would like to see some example on mobile

On mobiles and some small screen tablets, the theme uses default IPS mobile design. 

As steph mentioned, check the demo site 😉 

Share this post


Link to post
Share on other sites

@TAMAN Using this the on a bilingual site, adjusting the menu icons for the english menu works fine but it does not work for the french menu. Here is an exempleof what I added in my custom.css for the browse menu:

[data-navtitle="Browse"] .ta_navIcon:before {
	content: "\f21a"; /*  This is font awesome icon unicod https://fontawesome.com/v4.7.0/icons  */
}
[data-navtitle="Navigation"] .ta_navIcon:before {
	content: "\f21a"; /*  This is font awesome icon unicod https://fontawesome.com/v4.7.0/icons  */
}

Am I missing anything?

Share this post


Link to post
Share on other sites
Just now, Steph40 said:

@TAMAN Using this the on a bilingual site, adjusting the menu icons for the english menu works fine but it does not work for the french menu. Here is an exempleof what I added in my custom.css for the browse menu:


[data-navtitle="Browse"] .ta_navIcon:before {
	content: "\f21a"; /*  This is font awesome icon unicod https://fontawesome.com/v4.7.0/icons  */
}
[data-navtitle="Navigation"] .ta_navIcon:before {
	content: "\f21a"; /*  This is font awesome icon unicod https://fontawesome.com/v4.7.0/icons  */
}

Am I missing anything?

its normal, by default, all menus uses the default icon which is this 55eb7d1ea25019eb5fcd3ea1aed5d0a0.png 

to change the menu icon you need to target the menu by its text. so i have optionally changed ALL default IPS and application menu icons by targeting the english menus 

 

In your code

[data-navtitle="Browse"] .ta_navIcon:before{
	content: "\f21a"; /*  This is font awesome icon unicod https://fontawesome.com/v4.7.0/icons  */
}
[data-navtitle="Navigation"] .ta_navIcon:before{
	content: "\f21a"; /*  This is font awesome icon unicod https://fontawesome.com/v4.7.0/icons  */
}

Simply, change the Browse, and Navigation text in the css to whatever it shows in your site 🙂 

 

If your site is multi language 

then change the menu icons like this

[data-navtitle="Browse"] .ta_navIcon:before,
[data-navtitle="What is Browse in french?"] .ta_navIcon:before {
	content: "\f21a"; /*  This is font awesome icon unicod https://fontawesome.com/v4.7.0/icons  */
}
[data-navtitle="What is Navigation in french?"] .ta_navIcon:before{
	content: "\f21a"; /*  This is font awesome icon unicod https://fontawesome.com/v4.7.0/icons  */
}

simple 

Edited by TAMAN

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×