Skip to content

Latest commit

 

History

History
322 lines (217 loc) · 18.3 KB

instructions.md

File metadata and controls

322 lines (217 loc) · 18.3 KB

Instructions

Table of Contents

1. Change the theme accent color

  1. Dashboard > Pages & Theme > Themes > Pixel > General > Cog DropDown > Customize
  2. Click on Pencil icon on the topbar, and then on Default preset or any Custom Skin already created.
  3. Change Accent color, and then click on Create New or Save Changes to create/save changes
  4. Now at the Dashboard > Pages & Theme > Themes > Pixel > General > Cog DropDown, activate the newly created skin.

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 used in Pixel are Font Awesome icons Version 5.15.4. To chnage the icons, specify the title of icons as they have been named in the font awesome icons list. You only need the part that comes after fa-.

https://fontawesome.com/v5/search

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 a Navigation item

Add a 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 styles

Method 1: Via core customizer (Default preset)

  1. Dashboard > Pages & Theme > Themes > Pixel > General > Cog DropDown > Customize
  2. Click on Pencil icon on the topbar, and then on Default preset or any created skin under Custom Skins.
  3. Turn on Custom CSS switch, click on Edit CSS, and insert your CSS styles, and close the modal.
  4. Click on Create New or Save Changes to create/save the Skin.
  5. Back to the dashboard, at the Dashboard > Pages & Theme > Themes > Pixel > General > Cog DropDown, activate the newly created Skin.

Method 2: Via custom files (Advance preset) Advance preset merges two external custom files into the compiled CSS file. These two files are automatically copied when installing/upgrading Pixel 9.

  1. First, check if the external custom files exist in /application/config/theme_pixel9 folder. The files are variables.dev.scss and custom.dev.scss. If not, go to 18.2 and copy them manually first.
  2. Insert your own SASS/CSS styles inside these two files.
  3. You can also override theme SASS variables by copy/paste any variable from /packages/theme_pixel9/themes/pixel/css/scss/partials/_variables.scss into /application/config/theme_pixel9/variables.dev.scss.
  4. Then head to Dashboard > Pages & Theme > Themes > Pixel > General > Cog DropDown > Customize
  5. Click on Pencil icon on the topbar, and then on Advance preset or any created skin under Custom Skins (should be originated from Advance preset).
  6. Click on Create New or Save Changes to create/save the Skin.
  7. Back to the dashboard, at the Dashboard > Pages & Theme > Themes > Pixel > General > Cog DropDown, activate the newly created Skin.

18.1 Manually add new scripts

  1. Copy and Rename \theme_pixel9\themes\pixel\js\custom.dev.js.tmp to \application\config\theme_pixel9\custom.dev.js (This will automatically include the new file into the site footer without losing it in the next theme updates)

18.2 Manually copy SASS custom files

If there is no custom SASS files in /application/config/theme_pixel9 folder, follow these steps:

  1. Go to /application/config and create a folder named: theme_pixel9
  2. Copy these two files into the newly created folder: /packages/theme_pixel9/themes/pixel/css/presets/advance/variables.dev.scss.tmp and /packages/theme_pixel9/themes/pixel/css/presets/advance/custom.dev.scss.tmp
  3. Rename the files to variables.dev.scss and custom.dev.scss (remove .tmp at the end)

19. Change the Font Family

Method 1: Via core customizer (Default preset)

  1. Dashboard > Pages & Theme > Themes > Pixel > General > Cog DropDown > Customize
  2. Click on Pencil icon on the topbar, and then on Default preset or any created skin under Custom Skins.
  3. Change the Body Font, Heading Font, or Secondary Font
  4. Click on Create New or Save Changes to create/save the Skin.
  5. Back to the dashboard, at the Dashboard > Pages & Theme > Themes > Pixel > General > Cog DropDown, activate the newly created Skin.

Method 2: Via custom files (Advance preset) If you need to use other google fonts or embed your own font, use this method:

  1. First, check if the external custom files exist in /application/config/theme_pixel9 folder. The files are variables.dev.scss and custom.dev.scss. If not, go to 18.2 and copy them manually first.
  2. Use the commented code inside variables.dev.scss for adding new fonts.
  3. Head back to the dashboard, and create/update a new skin based on Advance preset (see #18).

19.1. Remove embeded google fonts

As a part of the theme, Pixel loads a couple of google fonts. If you need these fonts to be removed from the final compiled CSS file, first follow the instruction #18. The google fonts are housed inside variables.dev.scss. Remove them, and resave the skin.

21. Enable the Top Bar area

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

(Also, changeable for a specific page via Top Bar: Enable page attribute)

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 add 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 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 blanket 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 a 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 different logo for a page

Copy the page-specific logo in \application\config\pixel_theme9\ 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)

27.2 Optimizing your logo size for the theme header

The theme contains two files (\themes\pixel\images\logo.psd & \themes\pixel\images\logo@2x.psd), which helps you place your logo inside the container. By resizing the logo to be contained inside the Guide lines, you can generate images that fit better inside the header. Also, the width needs to be adjusted, as very long logos might overlap the menu and search icon.

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.

30. Assigning theme-defined margin classes to a block

  1. In the edit mode, click on the block and select Design & Custom Template.
  2. Click on cog icon and add one of these classes into Custom Class field:
    • Standard Margin: leftmargin, rightmargin, topmargin, bottommargin, allmargin
    • XSmall Margin: leftmargin-xs, rightmargin-xs, topmargin-xs, bottommargin-xs, allmargin-xs
    • Small Margin: leftmargin-sm, rightmargin-sm, topmargin-sm, bottommargin-sm, allmargin-sm
    • Large Margin: leftmargin-lg, rightmargin-lg, topmargin-lg, bottommargin-lg, allmargin-lg

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.

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 requested operation has completely gone through, go to Dashboard > Reports > Logs and make sure the corresponding 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 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
  4. class="xxxx" : custom classes often have ':' in their name

39. Turn on Dark Mode

Dashboard > Pages & Theme > Pixel Options > General > General > Dark Mode

40. Setting up the Mega Menu

  1. Create a stack, and add a Nestable Manual Nav block with Mega Menu template.
  2. On your sitemap, add Mega Menu Content attribute to the parent page. Then insert the stack name. (The parent page should be on level 1 only)
  3. Add Mega Menu Column attribute to specify the number of columns.
  4. Add Mega Menu Background Image attribute to specify an image that will display on the right-bottom of the mega menu container.