codeinwp / neve Goto Github PK

• Review the general control #7
• Add a Typography panel with the following options (from Hestia - for the moment, without responsive controls):
• Add a General subpanel with the following options:
  • Font subsets
• Add a Body subpanel with the following options:
  • Font family
  • Font size
  • Line height
• Add a Headings subpanel with the following options:
  • Font family
  • Font size
  • Line height

For example, in the Top Bar, to show the Layout, Content and Menu controls only if the Top Bar is enabled.
http://prntscr.com/ktgvao

This should be a generic thing, not specific to the Top Bar, and should be just an extra parameter. It should work without hiding/showing the controls too

• on EACH individual page/post ( including single, shop, cart, checkout, blog etc ) add a Neve Settings (From Hestia) with the following options:

• Sidebar (select with options):
  - Customizer Setting
  - Left Sidebar
  - Right Sidebar
  - No Sidebar

• Layout (select with options):
  - Customizer Setting
  - Contained
  - Full width

TODO: Here discuss, if it's better to keep the radio icon control from Hestia ( with the reset button ) or this kind of selects with the Customizer Setting option

For the Sidebar control, make sure it will work ok with another option too, for Double Sidebars

Add a Colors & Background panel with the following options

• Theme Color
• Link Color
• Link Hover Color
• Text Color
• Background Color
• Background Image

http://prntscr.com/ktja5r Edge Case: Many Categories

Later note: If we'll manage to have header/footer builders in the theme, this can be integrated in that.

In Layout > Footer add two new controls:
Second Content Type
Second Section Content

that will basically be like the one before, and will allow for a second footer area.

After that, we can add a radio image control for control the layout
Footer layout, with options for left/right and one on top of the other.

In the Layout panel add a Footer subpanel with the following options:

• Footer widgets subsubpanel:
  • Footer columns (select - 1 to 4 - for widgets area)
• Footer bar subsubpanel:
  • Footer section ( a select with the options: None, Text, Footer menu) - by default have it selected for Text. -> make sure this can be addapted for more options
  • Footer section content ( appears when Text is selected in the above, and by default is the copyright text of the theme )

• Add a Top Bar panel with the following options:
• Enable Top Bar checkbox
• Layout radio icon select ( Content/Menu ; Menu/Content )
• Select menu
• Content area that will allow shortcodes ( we will have some custom shortcodes, with things like a search button, woocommerce cart and other stuff we can find useful )

in the Neve Settings metabox add some checkboxes for :

Disable Header
Disable Title
Disable Featured Image
Disable Content
Disable Footer

These should appear on all pages/posts ( we shouldn't make any specific checks for cart/checkout or any other page ).

I guess this depends whether will make some changes in the design to incorporate the header image or not, but we can keep in mind to remove/hide the header image if we're not using it 👍

https://github.com/wprig/wprig
The goal is to get rid of bootstrap, fontawesome and not have so much css/js like we have now in Hestia, and have a generic code as much as possible.

In the Layout panel add a Blog subpanel with the subpanels: Blog/Archive ( the current one ) and a new one called Single post.

In that panel add options for:
Elements order ( Feature image, Title, Meta, Content, Tags ) https://prnt.sc/kgmysx
Meta order ( like the current one on the Blog )

https://prnt.sc/kroekh

Theme Check should be checked, especially for the errors with file_put_contents

and all things necessary for grunt

@radu-themeisle I would need you to take the Alexis template http://demo.templateocean.com/wrapbootstrap/alexis-html-v1/ and try to make our demo https://demo.themeisle.com/hestia-pro-demo-content/alexis-elementor/ as close as possible identical.
Right now, there are differences, for example, the spacing between the Our Focus boxes, the icons are a bit bolder, the video section is completely different and so on.

Ideally, you would overlap the two designs on top of each other, and they would be identical. 👍

In the Blog Layout, add an extra option in the Pagination style select for: Next/Prev

Give an option for a second footer section. Plus, and option to rearrange this two footer sections.

Register a Left Sidebar (Widgets in this area are used in the left sidebar region if you use the Both Sidebars layout.)
For all Sidebar Layout options for each type of page, add a new option for "Double sidebar"
For the Neve Settings metabox, for the sidebar, add a new option for "Double sidebar"

Have a new 'Buttons' panel in Customizer with two subpanels ( for the two types of buttons we have ): "Primary" & "Secondary".

Each subpanel will have two tabs:

• Layout
• Style

The Layout tab we'll have two controls (for which we can use the same padding control used in the header builder):

• Padding control
• Border radius control

In the Style tab, we'll move the Primary Button Color (that already exists) and except for that we'll add options for Background/Text normal/hover states for both types of buttons.

For the buttons selectors, we should use general ones, even though it might not incorporate all buttons especially for woo.
It would be good to make sure it looks ok in general, across browsers, and after that, we can improve it within a specific context, by using a specific class.

Cosmin can help here, with his knowledge from the blog :)

For starters, we can have these ones for the Top Bar:

• a search button
• woocommerce cart ( with the possibility to make open a full cart, maybe in the pro version )

If possible, these will work well in other sections too, not depending on the Top Bar classes.

From: #14 (comment)

If possible start from the control in Hestia, and create a new generic control for controlling different types of typography options ( like font size, line height etc ) for different elements.

The control should be able to work for any type of css property ( font size, line height etc ) for any element in the site.
It should also have the responsive mechanism from Hestia, but done in an easier to understand manner. ( some controls will only have desktop options, some mobile too )
So, the css property, the element for the style, and the responsive mode should be like parameters for the control.

Can also check OceanWP.
The goal is to make it as easy to understand and generic as possible 👍

In the Layout panel add subpanels:

• Shop/Archive with options:

Elements order ( Feature image, Title, Content, Category, Rating, Price etc ) https://prnt.sc/kgmysx depending on the design

https://prnt.sc/kroprg
From the wordpress unit testing file

In the Layout panel add a Sidebar subpanel with the following options:

• Sidebar width control like in Hestia ( without responsive controls; with reset button;) values in percentages between 10% and 50%
• Default Sidebar Layout select ( radio icon select ): Left sidebar/Right sidebar/Full width -> this will control every page or posts
• Blog/Archive Sidebar Layout select ( radio icon select ): Left sidebar/Right sidebar/Full width
• Single Post Sidebar Layout select ( radio icon select): Left sidebar/Right sidebar/Full width
• Shop/Archive Sidebar Layout select ( radio icon select ): Left sidebar/Right sidebar/Full width
• Single Product Sidebar Layout select ( radio icon select ): Left sidebar/Right sidebar/Full width

For all this controls, make sure, everything will work ok with another option too, for Double Sidebars

similar to Hestia https://docs.themeisle.com/article/704-hestia-basic-mega-menu-setup

Goal

Have a beta version ready to be released on themeisle by the middle of september.

How to

The majority of the features that we want to add in the beta version are already available in Hestia, so we want to use them.
So, the steps for each feature are:

1. Find the code for that feature in Hestia
2. Review that code ( is it general enough, does it do what we need, is it written ok )
3. If everything is ok with the code, just use it ( for sure, if some of the features are slightly different addapt it as needed )
4. If the code needs improvements, try to do that in Hestia
5. After that, use the code in Neve too.

Plan for release

• Basic wp skeleton
• Setup grunt #8
• Research wprig and work on the style #5
• Work on backend features until frontend is ready
• Incorporate both backend and frontend
• Screenshot https://github.com/Codeinwp/neve/issues/1
• Description #3
• Landing and Demo #2

Features

• Container Layout - #9
• Sidebar Layout - #10
• Header Layout - #11
• Blog Layout - #12
• Footer Layout - #13
• Top Bar - #14
• Typography - #15
• Colors & Background - #16
• Neve Settings metabox - #17
• Elementor compatibility - #18
• Registered menus and sidebars - #21

In the Layout panel add a Container subpanel with the following options:

• Container width control like in Hestia ( without responsive controls at this point; with the reset button; ) -> values in px between 768 and 1920. This option will control the entire container ( including the sidebar )
• Default Container style ( select with options: Contained and Full width ) - this will control every page or posts
• Blog/Archive Container style ( select with options: Contained and Full width )
• Single Post Container style ( select with options: Contained and Full width )
• Shop/Archive Container style ( select with options: Contained and Full width )
• Single Product Container style ( select with options: Contained and Full width )

Layout panel:

 **Container** subpanel:
 ---------

 - [ ] **Container width** control like in Hestia ( without responsive controls; with reset button; in px <768 - 1920> ) - controls the entire container ( + sidebar)
 - [ ] **Default Container style** ( select with options: Boxed, Full-width/Contained, Full width/Streched ) - every page or posts
 - [ ] **Blog/Archive Container style** ( select with options: Boxed, Full-width/Contained, Full width/Streched )
 - [ ] **Single Post Container style** ( select with options: Boxed, Full-width/Contained, Full width/Streched )
 - [ ] **Shop/Archive Container style** ( select with options: Boxed, Full-width/Contained, Full width/Streched )
- [ ] **Single Product Container style** ( select with options: Boxed, Full-width/Contained, Full width/Streched )

 **Sidebar** subpanel:
 ---------
- [ ] **Sidebar width** control like in Hestia ( without responsive controls; with reset button; in percentage <10%- 50%> ) 
- [ ] **Default Layout** select ( icon select ): Left sidebar/Right sidebar/Full width/Double sidebar - every page or posts
- [ ] **Blog/Archive Layout** select ( icon select ): Left sidebar/Right sidebar/Full width/Double sidebar
- [ ] **Single Post Layout** select (icon select): Left sidebar/Right sidebar/Full width/Double sidebar
- [ ] **Shop/Archive Layout** select ( icon select ): Left sidebar/Right sidebar/Full width/Double sidebar
- [ ] **Single Product Layout** select ( icon select ): Left sidebar/Right sidebar/Full width/Double sidebar

 **Header** subpanel:
 ---------
 - [ ] Move the **Site identity** panel here ( Logo, Site Title, Display Site Title(checkbox), Tagline,  Display Tagline(checkbox), Site Icon )
 - [ ] **Primary Header** subpanel:
        - [ ] **Layout** select( icon select ): Left logo, Centered logo and menu, Right logo
        - [ ] **Last Item in the menu** (select) with: Search icon, WooCommerce cart ( on mobile, add it normally in the menu, as the last item )

 **Blog** subpanel:
 -----------

     **Blog/Archive** subsubpanel:
     ----------
      - [ ] **Elements Positioning** ( Feature image, Title, Meta, Content, Tags ) https://prnt.sc/kgmysx -> will allow to reorder and hide panels
      - [ ] **Meta** ( Author, Date, Categories, Comments ) https://prnt.sc/kgn10l -> will allow to reorder and hide panels. When the Meta panel from the above option will be hidden, the options here should be disabled
      - [ ] **Blog style** select: Large image/Grid/Thumbnail
             Options for Grid: 
               - Grid Columns ( 2, 3, etc )
                - Grid Style ( Fit rows, Masonry )
            Options for Thumbnail:
              - Image Position ( Left / Right ) https://prnt.sc/kgmlkf
              - Text Position ( Top/ Center / Bottom )
              - [ ] **Excerpt length** ( that will display the full content, if the number is bigger.) - this also needs a reset button
              - [ ] **Pagination style** select ( Numeric, Infinite Scroll, Next/Prev )
              - [ ] **Hide the categories** option

       **Single post** options:
       ----------
          - [ ] **Elements Positioning** ( Feature image, Title, Meta, Content, Tags, Next/Prev Links, Author, Related Posts, Comments ) https://prnt.sc/kgmysx -> will allow to reorder and hide panels
          - [ ] **Meta** ( Author, Date, Categories, Comments ) https://prnt.sc/kgn10l -> will allow to reorder and hide panels. When the Meta panel from the above option will be hidden, the options here should be disabled

  **Footer** subpanel:
 --------
  - Footer widgets:
      - [ ] Footer columns (select - 1 to 4 - for widgets area)
  - Footer bar:
     - [ ] Footer section ( select from: None, Text, Footer menu) - by default have it selected for Text. 
     - [ ] Footer section content ( appears when Text is selected above, and by default is the copyright text )
  -> in future releases ( or in pro ) we can give an option for a second footer section. Plus, option to rearange this two footer sections.

**WooCommerce** subpanel ( move the WooCommerce panel registered by WooCommerce )

   - Shop/Archive page (depending on the design):

      - [ ] Elements Positioning ( Feature image, Title, Meta, Content, Rattings, Price, Add to cart etc ) https://prnt.sc/kgmysx -> will allow to reorder and hide panels

   - Single Product page (depending on the design):

      - [ ] Elements Positioning ( Feature image, Title, Meta, Content, Rattings, Price, Add to cart etc ) https://prnt.sc/kgmysx -> will allow to reorder and hide panels

Top Bar

• Enable Top Bar
• Layout ( Content/Menu ; Menu/Content )
  Here to have the menu compatible with social networks - to transform in social icons.
• Select menu
• Content area that will allow shortcodes ( we can have some custom shortcodes, with things like a search button, woocommerce cart and other stuff we can find useful )

Typography panel:

• General
  • Font subsets
• Body
  • Font family
  • Font size ( only on desktop - so we can add an upsell for responsive )
  • Line height ( only on desktop - so we can add an upsell for responsive )
• Headings
  • Font family
  • Font size ( only on desktop - so we can add an upsell for responsive )
  • Line height ( only on desktop - so we can add an upsell for responsive )

Buttons panel (like in Hestia):

• Radius
• Padding

Colors & Background

• Theme Color
• Link Color
• Link Hover Color
• Text Color
• Background Color
• Background Image

===========

Neve Settings metabox panel:

• on EACH individual page/post ( including single, shop, cart, checkout, blog etc ) with options:
• Sidebar (select with options):
  - Customizer Setting
  - Left Sidebar
  - Right Sidebar
  - Double Sidebar
  - No Sidebar
• Layout (select with options):
  - Customizer Setting
  - Boxed
  - Full-width/Contained
  - Full width/Streched
• Disable Sections ( checkboxes )
  • Disable Header
  • Disable Title
  • Disable Featured Image
  • Disable Content
  • Disable Footer

===========

Elementor Compatibility

• check compatibility with Elementor
• When page is open with page builder, set its layout to Full width/Streched.
• compatibility with Elementor PRO's header/footer templates options like in Hestia https://elementor.com/header-footer-builder/

• demo page https://demo.themeisle.com/neve/
• landing page https://themeisle.com/themes/neve/
• add theme in categories and packages
• add theme in contact support form

In the Layout panel add a Header subpanel with the following options:

• Move the Site identity panel here ( Logo, Site Title, Tagline, Display Site Title and Tagline, Site Icon )
• a subpanel called Primary Navigation with the following options:
• Layout select( radio icon select ): Left logo, Centered logo and menu, Right logo
• Last Item in the menu (select) with: Search icon, WooCommerce cart ( on mobile, add it normally in the menu, as the last item )

similar to Hestia after it's finished https://github.com/Codeinwp/hestia-pro/issues/1128

http://prntscr.com/ktjen4

In the Layout panel add a Blog subpanel with the following options:

• Blog/Archive subsubpanel with the following options:
• Blog style ( radio image select ) - the same from Hestia https://prnt.sc/kh3tqb with the same conditions, when the 3rd layout is selected, an option(select) for Grid Columns and a checkbox for Masonry should appear.
• Excerpt length ( that will display the full content, if the number is bigger.) - this also needs a reset button
• Pagination style select ( Numeric, Infinite Scroll ) -> make sure it can be easily adapted to more options
• Hide the categories option - (EDIT: @abaicus - did the ordering control)

to be used in both Hestia and Neve

Same mechanism from Hestia
If possible, you should use the same code ( if something can be improved in Hestia, you should update it in Hestia first ), but of course, it should be adapted to the structure here.

If possible, start from the frontpage sections control in Hestia https://github.com/Codeinwp/hestia-pro/blob/master/inc/addons/customizer/front-page/class-hestia-section-ordering.php and create a new generic control for hiding and reordering the elements of the control.
Can also check OceanWP.
The goal is to make it as easy to understand and generic as possible 👍

http://prntscr.com/ktjd2p
Remove Category, Archive ... tags on the archive page header
And show the Category Description.

( Get the code from Hestia. If it needs improvements, it should be done in Hestia too )

http://prntscr.com/ktjcl0

sidebar alignment https://prnt.sc/kyetfr

• check compatibility with Elementor
• When a page is opened with a page builder, set its layout to Full width (change the metabox on that page to Full width).
• compatibility with Elementor PRO's header/footer templates options (from Hestia) https://elementor.com/header-footer-builder/

for the titles

In the Blog/Archive panel, when one of the 2 first layouts are selected, add an option for Text Position ( Top/ Center / Bottom )

• Menus:
  Primary menu
  Footer menu
• Sidebars:
  Default Sidebar (Widgets in this area will be displayed in the left or right sidebar area if you choose the Left or Right Sidebar layout.)
  Footer Widget Area 1
  Footer Widget Area 2
  Footer Widget Area 3
  Footer Widget Area 4
  WooCommerce Sidebar - used for woocommerce pages

Same mechanism from Hestia https://github.com/Codeinwp/hestia-pro/issues/1677.
If possible, you should use the same code ( if something can be improved in Hestia, you should update it in Hestia first ), but of course, it should be adapted to the structure here.

from the onboarding, using Neve and add them in Neve

• https://demo.themeisle.com/neve-woocommerce/
• https://demo.themeisle.com/neve-energy-panels/
• https://demo.themeisle.com/neve-vet-center/