Pixel 2

Instructions

1 - Change the theme accent color:

Once you have installed Pixel, you can change accent color by using the built-in theme design customizer. Documentation on how to use this core functionality can be found here.


2- Enable Transition Loader:

Dashboard > Pages & Theme > Pixel Options > General > General > Page Transition Loader

 

3- Fav, Apple Touch Icons:

Dashboard > Pages & Theme > Pixel Options > General > General > Fav Icon & Apple Touch Icon 

 

4- Boxed layout

Dashboard > Pages & Theme > Pixel Options > General > General > Boxed

 

5- Navigation Icon 

Icons that used in Pixel are 'Font Awesome' icons. So for changing icons, you need to specify icon title as comes in below link. Remeber you only need icon name that comes after 'fa-'.

http://fontawesome.io/icons/

 

6- Change main Navigation Style:

Dashboard > Pages & Theme > Pixel Options > Header > Navigation > Navigation Style

(Also changable for a specific page via 'Navigation Style' page attribute.)


7- Change Header Type:

Dashboard > Pages & Theme > Pixel Options > Header > Navigation > Header Type

(Also changable for a specific page via 'Header Type' page attribute.)

 

8- Dark Header:

Dashboard > Pages & Theme > Pixel Options > Header > Navigation > Dark Header

(Also changable for a specific page via 'Dark Header' page attribute.)

 

9- Add a label to a Navigation item:

Add "Navigation Label" attribute to a page you want to have a label. You can also change the label color at 

Dashboard > Pages & Theme > Pixel Options > Header > Navigation > Navigation Label Color

 

10- Change Header Type:

Dashboard > Pages & Theme > Pixel Options > Header > Navigation > Header Type

(Also changable for a specific page via 'Header Type' page attribute.)

 

11- Add & Setup Search Icon:

Dashboard > Pages & Theme > Pixel Options > Header > Main Search

 

12- Change/Disable Page Title Area:

Dashboard > Pages & Theme > Pixel Options > Header > Page Title Area

(Also changable for a specific page via 'Page Title Area Type' & 'Disable Page Title Area' page attribute.)


13- Dark Footer:

 Dashboard > Pages & Theme > Pixel Options > Footer > Footer > Dark Footer

(Also changable for a specific page via 'Dark Footer' page attribute.)


14- Add "Back to top" button:

 Dashboard > Pages & Theme > Pixel Options > Footer > Footer > Back to Top

 

15- Enable Footer Ribbon:

 Dashboard > Pages & Theme > Pixel Options > Footer > Footer > Footer Ribbon 

(Also changable for a specific page via 'Footer Ribbon' page attribute.

 

16- Add Cookie Disclaimer:

 Dashboard > Pages & Theme > Pixel Options > Footer > Cookie Disclaimer

 

17- Change Owl Slider template height:

Dashboard > Pages & Theme > Pixel Options > Blocks > Image Sliders

 

18- Manually add new classes, change styles, ...:

Pixel comes with two specific files which house all your changes without losing them on next updates. For using them:

  1. Rename \theme_pixel\themes\pixel\css\less\fonts\custom.dev.less.tmp to custom.dev.less (This will automatically include new file into CSS without losing it on next theme update)
  2. Rename \theme_pixel\themes\pixel\css\less\fonts\variables.dev.less.tmp to variables.dev.less (This will automatically include a new file into CSS without losing it on next theme update). You can copy each variable from variables.less to variables.dev.less and change them as you want.


19- Change Font Family:

Pixel comes with exact instruction on how to manually change the embed and assign new fonts to your site:

  1. First, do the two steps at Instruction #18
  2. Include your fonts at \theme_pixel\themes\pixel\css\less\fonts\custom.dev.less (A sample provided in this file which you can uncomment it)
  3. Copy lines that responsible for assign fonts into new variables.dev.less file. Some sample also provided in this file which can be uncommented for your changes. 

 

20- Setup Coming Soon page:

change page type template to "Coming Soon", then edit page properties like timer and background image at Dashboard > Pages & Theme > Pixel Options > Pages > Coming Soon. You can also add blocks like Content and Social Icons via page editing UI.

 

21- Change Menu Style

Menu styles are changeable globally or per page. For changing it globally edit Dashboard > Pages & Theme > Pixel Options > Header > Navigation > Menu Style. For changing it per page use each page Navigation Style attribute.

 

22- CTA below slider (Full Width)

On edit mode, click on block: Design & Custom Template >  Cog Icon > Block Container Class > Disable Grid Container

 

23- Add additional "Main" Areas

Set "Main Area Number" page attribute

 

24- Using Express Objects

Pixel Theme uses Express Objects for creating a list of Clients, Testimonials & Team Members. This feature is available for Concrete5 version 8.1+.

When you install the theme, it creates these express objects, all you need to do is add entries via '/dashboard/express/entries'. After adding entries, you can display them with core 'Express Entry List' block and select one of the templates provided by Pixel Theme.

 

25- Parallax Effect

Pixel comes with built-in support for creating parallax areas. For adding a parallax effect to an area:

  1. Click on area name and select Edit Area Design
  2. Click on Image (Background) icon and choose an image. Also, you can select one of the Repeat options here.
  3. Click on Cog (Advanced) icon and insert "Parallax" to "Custom Class" textarea. This will add a parallax effect to your area.
  4. In addition, there are numbers of other classes that you can insert into "Custom Class" textarea which customize the area:
    • "dark": makes the content of area light (suitable for dark backgrounds)
    • "color-overlay-black": add a black overlay on the top of the image
    • "color-overlay-white": add a white overlay on the top of the image
    • "color-overlay-01" to "color-overlay-09": add a opacity to color overlay layer (01-09)

  

26- Translate to other languages

  1. Get the latest translated version of Pixel in your language here. (If you already have more completed version, translated into your language, you can complete it online for future users, or send it via direct message to Pixel developer, so he can do it )
  2. Copy translated 'messages.mo' into '\packages\theme_pixel\languages\{language}_{country}\LC_MESSAGES\messages.mo'

  

27- Replace Pixel logo with your own logo

Dashboard > Pages & Theme > Pixel Options > Header > Navigation > Standard Logo, Retina Logo, Standard Logo (Dark), Retina Logo (Dark)


28- Use customized auth pages (Login, Register, Forgot Password)

Add below code to \application\config\app.php

    /*

    * Route themes

    */

    'theme_paths' => [

        '/login' => 'pixel',

        '/register' => 'pixel',

    ],

 

29- Replace other home pages with default home page

In the current C5 version there is no way to replace homepage with another page in the site tree. Editors can copy/paste all blocks in Home2, Home3 etc and paste those block in default homepage.