1. Change the theme accent color

Once the theme has been installed, the accent color can be changed globally by using the built-in theme design customizer. Documentation on how to use this core functionality can be found here.

2. Enable the 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 Version 4.7. So for changing them, you need to specify the title of icons as they have named in the below link. Remember you only need the part that comes after `fa-`.

https://fontawesome.com/v4.7.0/icons/

6. Change the main Navigation Type/Style

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

(Also, changeable for a specific page via `Navigation Style` and `Navigation Type` page attribute)

7. Change the Header Type

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

(Also, changeable for a specific page via `Header Type` page attribute)

8. Dark Header

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

(Also, changeable for a specific page via `Dark Header` page attribute)

9. Add a label to the Navigation item

Add the `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. Not enough space for all menu items, so it falls below the header area

The space between menu items can be tweaked in:

Dashboard > Pages & Theme > Pixel Options > Header > Navigation > Navigation Left/Right Padding (px)

(Default value is 15px)

11. Add & setup the Search in the main menu

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

12. Change/Disable the Page Title Area

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

(Also, changeable 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, changeable for a specific page via `Dark Footer` page attribute)

14. Add the 'Back to Top' button

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

15. Enable the Footer Ribbon

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

(Also, changeable for a specific page via `Footer Ribbon` page attribute)

16. Add the Cookie Disclaimer

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

17. Change the Owl Slider template height/Button Label

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 in next updates. For using them:

1. Create a folder in `\application\config\` and name it `pixel_theme`
2. Copy & Rename `\theme_pixel\themes\pixel\css\less\custom.dev.less.tmp` to `\application\config\pixel_theme\custom.dev.less` (This will automatically include the new file into CSS without losing it in the next theme updates)
3. Copy & Rename `\theme_pixel\themes\pixel\css\less\variables.dev.less.tmp` to `\application\config\pixel_theme\variables.dev.less` (This will automatically include the new file into CSS without losing it on the next theme updates). You can copy each variable from `variables.less` to `variables.dev.less` and change it as you intend to.
4. [only for 5.7.x] Open `\theme_pixel\themes\pixel\css\style5.7.less` and comment out line 4 & 45
5. Clear the site cache.

19. Change the Font Family

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

1. First, proceed with the two steps at Instruction #18
2. Include your fonts at `\theme_pixel\themes\pixel\css\less\custom.dev.less` (A sample is provided in this file which you can uncomment/use it.)
3. Copy the lines that are responsible for assigning the fonts into the new `variables.dev.less` file. Some samples also provided in this file which can be uncommented for your use case. 

20. Setup the Coming Soon page

Change page type template to `Coming Soon`, then edit page properties, 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. Make the Top Bar sticky

Dashboard > Pages & Theme > Pixel Options > Header > Top Bar Area > Sticky Top Bar

 (Also, changeable for a specific page via `Sticky Top Bar` page attribute)

22. Fix the CTA below the 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 uses `Express Objects` for creating a list of Clients, Testimonials & Team Members. This feature is available for concrete5 version 8.1+.

When being installed, the theme creates these express objects. All you need to do is adding entries via `/dashboard/express/entries`. After adding entries, you can display them with the core `Express Entry List` block and select one of the templates provided by the theme.

25. Parallax Effect

Pixel comes with built-in support for creating parallax areas. In order to make a parallax effect in an area:

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

25.1. Adding additional color overlays

Pixel already contains 2 `color-overlay-black` & `color-overlay-white` classes. These classes respectively paint the area with standard black and white colors. Although these classes combined with transparent classes -- `color-overlay-01` to `color-overlay-09` -- can adequately do the job in many use cases, you might want to add another color. In this case, the new class can be defined in `custom.dev.less`:

.color-overlay-red:before { background-color: red; }

26. Translating to other languages

1. Get the latest translated version of the 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 a direct message to the Pixel developer, so we can do it.)
2. Copy translated `messages.mo` into `\packages\theme_pixel\languages\{language}_{country}\LC_MESSAGES\messages.mo`

27. Replacing the Pixel logo with your own logo

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

27.1. Assigning a specific logo for a page

Copy the page-specific logo in `\application\config\pixel_theme\` folder and rename to `<your-main-logo-name>-<cID>`. Multiple logos including dark, retina etc can be assigned for a page.

(`cID` is your page ID)

 28. Using customized auth pages (Login, Register, Forgot Password)

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

    /*

    * Route themes

    */

    'theme_paths' => [

        '/login' => 'pixel',

        '/register' => 'pixel',

    ],

29. Replacing alternative home pages with the default home page

On the Sitemap drag the alternative page onto the default homepage, then select Copy Page: Replace `Home` with the copy of `Home 1`.

33. Fix file_exists() issue

This problem, affecting some servers, is caused by the less interpretor library that has been used in concrete5. If you face this issue, starting from 2.3.0, you can fix it easily by following these steps:

1. Create a folder in `\application\config\` and name it `pixel_theme`
2. Copy & Rename `\theme_pixel\themes\pixel\css\less\custom.dev.less.tmp` to `\application\config\pixel_theme\custom.dev.less`
3. Copy & Rename `\theme_pixel\themes\pixel\css\less\variables.dev.less.tmp` to `\application\config\pixel_theme\variables.dev.less`
4. Clear the site cache.

36. Verify whether the theme has been installed, upgraded, or uninstalled completely

In order to check if the theme has completely done the requested operation, go to Dashboard > Reports > Logs and make sure the related log entry exists:

1. In the case of installing without sample content: `Pixel Theme v.x INSTALLED successfully in x seconds.`
2. In the case of installing with sample content: `Pixel Theme v.x with sample contents INSTALLED successfully in x seconds.`
3. In the case of upgrading to a newer version: `Pixel Theme UPGRADED successfully to v.x in x seconds.`
4. In the case of uninstalling: `Pixel Theme v.x UNINSTALLED successfully in x seconds.`

If you don't find one of these 4 messages in your log list, it indicates the matching process hasn't been completed. Check #37 for probable causes & solutions.

37. Theme has not been installed, upgraded completely

After confirming the theme has not been installed or upgraded thoroughly, these solutions can be tried:

1. Increase PHP `max_execution_time`: In many cases, when installing the theme with sample contents, the default value of `max_execution_time` (30 seconds) is not enough for the server to create all the sample pages in your c5 instance. For fixing this, the value can be increased temporarily and the theme should be reinstalled afterward.

38. Find out the block/template is used on demo/your site

On Pixel, all blocks are wrapped inside a container that has data attributes for signaling the information about that block. By inspecting a block on the browser with (Firefox, Chrome, etc) inspector, you will see 3 data attributes:

1. data-area="Main : xxx" : the area of the block
2. data-block="xxx" : block type eg: html, feature, faq etc
3. data-template="xxx" : block template name