Peacock Theme [Support Topic]

[shahed]

peacock Theme, is an advanced Skin for Invision website. with numerous options, Admin have wide range of choices from top to bottom in case of style, colors and functionality.

Key Features:

• Light and Dark mode
  • Can be set which one is default
  • Admin setting for change colors
  • User level options for choose between theme
• Color Palette
  • 8 different color option.
  • Admin can modify palette from colors to their names
  • Can be set which one is default
  • User level options for choose between theme
• Advanced Mobile Navigation
  • Designed for browsing website, in Tablet/Phone screen
  • Admin can modify links, styles, colors
• Dynamic Header Cover
  • With dynamic header cover options, top header area of peacock theme, pick up designated image from page. users will see different cover photo based on were they are.
  • Example for Topics: every topic can have it's own header cover image. Dynamic Header Cover option, picks up the first image posted in a topic as cover photo.
  • Currently support: Topics, Forums, Files in Download app, Gallery (Album/Category), Clubs.
• Advanced PopUp messages
  • Advanced popup messages is a two separate tier of package for admin, to create popup message box for Registered Users or Guests
  • Create Welcome message/Registration notices message and ... based on the need
  • Most be Read Message box
  • Multi-Page message box
  • Ability to create permanent link to contents of the messages in different areas
• (more) FontIcons + Material Design Icons package
  • With Admin options, font icons will be used in much more areas, including user menus, navigation menus and ...
  • Admin option to choose between FontAwesome icons (IPS default) or Material Design Icons, with familiar and broader range of icons.
• Content Slider
  • Content slider with admin setting, to add contextual slide with image, title and link at the top of website
  • Can be link to other pages or use as promotional items on their own
• Overlay Search
  • With Overlay search design, user in any device, specially mobile, can start search contents from the page they visit
• Alternative Design for Widgets
  • With admin options, Default IPS widgets can have Alternative style with Grid style and support for background image
  • Initial release support: Topics and Our Picks Widgets
• Advanced Footer
  • Advanced Footer is a customizable and stylish section, with many Admin options to add important contents and links
• Post Styles
  • Post styles, give admin the ability to choose between multiple design for community's Forum posts

 

Demo

(User: Demo/Pass: Demo)

 

[bosss]

How add icons to navigation?

nice theme 😀

[shahed]

14 hours ago, bosss said:

How add icons to navigation?

nice theme 😀

Adding custom icons is a bit tricky in Invision platform, but I will try to add some more options in future updates.

At the moment, there are pre-set icons and there is no option for add custom icons through theme setting. however all pre-set icons are listed in "_mvn_peacock_fonticons.css" and you can see how they work. for navigation links, for now best way is adding CSS class like this:

.ipsNavBar_primary a[data-navitem-id="xx"]:before {content: "\Fxxxx";}

for data-navitem-id, you can find id of a link like this:

[Julien Costes]

Hello, thank for your work,

 

I cant change the logo and name,

I still have the original logo and name : 

[shahed]

1 hour ago, Julien Costes said:

Hello, thank for your work,

 

I cant change the logo and name,

I still have the original logo and name : 

Hi,

Theme setting > Main Header > Enable Peacock default logo (disable it)

Also you shouldn't change theme's own name.

[balazsp]

On 8/26/2022 at 10:57 PM, shahed said:

Also you shouldn't change theme's own name.

I like your theme 🙂 

May I ask the techical reason behind this?

 

 

[shahed]

1 hour ago, balazsp said:

I like your theme 🙂 

May I ask the techical reason behind this?

 

 

Hello,

Changing the theme's name won't change logo section. it is either website's own logo/branding... or the peacock logo, which the latter are active by default with that setting (Theme setting > Main Header > Enable Peacock default logo). it should be disabled in order to website own logo to be display.

[balazsp]

Thank you for describing how the logo setting works - tbh it is self explanatory 🙂

I was just curious why your theme's name should not be changed since I have never had tech issues after renaming any other themes. 

[shahed]

List of new features and changes up to 1.1.3

• New Section: Sidebar Navigation > Change the traditional Navigation links style with new Sidebar drawer area that can be open like hamburger menu
  • Sidebar Navigation Settings: Customizable colors
  • Sidebar Navigation Settings: Customize sizing
  • Sidebar Navigation Settings: Add custom Hot Links after hamburger link
  •  Sidebar Navigation Settings: custom Hot Links style selection for "show all" or in "drop/down menu"
• New Settings: Activate/de-Activate individual colors from color palette for users
• New Setting: Activate/de-Activate footer
• New Settings: Add custom font icons for Navigation Links
• Fixed an issue about display image title instead of image, when there is no image to show, in Alternative Style for Widgets
• Fixed an issue about opening empty space for Slider Content, when Slider Content is Active but user doesn't have permission to see it.
• Fixed issues about sizing, when "fluid width" is active.
• Change the icon of color customizer
• New Setting: Display Topic Image in Topic Listing
• New Setting: Display Quicklinks in Additional links in mobile navigation
• New Setting: Display Mobile Navigation's Additional links in Quicklinks
• Topic listing design now apply to "Fluid view" in Forum Index page
• Topic image settings also apply in Fluid view in Forum Index page
• New Setting: Topics and Posts > Set a default image for topics without images
• New Setting: Mobile Navigation > Set group permission to see Additional links
• New Setting: Sidebar Navigation > Set group permission to see Quicklinks
• New Setting: Main Header > Sticky effect for main header: sticky effect for main header now can be enable/disable
  • New Settings: Main Header > Sticky effect for main header (Disabled) > Fixed main header background color (3 options)
• New Section: Search Box
  • Ability to add "Search suggestion" links
  • Search suggestion links position (Before/After search filters)
• HTML and CSS updates

[shahed]

New version of peacock Theme is now available.

 

What's New in Version 1.1.6  

• New Feature > Main Header > Sticky effect for main header (Active) > Dynamic Page Details (Include 6 sub-settings):
  • Dynamic Page Details is a special area that contain handful information and options about any page users visit across community. based on where is user now in community, contents of this section changes and display Page name, Page icon, Share button, Important buttons like Create topic/Submit reply ..., Management buttons and Follow button. this area appear on scroll down in Desktop view and replace with contents of main navigation. it can be switch between two contents area by scroll up or down.
• New Setting in Misc > Ability to activate/deactivate hover animation effect for buttons
• New Settings in Misc > Ability to set custom round/square corners for areas and boxes (3 Settings)
• Compatibility update for Gallery 4.7.7
• Various HTML/CSS/JS updates

 

Most important new feature is Dynamic Page Details, which give additional area to main navigation.

 

[Mascot Insider]

Hi, @shahed Nice theme! So I'm having issues with the "Quicklinks" "News, Store, and Gallery" showing up when non of those are coded in the "QuickLink" Format Box. How do I remove them??

[shahed]

35 minutes ago, Mascot Insider said:

Hi, @shahed Nice theme! So I'm having issues with the "Quicklinks" "News, Store, and Gallery" showing up when non of those are coded in the "QuickLink" Format Box. How do I remove them??

Hello,

This links came from additional links in "Mobile Navigation" // for removing them go to Theme Settings > Mobile Navigation and find "Display Additional links in Quicklinks (in main navigation)" setting. turn this setting OFF.

This setting will display additional links provided in "mobile navigation" in "main navigation" as well // similar setting exist for main navigation too, so you can display links created for main navigation in mobile navigation as well.

Edited February 13, 2023 by shahed

[Mascot Insider]

12 minutes ago, shahed said:

Hello,

This links came from additional links in "Mobile Navigation" // for removing them go to Theme Settings > Mobile Navigation and find "Display Additional links in Quicklinks (in main navigation)" setting. turn this setting OFF.

This setting will display additional links provided in "mobile navigation" in "main navigation" as well // similar setting exist for main navigation too, so you can display links created for main navigation in mobile navigation as well.

Haha, Prefect I just dicovered it after doing some digging that’s great! OK last question I love the Background Photo Feature it’s the reason I bought his template and the design is pretty cool. On DeskTop it looks Great but on iPad it looks awful.. Oddly enough on iPhone it looks fine to! Any suggesitions on how to fix?

[shahed]

9 minutes ago, Mascot Insider said:

Haha, Prefect I just dicovered it after doing some digging that’s great! OK last question I love the Background Photo Feature it’s the reason I bought his template and the design is pretty cool. On DeskTop it looks Great but on iPad it looks awful.. Oddly enough on iPhone it looks fine to! Any suggesitions on how to fix?

I'm not sure what you mean about iPad. Header images in iPad? if this is the case it display fine in my test. I should see how it looks like in your website. can you provide me link to this page? here or in personal message will do.

[Mascot Insider]

1 minute ago, shahed said:

I'm not sure what you mean about iPad. Header images in iPad? if this is the case it display fine in my test. I should see how it looks like in your website. can you provide me link to this page? here or in personal message will do.

Ah, no worries. My page is Mascot.Blog! Basically, the Header Displays how I want on Desktop and iPhones but when using an iPad it zooms in! Thanks for your help :).

[shahed]

1 minute ago, Mascot Insider said:

Ah, no worries. My page is Mascot.Blog! Basically, the Header Displays how I want on Desktop and iPhones but when using an iPad it zooms in! Thanks for your help :).

Sure,

If you want to change cover image size for iPad, you can add this code in custom.css // that "300px" can be increased or decreased. 👍

@media screen and (max-width: 977px) {
	.mvn_peacock_header_style {
	  height: 300px;
	  background-attachment: unset !important;
	}
}

 

[Mascot Insider]

13 minutes ago, shahed said:

Sure,

If you want to change cover image size for iPad, you can add this code in custom.css // that "300px" can be increased or decreased. 👍

@media screen and (max-width: 977px) {
	.mvn_peacock_header_style {
	  height: 300px;
	  background-attachment: unset !important;
	}
}

 

I tried the code and the image isn't moving on the iPad sadly.

[shahed]

12 minutes ago, Mascot Insider said:

I tried the code and the image isn't moving on the iPad sadly.

I'm testing inline in your website with same code (not with actual iPad, just desktop > tablet mode), and it looks fine:

 

Same as my test website and local. but if problem is persist on device itself, it probably caused by "background-attachment: fixed" this CSS property are set for "unset" in tablet mode so it won't zoom-in. it works on desktop test, but it seems have problem in actual iPad device 🤔

I will look into this 👍

[Mascot Insider]

3 minutes ago, shahed said:

I'm testing inline in your website with same code (not with actual iPad, just desktop > tablet mode), and it looks fine:

 

Same as my test website and local. but if problem is persist on device itself, it probably caused by "background-attachment: fixed" this CSS property are set for "unset" in tablet mode so it won't zoom-in. it works on desktop test, but it seems have problem in actual iPad device 🤔

I will look into this 👍

Thanks so much :)! I do appreciate the help and am loving it already.

[Steph40]

@shahed The mobile menu for small phone can not be scrolled to see all items or even user info bits like mail, notification etc..

Same issue on you demo site, reduce the height and width of the browser, click the more button, you wont be able to access part of the menu.

Thank you

[shahed]

14 hours ago, Steph40 said:

@shahed The mobile menu for small phone can not be scrolled to see all items or even user info bits like mail, notification etc..

Same issue on you demo site, reduce the height and width of the browser, click the more button, you wont be able to access part of the menu.

Thank you

Unfortunately i don't have small enough screen to test and confirm this issue, but i think having option for custom height for those menu in Tablet/Mobile screens should resolve this. so it will be add in next update... for now please use this class in your custom.css and see if this works in small screens.

@media screen and (max-width: 767px) {
	.mvn_peacock_moreMenuMobile_container {
	  height: 460px;
	  max-height: 460px;
	}
}

 

[shahed]

Summary of upcoming features for peacock theme ver1.1.8

Alternative Design for Forum tables, Topic listing and Question listing.

 

New animated Unread Badge for Forums/Topics

 

New option for making Header Slider as SlideShow

 

List of all changes and features for upcoming peacock ver1.1.8

• New settings: Header Slider > Auto slide and Auto slide duration: set peacock slider as slideshow
• New setting: Header Slider > Open linked slides in new tab
• New setting: Topics and Posts > Alternative design for Table Forums/Topic Listing: alternative design similar to post style 1 for "Table Forums"
• New setting: Topics and Posts > Animation badge for new contents: new badge will be display in Forum/Topic listing with animation effect for new contents
• New setting: Mobile Navigation > Main link 5 (active) > Main link 5 (Style: peacock) > Menu height: set default size for Navigation/User menu in Mobile Navigation
• Fixed issue regarding custom height for header and slider is active at the same time, caused wrong height in mobile/phone view
• New animation effect for share buttons in side-bottom position
• HTML, CSS, JS updates

[Drewfus]

This is great news so when is the new version coming out /

[shahed]

1 minute ago, Drewfus said:

This is great news so when is the new version coming out /

We must wait for Marketplace Moderators to review and approve 👍

[Amy Pond]

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