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:
18.1. Manually add new scripts
19. Change the Font Family
Pixel comes with exact instruction on how to manually change the embed and assign new fonts to your site:
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:
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
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`.
31. Changing the theme footer color
Once the theme has been installed, the footer 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.
32. Remove login/logout link from the footer
Dashboard > Pages & Theme > Pixel Options > Footer >Remove Login/Logout Link
32.1. Remove Account Menu from the footer
Dashboard > System & Settings > Public Profiles > Show the account menu when logged in
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:
34. Change the email/telephone in Social Link block
Dashboard > Pages & Theme > Pixel Options > Blocks > Social Links
35. Create a non-clickable menu item
Add the `navigation_link_disabled` attribute to the page you want to disable and check the attribute.
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:
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: