Hello, is there a way to customize the font size for different devices? Thanks

 For this theme, some elements have font size setting for mobile device, namely Mobile Navigation. you can change main link sizes with different values to see changes in mobile screens. there is also IPS settings for each theme. you can find in Theme settings > Font Scale... but of course it's not always affect in mobile view.

In my opinion the best way to handle this and target specific area, is using your theme's custom.css for some responsive designing. for example with this method you can change body text in desktop/tablet/phone if you add it in custom.css:

/* Desktop */
body {
  font-size: 14px;
}

/* Tablet */
@media screen and (max-width: 977px) {
	body {
	  font-size: 12px;
	}
}

/* Phone */
@media screen and (max-width: 767px) {
	body {
	  font-size: 10px;
	}
}

 

Edited March 2, 20232 yr by shahed

 

For this theme, some elements have font size setting for mobile device, namely Mobile Navigation. you can change main link sizes with different values to see changes in mobile screens. there is also IPS settings for each theme. you can find in Theme settings > Font Scale... but of course it's not always affect in mobile view.

In my opinion the best way to handle this and target specific area, is using your theme's custom.css for some responsive designing. for example with this method you can change body text in desktop/tablet/phone if you add it in custom.css:

/* Desktop */
body {
  font-size: 14px;
}

/* Tablet */
@media screen and (max-width: 977px) {
	body {
	  font-size: 12px;
	}
}

/* Phone */
@media screen and (max-width: 767px) {
	body {
	  font-size: 10px;
	}
}

 

Got it, thank you!

Sorry @shahed, I have another question for you! Is it possible to see and test the admin panel? 👉👈

 

Sorry @shahed, I have another question for you! Is it possible to see and test the admin panel? 👉👈

For this theme? there are ACP screenshots from theme settings in marketplace page.

 

 For this theme, some elements have font size setting for mobile device, namely Mobile Navigation. you can change main link sizes with different values to see changes in mobile screens. there is also IPS settings for each theme. you can find in Theme settings > Font Scale... but of course it's not always affect in mobile view.

In my opinion the best way to handle this and target specific area, is using your theme's custom.css for some responsive designing. for example with this method you can change body text in desktop/tablet/phone if you add it in custom.css:

/* Desktop */
body {
  font-size: 14px;
}

/* Tablet */
@media screen and (max-width: 977px) {
	body {
	  font-size: 12px;
	}
}

/* Phone */
@media screen and (max-width: 767px) {
	body {
	  font-size: 10px;
	}
}

 

Hello,

I'm using this settings:

/**
 * This file is for your custom CSS.
 * This file is not modified or overwritten during upgrades
 */
/* Desktop */
body {
  font-size: 16px;
}

/* Tablet */
@media screen and (max-width: 977px) {
	body {
	  font-size: 18px;
	}
}

/* Phone */
@media screen and (max-width: 767px) {
	body {
	  font-size: 18px;
	}
}

but the text that I circled in the picture (text inside topics) doesn't change size and it remains always the same size.

I hope to be understandable 😅

And also this text:

Thanks!

 

Hello,

I'm using this settings:

/**
 * This file is for your custom CSS.
 * This file is not modified or overwritten during upgrades
 */
/* Desktop */
body {
  font-size: 16px;
}

/* Tablet */
@media screen and (max-width: 977px) {
	body {
	  font-size: 18px;
	}
}

/* Phone */
@media screen and (max-width: 767px) {
	body {
	  font-size: 18px;
	}
}

but the text that I circled in the picture (text inside topics) doesn't change size and it remains always the same size.

I hope to be understandable 😅

 

 

And also this text:

Thanks!

Hello,

Those CSS styles that i send for custom.css, need to be expand based on your need. in it's current form it works only for "body" element. you may notice there are three "body {...}" in those styles, so every other HTML elements in your theme that have it's own font sizes, still retain their styling. you can find HTML element's css class with your browser's "Inspect" ability. for example this:

 

This part is one of the sections in your screenshot, that need different font-size in phone screen. it uses ".ipsType_normal"... and you can style it for font size by expanding previous code, like this:

/* Phone */
@media screen and (max-width: 767px) {
	body {
	  font-size: 10px;
	}
	.ipsType_normal {
	  font-size: 10px !important;
	}
}

As you can see i only made expand in Phone classes, so you can do this in Desktop/Tablet separately as well if needed. also you can use " !important" to prioritize the style you currently work. you can find other element's css classes just like this and try to give it custom styling this way.

 

 

Hello,

Those CSS styles that i send for custom.css, need to be expand based on your need. in it's current form it works only for "body" element. you may notice there are three "body {...}" in those styles, so every other HTML elements in your theme that have it's own font sizes, still retain their styling. you can find HTML element's css class with your browser's "Inspect" ability. for example this:

 

This part is one of the sections in your screenshot, that need different font-size in phone screen. it uses ".ipsType_normal"... and you can style it for font size by expanding previous code, like this:

/* Phone */
@media screen and (max-width: 767px) {
	body {
	  font-size: 10px;
	}
	.ipsType_normal {
	  font-size: 10px !important;
	}
}

As you can see i only made expand in Phone classes, so you can do this in Desktop/Tablet separately as well if needed. also you can use " !important" to prioritize the style you currently work. you can find other element's css classes just like this and try to give it custom styling this way.

Thank you very much, now it works perfectly 🙂 

I have another question: I'd like to change the "positive-light" color, but I don't find where to change it... Could you help me find it? Thank you again!

 

Thank you very much, now it works perfectly 🙂 

I have another question: I'd like to change the "positive-light" color, but I don't find where to change it... Could you help me find it? Thank you again!

Glad that helped. about positive-light, this one is among many others are variables coming from IPS theme's root. there are not many options for them, but you can customize the same way in custom.css:

:root {
	--positive-light: #87af9e !important;
}

 

 

Glad that helped. about positive-light, this one is among many others are variables coming from IPS theme's root. there are not many options for them, but you can customize the same way in custom.css:

:root {
	--positive-light: #87af9e !important;
}

 

Thank you again for your kind help!

 

Glad that helped. about positive-light, this one is among many others are variables coming from IPS theme's root. there are not many options for them, but you can customize the same way in custom.css:

:root {
	--positive-light: #87af9e !important;
}

 

Excuse me, hopefully this will be my last question 😅

I'd like to change the text color in chatbox when a user tags another one and for it to be different between the light and dark mode. Is it possible? Thank you again! 

 

 

Thank you again for your kind help!

Sure, you're quite welcome 👍

 

 

Excuse me, hopefully this will be my last question 😅

I'd like to change the text color in chatbox when a user tags another one and for it to be different between the light and dark mode. Is it possible? Thank you again! 

 

Not at all. but i really hope you could find those classes by yourself for future uses. Inspect feature with browser.

In this case, i'm not sure what chatbox means here. you mean in PM/Messages? can you send me screenshot or link?

 

In this case, i'm not sure what chatbox means here. you mean in PM/Messages? can you send me screenshot or link?

I just sent you a message 🙂 

Update 1.2.0 for peacock Theme going to be a massive update with a lot of new features and functionality that will be release in near future.

Summary of upcoming update 1.2.0

Select style for User Hover Card:

Update 1.2.0 will add a new section to theme settings: User Hover Cards (UHC). in this section, Admin can select one of three options to use as default UHC. 1) IPS Default 2)Horizontal 3)Vertical which last two are custom design and adopted to be use in Desktop/Tablet/Phone.

Horizontal have special animation work so Demo will be a video clip:

Vertical mode:

 

User Hover Card section also gets a setting for making UHC with blur glass effect. can be set active/de-active and works on all styles. demo for default UHC:

 

Select style for Page Title Box:

Page Title Box have two mode in peacock theme as of now to show either inside the top cover image or in main area. when it's in top cover image , currently it is looks like this:

Now this section have style select to make it in (Light mode/Dark mode/Pick color from palette)... addition to that, there is option to show them with blur glass effect as well.

Light mode with blur glass effect:

Dark mode (Normal/Blur glass effect)

Color palette mode (Normal/Blur glass effect) which picks color directly from color palette per user choice

 

Blur glassy effect for Header Slider:

 

Maximum width button

With a maximum width button at bottom-side of peacock, in Desktop users can decide to browse website in normal default width or stretched and max width mode. button can be active/de-active by admin.

 

per Forum color setting in Alternative Design:

With this option is active, Alternative Design for Forums uses Featured color that being set for every forum to display:

 

Update will also adds many optimizations and refinements to various areas, included: buttons, widgets, color palette and ...

Important Note: After this release peacock theme will see a price increase as well.

Edited March 23, 20232 yr by shahed

 

per Forum color setting in Alternative Design:

With this option is active, Alternative Design for Forums uses Featured color that being set for every forum to display:

 

Wow, this is wonderful! 

Hi! One simply question: i would like to change default text message for "Animation badge for new contents". Where can I make this change? Tnx a lot 🙂 

 

Hi! One simply question: i would like to change default text message for "Animation badge for new contents". Where can I make this change? Tnx a lot 🙂 

All text and messages in this theme is translatable. you can use alternative text using language setting.

Edited August 18, 20231 yr by shahed

Tnx a lot!

Another question: in mobile visualization, i can't see navigation tab as instead I can see in the traditional view (see attached images). Maybe i need to activate something?

 

Tnx a lot!

Another question: in mobile visualization, i can't see navigation tab as instead I can see in the traditional view (see attached images). Maybe i need to activate something?

You're quite welcome.

About breadcrumb, I'm afraid this behavior is Invision side related and you can see same thing with default theme as well. breadcrumb in Tablet/Phone view will hide in this platform. you can add class such this  in your theme's custom.css to prevent that.

@media screen and (max-width: 979px) {
	.ipsApp_front .ipsBreadcrumb {
	  display: block !important;
	}
}

 

Wonderful, it works! Tnx again! 🙂