Instructions

1 - Change 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- ..

...

 

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 label to a Navigation item:

Add "Navigation Label" atribute to page you want to have 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 houses all your changes without loosing 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 loosing 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 new file into css without loosing 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 prvided at this file which you should uncomment. 

 

20- Setup Comin 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 changable 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 additinal "Main" Areas

Set "Main Area Number" page attribute

 

24- Using Express Objects

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

When you install 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 selecting one of templates provided by Pixel Theme.

 

25- Parallax Effect

Pixel Comes with built-in support for creating parallax areas. For adding 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 parallax effect to your area.
  4. In addition there are number of other classes that you can insert into "Custom Class" textarea which customize the area:
    • "dark": makes 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)