mdPanel - Material Design IPS Theme [ support topic ]

[TAMAN]

 

[DanLemX]

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

[TAMAN]

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  */
}

 

[SammyS]

Would like to see some example on mobile

Edited May 19, 2018 by SammyS

[Steph40]

Do you want an exemple of the menu on mobile? If so look at his demo site. @SammyS

It looks like ips default mobile menu

[TAMAN]

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 ? 

[Steph40]

@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?

[TAMAN]

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  

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 May 20, 2018 by TAMAN

[Steph40]

@TAMAN

Got it, very simple Thanks

[Steph40]

@TAMAN Is it possible to make the menu sticky even when minimized? It can't seem to it. It would be good.

[TAMAN]

Just now, Steph40 said:

@TAMAN Is it possible to make the menu sticky even when minimized? It can't seem to it. It would be good.

Unfortunately no, I would have done it if it was possible. without causing problem for sub menus 

 

[Josiah Wallingford]

Minor Bug Report:

That activity stream icons show on top of the submenu items.

Edited May 26, 2018 by Josiah Wallingford

[TAMAN]

Just now, Josiah Wallingford said:

Minor Bug Report:

That activity stream icons show on top of the submenu items.

Fixed

You can re-download and update, no version numbers changed.

 

Thank you.

[Josiah Wallingford]

How do I change this from looking so bad? This is in blogs.

[TAMAN]

Just now, Josiah Wallingford said:

How do I change this from looking so bad? This is in blogs.

I think i gave you a custom css with a message about this?

just use that, I might edit this for next version 

[Josiah Wallingford]

6 minutes ago, TAMAN said:

Fixed

You can re-download and update, no version numbers changed.

 

Thank you.

Ah, now the mouseover text when hovering over menu buttons is below the menu.

[TAMAN]

Just now, Josiah Wallingford said:

Ah, now the mouseover text when hovering over menu buttons is below the menu.

damn,

Wait second ? 

[Josiah Wallingford]

11 minutes ago, TAMAN said:

I think i gave you a custom css with a message about this?

just use that, I might edit this for next version 

Yes, you did. The CSS you gave me was for Magnum theme though and doesn't seem to work on mdPanel:

[data-pagemodule="gallery"] header>#elBlogHeaderStats {
    background: #222 !important;
    color: #fff !important;
}

 

[TAMAN]

Just now, Josiah Wallingford said:

Ah, now the mouseover text when hovering over menu buttons is below the menu.

Re-download again.

 

Just now, Josiah Wallingford said:

Yes, you did. The CSS you gave me was for Magnum theme though and doesn't seem to work on mdPanel:

[data-pagemodule="gallery"] header>#elBlogHeaderStats {
    background: #222 !important;
    color: #fff !important;
}

 

i dont think this is the one ? this changes the status background and colors 

any link to check?

Edited May 26, 2018 by TAMAN

[Josiah Wallingford]

2 minutes ago, Josiah Wallingford said:

Yes, you did. The CSS you gave me was for Magnum theme though and doesn't seem to work on mdPanel:

[data-pagemodule="gallery"] header>#elBlogHeaderStats {
    background: #222 !important;
    color: #fff !important;
}

 

Correction. I found the missing part from the conversation.

In case anybody else is having this issue. Here is the full css that works:

}
header>#elBlogHeaderStats {
    background: #222 !important;
    color: #fff !important;
}
[data-pagemodule="gallery"] header>#elBlogHeaderStats {
    background: #222 !important;
    color: #fff !important;
}

 

Just now, TAMAN said:

Re-download again.

 

i dont think this is the one ? this changes the status background and colors 

Yeah, we had to do that because the first change in the css made the status background and color look off. I think that is what happened anyway.

[TAMAN]

Just now, Josiah Wallingford said:

In case anybody else is having this issue. Here is the full css that works:

This is not problem, it doesnt causes any issues. 

just some solid colors added by ips, change or not is all optional it has nothing to due the theme

but again. i might remove the colors on next version 

[Josiah Wallingford]

Minor Bug?:

The P in Promote on the Promote button is right on the line between the two colors.

[Josiah Wallingford]

What controls the arrow color? It looks fine on my other color scheme themes but this one for some reason blends until moused over.

Edited May 26, 2018 by Josiah Wallingford

[Josiah Wallingford]

6 hours ago, TAMAN said:

This is not problem, it doesnt causes any issues. 

just some solid colors added by ips, change or not is all optional it has nothing to due the theme

but again. i might remove the colors on next version 

Sorry, I did not mean to imply it was the fault of the theme.

[TAMAN]

Just now, Josiah Wallingford said:

Minor Bug?:

The P in Promote on the Promote button is right on the line between the two colors.

Does it happen with default theme? if so then you might want to report to ips

 

Just now, Josiah Wallingford said:

What controls the arrow color? It looks fine on my other color scheme themes but this one for some reason blends until moused over.

it is a mixed color between User bar font color & important button background color.

You probably have userbar background color same as Important button background color thats why, this is not a good idea because there is also sign up button in userbar that uses important background color.