Peacock Theme [Support Topic]

[shahed]

4 hours ago, Amy Pond said:

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, 2023 by shahed

[Amy Pond]

Just now, shahed said:

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!

[Amy Pond]

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

[shahed]

13 hours ago, Amy Pond said:

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.

[Amy Pond]

On 3/2/2023 at 3:08 PM, shahed said:

 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 😅

[Amy Pond]

And also this text:

Thanks!

[shahed]

8 hours ago, Amy Pond said:

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 😅

 

8 hours ago, Amy Pond said:

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.

[Amy Pond]

10 hours ago, shahed said:

 

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!

[shahed]

16 hours ago, Amy Pond said:

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;
}

 

[Amy Pond]

3 hours ago, shahed said:

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!

[Amy Pond]

6 hours ago, shahed said:

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! 

 

[shahed]

6 hours ago, Amy Pond said:

Thank you again for your kind help!

Sure, you're quite welcome 👍

 

3 hours ago, Amy Pond said:

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?

[Amy Pond]

47 minutes ago, shahed said:

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 🙂 

[shahed]

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, 2023 by shahed

[Amy Pond]

2 hours ago, shahed said:

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! 

[sandroweb]

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 🙂 

[shahed]

8 minutes ago, sandroweb said:

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, 2023 by shahed

[sandroweb]

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?

[shahed]

3 hours ago, sandroweb said:

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;
	}
}

 

[sandroweb]

Wonderful, it works! Tnx again! 🙂