Category: grav

Grav – CLI ”; Previous Next In this chapter, we will understand how the CLI works in Grav. CLI stands for command line interface stored in bin/Grav. It performs some tasks such as clearing cache, creating backup copy, etc. Accessing CLI is different on different platforms. On Windows, you can access through cmd, on Mac you can access through Terminal and on Linux you can use shell. In windows, you can”t use UNIX style commands. To use these just install the msysgit package which provides GIT and GIT BASH and provides UNIX style commands on Windows. You can list out the available commands in the Grav by using below command − $ bin/Grav list You can see the available commands as shown in the following screenshot − New Project Creation Creating new project with Grav is very simple. You can create a new project with a Grav instance. Open your terminal or console and navigate to your Grav folder. $ cd ../ProjectFolder/grav Your Grav will be installed in the root of your web server. If you want to create folder called contact inside the root folder of your Grav, then use the command as − $ bin/Grav project-name ../webroot/ contact It will download all the required dependencies and create a new Grav instance. Installing Grav Dependencies While installing dependencies, Grav automatically installs plugins namely error plugin, problems plugin and antimatter theme. You can install these by using the following command in your terminal or console − $ cd ../webroot/myproject $ bin/Grav install You will now see the downloaded plugins in their respective folders as − ../webroot/ myproject/user/plugins/error ../webroot/ myproject/user/plugins/problems ../webroot/ myproject/user/themes/antimatter Clearing Grav Cache You can delete files and folders to clear the cache which are stored in the cache/ folder. To clear cache, you can use below command − $ cd ../webroot/myproject $ bin/Grav clear-cache Create Backup In Grav, you can back up your project stored under the root folder. As it won”t use the database so there is no difficulty to take a backup. If you want to create the backup of your project called myproject (../webroot/myproject), then use the following command − $ cd ../webroot/myproject $ bin/Grav backup You will see a zip file of the backup created under the backup/ folder. Updating Composer You can update the Grav composer which was installed via Github and installed manually using composer based vendor packages. The command is − $ bin/Grav composer Print Page Previous Next Advertisements ”;

Discuss Grav ”; Previous Next Grav is a flat-file based content management system which doesn”t use database to store the content instead it uses text file (.txt) or markdown (.md) file to store the content. The flat-file part specifically refers to the readable text and it handles the content in an easy way which can be simple for a developer. Print Page Previous Next Advertisements ”;

Grav – GPM ”; Previous Next GPM stands for Grav Package Manager which is used to install, update, un install and list the available plugins on the Grav repository. GPM executes the commands using command line interface such as terminal or cmd. You can access CLI very easily. On Windows, you can access through cmd, on Mac you can access through Terminal and on Linux you can use shell. In windows, you can”t use UNIX style commands. To use these just install the msysgit package which provides GIT and GIT BASH and provides UNIX style commands on Windows. To list the available commands on the Grav repository type the command as − $ bin/gpm list You will receive the following − You can help the commands by adding help to the line as shown below − $ bin/gpm help install You can find the version of PHP on the command line interface by using the following command − $ php -v How Does it work? When you run the commands on the command line interface, GPM automatically downloads the required data from the GetGrav.org site. It includes all the details of available packages and also determines the packages that need to be installed and which packages needs to be updated. When you are downloading the packages from the repository, the Grav repository gets cached locally and no request will be able to contact the GetGrav.org server after the cache has been generated. Some commands come with the –force (-f) option, which forces to re-fetch the repository. Using this option, there is no need to wait for 24 hours cycle before cache gets cleared. Commands You can download the available packages from the Grav repository using some commands. To make use of the command, open your terminal and navigate to your root of the Grav folder and type as bin/gpm <command>. Index The index command is used to list the available plugins, themes in the Grav repository. Use the below command in your terminal to list out the available resources. $ bin/gpm index Each line defines the name of the plugin or theme, slug, version of plugin or theme and also displays whether it is installed or not. Info The info command is used to display the information about package such as author, version, date and time of last updated, repository of package, download link of package, license information etc. Install As the name implies the install command installs the required resources for the package from the Grav repository. You can use the following command to install the required package. $ bin/gpm install package_name If you try to install an already installed package, then it informs what to do next. If you type Y, it will overwrite on an already installed package and if you type N, it will abort the installation process. Update The update command informs about the package that need to be updated. Suppose if all packages are up to date, then it will say nothing to update. $ bin/gpm update Self-upgrade The self-upgrade command is used to upgrade the Grav to the latest version. Use the following command to upgrade the Grav. $ bin/gpm self-upgrade If you are using the latest version of Grav, then it will display a message saying “You are already running the latest version of Grav” along with the date of release and the time as shown in the screen. Print Page Previous Next Advertisements ”;

Grav – Forms ”; Previous Next You can create a form using the form plugin available in this link. Search for the form plugin and install it in your Grav folder. You can also install this plugin using the command $ bin/gpm install Form. Navigate to your root folder of Grav and type this command. It will automatically download the form plugin and install the necessary dependencies. Creating a Simple Form You can create a simple form which can be defined in the page YAML frontmatter. The following is an example of a form − — title: Contact Form form: name: contact fields: – name: name label: Name placeholder: Enter your name autofocus: on autocomplete: on type: text validate: required: true – name: email label: Email placeholder: Enter your email address type: email validate: required: true – name: message label: Message placeholder: Enter your message type: textarea validate: required: true – name: g-recaptcha-response label: Captcha type: captcha recatpcha_site_key: 6LelOg4TAAAAALAt1CjjjVMxFLKY8rrnednYVbr8 recaptcha_not_validated: ”Captcha not valid!” validate: required: true buttons: – type: submit value: Submit – type: reset value: Reset process: – email: subject: “[Site Contact Form] {{ form.value.name|e }}” body: “{% include ”forms/data.html.twig” %}” – save: fileprefix: contact- dateformat: Ymd-His-u extension: txt body: “{% include ”forms/data.txt.twig” %}” – message: Thank you for getting in touch! – display: thankyou — The above code shows simple form page with name, email, message and Captcha fields. When you submit the information after filling the form, the form will process by adding process field to the YAML frontmatter as shown in the code. The process field uses the following information − The email option uses two fields such as from field specify sender of the email and to field specify receiver of the mail. The subject uses [feedback][entered mail] option in which email is sent to the entered email. The body of the email is specified in the forms/data.html.twig file which is present in the theme folder. The form input data is stored under the user/data folder. The template is defined in the forms/data.txt.twig file which is present in the theme folder. Create a subpage under the thankyou/ sub folder which will be redirected to that page when a user submits the form. You can use some fields with the form plugin as shown in the following table − Sr.No. Field & Description 1 Captcha It is an antispam field which is used in computing to determine whether or not the user is human. 2 Checkbox It displays a simple checkbox. 3 Checkboxes It displays multiple checkboxes. 4 Date and Datetime Both fields are used to display date and date along with time respectively. 5 Email It is an email field with validation. 6 Hidden It specifies the hidden field. 7 Password It specifies the password field. 8 Radio It displays the simple radio buttons. 9 Select It provides select field. 10 Spacer It allows to add title, text or horizontal line to the form. 11 Text It displays simple text field. 12 Textarea It displays simple text area field. 13 Display It displays the text or instruction field, not the input field. Fields Parameter Every field accepts the following parameters which can be used to customize the appearance in the form. Sr.No. Parameter & Description 1 label It defines the label field. 2 validate.required It makes the element required. 3 validate.pattern It specifies validation pattern. 4 validate.message It display the message when validation fails. 5 type It defines the field type. 6 default It defines the default field type. 7 size It displays the field size such as large, x-small, medium, long, small. 8 name It defines the field name. 9 classes It uses string with css classes. 10 id It defines the field id. 11 style It specifies the style of the field. 12 title It defines the title of the field. 13 disabled It determines whether or not the field is in a disabled state. 14 placeholder It is a short hint which is displayed in the input field before the user enters a value. 15 autofocus It specifies that an input element should automatically get focus when the page loads. 16 novalidate It specifies that form data should not be validated when submitted. 17 readonly It determines field as read only state. 18 autocomplete It displays the options in the field when user starts typing in the field and displays the values based on earlier typed values. Some of the fields contains specific parameters such as − Sr.No. Parameter & Description 1 date and datetime These fields use validate.min and validate.max to set minimum and maximum values. 2 spacer It uses underline to add <hr> tag, adds text values using text and uses title as <h3> tag. 3 select It uses multiple parameter to add multiple values. 4 select and checkboxes It uses options field to set the available options. 5 display It uses content parameter to display the content. It sets the markdown to true to show the content. 6 captcha It uses recatpcha_site_key and recaptcha_not_validated parameters. Note on Captcha We have code on captcha information under field called g-recaptcha-response as shown below − – name: g-recaptcha-response label: Captcha type: captcha recatpcha_site_key: 6LelOg4TAAAAALAt1CjjjVMxFLKY8rrnednYVbr8 recaptcha_not_validated: ”Captcha not valid!” validate: required: true The reCaptcha is used to protect your website from spam and abuse. It uses the recatpcha_site_key option and displays the widget on your site. To use reCaptcha, just refer the reCaptcha docs. If reCaptcha is incorrect, then it will display message using the recaptcha_not_validated option. Form Actions Email You can send an email with specific options under the process field as shown below − – email: from: “{{ config.plugins.email.from }}” to: “{{ config.plugins.email.to }}” subject: “Contact by {{ form.value.name|e }}” body: “{% include ”forms/data.html.twig” %}” It uses the email option which includes two fields; the from field specifies the sender of the email address and the to field specifies the recevier of the email address by using the Email plugin configuration. The email field also uses subject

Grav – Permission ”; Previous Next In general, permission is a process of permitting to do something on your hosting environment. The permission includes read or write access to the files on the server or editing the files on the file system. Grav is a flat file based CMS which needs to write to the file system for creating cache and log files. Grav comes under three main scenarios − PHP/Webserver runs with same user that edits the files This scenario works great with most shared hosting setup and also for local development. On the dedicated web host, we can”t consider this approach as secure enough. PHP/Webserver runs with different accounts but same group With 775 and 664 permissions using shared group between the user and PHP/Webserver account, you can ensure that two different accounts will have the Read/Write access to the files. We can create new files by setting umask 0002 on the root with proper permissions. Different accounts, fix permissions manually This approach will have different accounts and update the ownership and permission of files which ensure that the PHP/Webserver user will have the Read/Write access on the files. Following is the simple code of permissions-fixing shell script. You can edit this file as per the group which works for the setup. #!/bin/sh chown joeblow:staff . chown -R joeblow:staff * find . -type f ! -path “./bin/” | xargs chmod 664 find . -type f -path “./bin/” | xargs chmod 775 find . -type d | xargs chmod 775 find . -type d | xargs chmod +s umask 0002 chown joeblow:staff is used to change the group and user of the directory to joeblow and staff. chown -R joeblow:staff * line changes the ownership of the files and subfolder to joeblow and staff. The line find . -type f ! -path “./bin/” | xargs chmod 664 sets 664 permissions for all files from the directory to Read for the others and Read/Write for group and user. The line find . -type f -path “./bin/” | xargs chmod 775 sets 775 permissions for all files from the directory to RX for the others and RWX for group and user. umask 0002 is used to create new files with 664 and 775 permissions. Print Page Previous Next Advertisements ”;

Grav – YAML Syntax ”; Previous Next YAML stands for YAML Ain”t Markup Language which includes human readable content and often used in configuration files, blueprints (metadata information about resource) and page settings. Features Following are the features of YAML − Compared to XML or JSON, YAML is less complex and provides same features. It provides configuration settings without the need to learn complex code types such as CSS, JavaScript or PHP. YAML describes data and content of the YAML file which can be easily translated to multiple language types. Basic Rules of YAML There are some basic rules of YAML which are used to reduce the ambiguity in multiple languages and editable programs. You must end the YAML files with .yaml extension. YAML must be case-sensitive. YAML doesn”t support the use of tabs. Instead of tabs, it uses spaces which are not supported universally. Basic Data Types of YAML YAML supports some basic data types which can be used with programming languages such as − Scalars − strings or numbers. Sequences − arrays or lists. Mappings − hashes or dictionaries. Scalars Scalars are the basic data types that use strings or numbers on the pages to work with the data. It may be a boolean property (either yes or no), integer value such as 2 or string of text such as word or sentence or title of the website. For instance − string: “Grav” integer: 10 float: 10.5 boolean: true Sometimes scalars come with unquoted values like integer, float or Boolean. The string value uses punctuation which comes with single or double quotation marks which uses escaping to specify ASCII and Unicode characters. Sequences YAML represent sequences in the form of arrays or lists. It defines each item with opening dash (-) placed in the list as shown below. For instance − – Apple – Orange – Grapes Suppose if you want to define nested sequence with the sub items, and then place a single space before each dash in the sub items. For instance − – – Apple – Orange – Grapes If you want nested sequence within the nested list, then add some levels as shown below − For instance − – – – Apple – Orange – Grapes Mappings It is a way of defining keys along with the values. For example, you can assign some value to a specific element as − Sports: cricket Here the value is “cricket” that maps with the key called “Sports”. You can use this mapping with the sequence to specify the list of items for cricket; for example, we will define some player names for the value “cricket” making names as child and Sports: cricket as parent. Sports: cricket – Sachin Tendulkar – Rahul Dravid – M S Dhoni Print Page Previous Next Advertisements ”;

Grav – Twig Filters and Functions ”; Previous Next In this chapter, let”s study about Twig Filters and Functions. Filters are used to format the data the way you want with the required output too. Functions are used to generate contents. Twig templates are text files that contain expressions and variables replaced by values. Twig uses three types of tags. Output tags − The following syntax is used to display the evaluated expressions result here. {{ Place Your Output Here }} Action Tags − The following syntax is used to execute statements here. {% executable statements are placed here %} Comment tags − The following syntax is used to write comments in the Twig template file. {# write your comment here #} Twig Filters Twig Filters uses the | character to apply filters to Twig variable followed by the filter name. Arguments can be passed in parenthesis similarly like Twig functions. The following table shows Twig Filters used in Grav − Sr.No. Filter & Description Example 1 Absolute URL It takes the relative path and converts it to an absolute URL. ”<img src=”/some/path/img.jpg”/>” |absolute_url converts to − <img src=”http://learn.getGrav.org/some/path/img.jpg” /> 2 Camelize It converts a string to CamelCase format. ”contact_us”| camelize converts to − ContactUs 3 Contains if it finds the string. ”This is some string” | contains(”some”) the output is − 1 4 Defined You can check if some variable is defined or not. If variable is not defined, you can provide a default value. set header_image_width = page.header.header_image_width|defined(900) It sets header_image_width with value 900 if it’s not defined. 5 Ends-With You can determine whether a string ends with a given string by using Ends-With filter. ”this is an example for ends-with filter” | ends_with(”filter”) it is displayed as − True 6 FieldName It filters the field name by changing dot into array notation. ”field.name”|fieldName it is displayed as − field[name] 7 Humanize It is used to convert a string to human readable format. ”some_text_to_read”|humanize it is displayed as − Some text to read 8 Ksort It sorts an array map using key. {% set ritems = {”orange”:1, ”apple”:2, ”peach”:3}|ksort %} {% for key, value in ritems %}{{ key }}:{{ value }}, {% endfor %} it is displayed as − apple:2, orange:1, peach:3, 9 Left Trim It is used to remove white spaces at the beginning of a string and removes the matching character given from the left side of the string. ”/strip/leading/slash/”|ltrim(”/”) it is displayed as − strip/leading/slash/ 10 Markdown It is used to convert the string containing markdown into HTML using the markdown parser of Grav. ”## some text with markdown”|markdown it is displayed as − some text with markdown 11 MD5 The md5 hash for the string can be created by using this filter. ”something”|md5 it is displayed as − 437b930db84b8079c2dd804a71936b5f 12 Monthize By using Monthize filter, we can convert an integer number of days to number of months. ”61”|monthize it is displayed as − 2 13 Nice Time By using the Nice Time filter, we can get a date in nice human readable time format as output. page.date|nicetime(false) it is displayed as − 3 hrs ago 14 Ordinalize Ordinals ( like 1st, 2nd, 3rd ) can be given to integers by using Ordinalize filter. ”78”| ordinalize it is displayed as − 78th 15 Pluralize A string can be converted to its plural English form by using Pluralize filter. ”child”|pluralize it is displayed as − children 16 Randomize This filter helps randomize the provided list. If parameter contains any values then those values are skipped from randomizing. {% set ritems = [”one”, ”two”, ”three”, ”four”, ”five”, ”six”, ”seven”, ”eight”, ”nine”, ”ten”]|randomize(3) %} {% for ritem in ritems %}{{ ritem }}, {% endfor %} it is displayed as − one, two, three, eight, six, five, nine, seven, ten, four, 17 Right Trim It is quite similar to left trim except it removes whitespaces and matched character from right side of the string. ”/strip/leading/slash/”|rtrim(”/”) it is displayed as − /strip/leading/slash 18 Singularize A string can be converted to English singular version by using Singular filter. ”vehicles”|singularize it is displayed as − vehicle 19 Safe Email Safe Email filter is used to convert an email address into ASCII characters so that it makes harder for an email to be spammed. “[email protected]”|safe_email the output is − [email protected] 20 SortByKey It is used to sort the array map using keys. {% set people = [{”email”:”[email protected]”, ”id”:3}, {”email”:”[email protected]”, ”id”:1}, {”email”:”[email protected]”, ”id”:7}]|sort_by_key(”id”) %} {% for person in people %}{{ person.email }}:{{ person.id }}, {% endfor %} it displays − [email protected]:1, [email protected]:3, [email protected]:7, 21 Starts-With You can determine whether a string starts with a given string by using Starts-With filter. ”this is an example for starts-with filter” |starts_with(”this”) the output is − true 22 Translate for more detailed information. MY_LANGUAGE_KEY_STRING it displays − ”Some text in English” 23 Translate Admin It translates a string into current language which is set in the user.yaml file. 24 Titleize A string is converted into Title Case format by using Titleize. ”welcome page”|titleize it is displayed as − Welcome Page 25 UnderScoreize format by using UnderScoreize filter. ”ContactUs”|underscorize it is converted to − contact_us 26 Truncate a string You can use Truncate to truncate a string or shorten the string, you must specify number of characters. ”one sentence. two sentences”|truncate(5) it truncates to − one s… You can use true as parameter if you don”t want to truncate the string to closest sentence-end after the given number of characters. ”one sentence. two sentences”|truncate(5, true) it truncates to − one sentence You can also strip HTML text, but you should use striptags filter before truncate filter. ”<p>one <strong>sentence<strong>. two sentences</p>”|striptags|truncate(5) it is displayed as − one s Twig Functions Twig Functions are directly called by passing the parameter. Following table lists the functions − Sr.No. Function & Description Example 1 Array This function cast a value to array. array(value) 2 Authorize This function makes an authenticated user is authorized to see a resource and accepts

Grav – Page Editor Advanced ”; Previous Next The Page editor is a text editor and manages the pages also; this allows you to create content including the media files, publishing and taxonomy options, settings and theme specific options. The following screenshot shows the Advanced tab of the editor page. The Advanced tab contains three sections − Settings Ordering Overrides Settings The Settings section deals with the various options of the page. Here you can set the template for the page, set page”s parent, change the folder name where the page is placed in. Following fields are present in the settings section − Folder Numeric Prefix − Number is set to provide manual ordering. Folder Name − Enter the folder name where your pages are located. Parent − Set root for your pages or few pages appears as subpages. Page File − Set the theme template to the page to be displayed. Body Classes − Enter the class name that is applied on the body of the page. Ordering This section is to set the non-numbered folders in a particular order. Press and hold on the four-pronged-arrow and move it to the position to rearrange your pages in a particular order. Overrides Overrides options give extra functionality to the page such as caching, navigations visibility, setting slug to something other than the default one which is set based on the folder name. Following fields are present in the Overrides section. Menu − Sets the name to be used as menu. If nothing is set than Title will be used. Slug − Page”s portion of the URL can be set by this slug variable. Page redirect − Sets a page URL to redirect it to a different URL. Process − Process that you wish to make available in the page content. Default Child Type − For the child pages, the page type is set as default. Routable − Sets the page accordingly to check whether it is reachable by the URL or not. Caching − Sets the caching for the page. Visible − Specifies whether the page is visible in the navigation. Display Template − Sets the template to the page to be displayed. Print Page Previous Next Advertisements ”;

Grav – Admin Dashboard ”; Previous Next In this chapter, we will study about the Administrative Panel Dashboard in Grav. The Dashboard acts as a nerve center of information for the Grav Administration Panel plugin. You can inspect the traffic statistics, create new backups, Grav updates, maintenance information, view the latest page updates and you can clear the Grav”s cache with the help of this single page. Step 1 − You can specify the permissions to the user and alter the content of the Dashboard as per the demand. The screen of the dashboard will somewhat be like the following screenshot. Step 2 − You will now see the features of Cache and Updates Checking in dashboard. You will see two tabs on the top of the Dashboard menu. Clear cache Check for updates Clear cache It specifies to delete all the cache content, including the cache of images, and assets. You can see more features in the dropdown menu as mentioned below. All cache − It specifies to delete all cache Assets only − It specifies to delete cache only of assets. Images only − It specifies to delete cache only of images. Cache only − It defines to delete only cache. Check for updates This tab specifies to check updates for your site. You will receive a notification on the Dashboard, if new updates are available. You will receive updates for supported plugins, themes and even for Grav. Maintenance and Statistics This portion allows you to know the important information about your site. Maintenance This section provides you a percentage graph for Grav features that are completely up-to-date. You will see the notification of a required update, above the Maintenance and Statistics section. Update − An Update button will appear as soon as a new update is available. Next, you can click it and update your plugins and themes. You will see the Update Grav Now button in the notification bar, that updates your Grav”s core section. Backup − In this part, you can see the graph that shows you since how long you have not backed up your site. This can be executed by generating and downloading a zip file, save it as a backup for your site”s data. Statistics It displays a simple and a quick look graph of the visitors traffic on your site, that was received in the past day, week and month. It shows the bar graph separated into days of the week. Step 3 − Next, you will see the detail information of Latest Page Updates as shown below. This section allows you to know more about the latest modified content of your pages in the Grav site. Next, each time you refresh the page, it will generate the recently updated list for you. You can click on title of a page from the list; which will redirect you to the page editor in the admin section. The Manage Pages button redirects you to the pages of the administrative panel. Print Page Previous Next Advertisements ”;

Grav – Theme Customization ”; Previous Next In this chapter, let us study about Theme Customization. There are several ways to customize your theme. Grav provides many features and a few functionalities to easily customize your theme. Custom CSS You can provide your own custom.css file to customize your theme. The Antimatter theme refers the css/custom.css file through the use of Asset Manager. If no reference to the CSS file is found, then the Asset Manager will not add the reference to HTML. Creating the CSS file in Antimatter”s css/ folder will override the default CSS. For example − custom.css body a { color: #FFFF00; } The default link color is overriden and set to yellow. Custom SCSS/LESS Another way to provide custom CSS file is by using the custom.scss file. The SCSS( Syntactically Awesome Style Sheets ) is a CSS preprocessor which allows you to build CSS efficiently through the use of operators, variables, nested structures, imports, partials and mix-ins. The Antimatter is written using SCSS. In order to use SCSS, you need the SCSS compiler. You can use the command-line tools and the GUI applications to install SCSS compilers on any platform. Antimatter uses the scss/ folder to place all your .scss files. The compiled files are stored in css-compiled/ folder. The SCSS files should be watched for any updates which can be done by using the following command − scss –watch scss:css-compiled The above command tells the SCSS compiler to watch the directory called scss and whenever the css-compiled folder is updated the SCSS compiler should compile it. You can keep your custom SCSS code in scss/template/_custom.scss file. There are many advantages of keeping your code in this file. Any update from the SCSS files and other CSS files are compiled into css-compiled/template.css file You can access any of the SCSS that are used in your theme and make use of all variables and mix-ins available to it. For easier development, you are provided with access to all the features and functionalities of standard SCSS. An example of _custom.scss file is shown below − body { a { color: darken($core-accent, 20%); } } When you upgrade your theme, all the custom css will be overridden. This is the major drawback of choosing this way to customize a theme. This can be solved by using the theme inheritance. Theme Inheritance Theme Inheritance is the best way of modifying or customizing a theme and can be accomplished with a few setups. The basic idea is that a theme is defined as the base-theme that you are inheriting from, and only some bits can be modified and the rest of the things is handled by the base theme. The advantage of using theme inheritance is that the customized inherited theme will not be directly impacted whenever the base theme is updated. To accomplish this, you need to follow these steps. To store your new theme, create new folder called mytheme/ inside /user/themes/ folder. Next you need to create a new theme YAML file called mytheme.yaml under the newly created /user/themes/mytheme/ folder with the following content. streams: schemes: theme: type: ReadOnlyStream prefixes: ””: – user/themes/mytheme – user/themes/antimatter Create a YAML file called blueprints.yaml under the /user/themes/mytheme/ folder with the following content. name: MyTheme version: 1.0.0 description: “Extending Antimatter” icon: crosshairs author: name: Team Grav email: [email protected] url: http://getgrav.org We will now understand how to define a theme blueprints.yaml that consists of basic elements. More details can be provided for form definitions to control your form functionalities. The blueprints.yaml file can be examined for more details on this. In your user/config/system.yaml file edit pages: theme: option to change your default theme to new theme as shown below. pages: theme: mytheme Now new theme is created and Antimatter will be the base theme for this new mytheme theme. If you want to modify specific SCSS we need to configure SCSS compiler so that it looks your mytheme theme first and secondly the Antimatter theme. It uses the following settings − First copy the template.scss file which is placed in the antimatter/scss/ folder and paste it in the mytheme/scss/ folder. This file will contain all the @import calls for various files like template/_custom.scss and sub files. The load-path points to antimatter/scss/ folder which contains large number of SCSS files. To run the SCSS compiler, you need to provide load-path to it as shown below. scss –load-path ../antimatter/scss –watch scss:css-compiled Now, create a file called _custom.scss under mytheme/scss/template/. This file will contain all your modifications. When the custom SCSS file is changed, automatically all the SCSS files will be compiled again into template.css which is located under the mytheme/css-compiled/ folder and then the Grav references this accurately. Print Page Previous Next Advertisements ”;