You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/advanced-customizations.md
+20-9Lines changed: 20 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,8 +4,6 @@ date: 2020-09-08 11:58:22
4
4
slug: advanced-customizations
5
5
description:
6
6
---
7
-
import CopyToClipBoard from "../src/components/CopyToClipboard.vue"
8
-
import { filters } from "../data/markdown-helpers/filters.js"
9
7
10
8
## Customize CSS
11
9
The styling of the theme is made up of [Sass](https://sass-lang.com/), [Bulma](https://bulma.io/), and the [CC Vocabulary](https://cc-vocabulary.netlify.app/). All the boilerplate for creating custom styles is in the **front** directory in the root of the CC Base Child Theme starter. All custom styles in **front/styles/** will override default theme styles as long as you use the same CSS classes used in the parent theme.
@@ -18,11 +16,12 @@ _As a prerequisite the CC Base Child Theme starter must be installed in the **wo
18
16
- Navigate into the **wordpress**/**wp-content**/**themes**/**cc-wp-base-theme-starter**/**front** directory.
19
17
- Install all the necessary node modules by running the command below in your terminal:
20
18
21
-
<CopyToClipBoardtext="npm install"/>
19
+
```
20
+
npm install
21
+
```
22
22
23
23
- To add custom styles cd into the styles folder, add your styles in the relevant sass files.
24
-
- Run the npm scripts below in your terminal, to watch and compile your styles respectively.
25
-
```
24
+
- Run the npm scripts below in your terminal, to watch and compile your styles respectively.```
26
25
npm watch
27
26
28
27
npm build
@@ -36,37 +35,44 @@ The widgets in the theme can be divided into three categories: default WordPress
36
35
These are widgets that come prepackaged in WordPress to learn more about them view [WordPress Widgets](https://wordpress.org/support/article/wordpress-widgets/).
37
36
38
37
### Layout Widgets
38
+
39
39
These widgets are used to design the structure of the widget areas. The layout widgets are powered by CSS Grid and they effectively work in pairs as it is outlined below.
40
40
41
41
#### Column Container Open and Column Container Close
42
+
42
43
These are used to create containers. Column Containers are blocks of space that are designed to wrap Single Column Widgets.
43
44
44
45
##### Column Container Open
46
+
45
47
The Column Container Open widget is used to initialize a container component.
- Remove Gap: This parameter denotes horizontal the space in between inner columns as well as the space below and above the container, in css those spaces are defined by grid gap, margin bottom, and margin top respectively. These all have a default value of 0.75rem.
51
53
- Column Count: This parameter will allow you to set the number of columns in the container.
52
54
- Space: This parameter denotes the vertical space in between inner columns.
53
55
54
56
##### Column Container Close
57
+
55
58
The Column Container Close widget is used to close an existing container. It essentially marks the end of a container that was opened using the Column Container Open widget. It has no parameters.
56
59
57
60
#### Single Column Open and Single Column Close
61
+
58
62
These widgets effectively form a single column structure which can be populated with any other widget.
59
63
60
64
##### Single Column Open
65
+
61
66
The Single Column Open widget is used to initialize a column component.
62
67
Its parameters are shown in the screenshot below:
63
68
64
-
69
+
65
70
66
71
- How many columns should be used: This parameter is used to configure the span of a single column. The parent container (refer to the previous section for more details) consists of a fixed number of columns which are set using the parameter Column Count. The How many columns should use field will allow you to set the number of columns the single column should occupy from the preset number columns.
67
72
- Color: This parameter is used to set the background color of the single column.
68
73
69
74
##### Single Column Close
75
+
70
76
The Single Column Close widget is used to close an existing column. It essentially marks the end of a column that was opened using the Single Column Open widget. It has no parameters.
71
77
72
78
Follow the steps below to create a column container and populate it with a couple of widgets:
@@ -80,6 +86,7 @@ Follow the steps below to create a column container and populate it with a coupl
80
86
- The final step is to add the Column Container Close widget to the Homepage panel so as to close off the Column Container.
81
87
82
88
### CC Custom Content Widgets
89
+
83
90
These widgets are prefixed by the acronym CC which stands for Creative Commons. They add custom Creative Commons assets and or content which may include social media content or special components derived from the CC Vocabulary.
84
91
85
92
- CC Card: this widget was adapted from [Cards](https://cc-vocabulary.netlify.app/?path=/story/layouts-cards--post-vertical), a CC Vocabulary Component.
@@ -98,7 +105,9 @@ The following filters are available in the theme:
98
105
99
106
Applied to expand the mandatory sidebars of the theme. It gets an array of the mandatory sidebars of the base theme as a parameter. The function should return an array with the sidebars:
Copy file name to clipboardExpand all lines: docs/contributing.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,4 +4,5 @@ date: 2020-09-08 12:07:49
4
4
slug: contributing
5
5
description:
6
6
---
7
+
7
8
The CC WP Base Theme is an open-source project, we value all contributions be it feature requests, bug reports, and or pull requests, so please feel free to contribute. Before you contribute please familiarize yourself with our [Contributing Guidelines](https://opensource.creativecommons.org/contributing-code/).
_The menus shown above are displayed in the desktop view. On any other screens, their appearance and or position might be different from what is shown above._
50
50
@@ -56,15 +56,15 @@ _The menus shown above are displayed in the desktop view. On any other screens,
56
56
- To proceed to the next step in the form, click the button labeled **Next**.
57
57
- Then click the button labeled **+Add Items**, it will reveal all of the items which can be included in the menu.
58
58
59
-
59
+
60
60
61
61
- Select menu items by clicking on them.
62
62
- You are able to re-order the arrangement of selected menu items by dragging them up and down.
63
63
- After you are done you may proceed to publish the changes.
64
64
65
65
### To create a custom menu using the dashboard:
66
66
67
-
67
+
68
68
69
69
- Go to **Dashboard** > **Appearance** > **Menus**, the form in the diagram above will be shown.
70
70
- Enter the menu name in the filled labeled **Menu Name**.
@@ -92,7 +92,7 @@ There are three layouts in the theme you can use to configure the structure of y
This is the default layout of the page template, it has a default sidebar component on the left. To populate the sidebar with widgets:
98
98
@@ -121,7 +121,7 @@ In order to display a static page on the homepage:
121
121
- Create another page and give a title of your choice(e.g. Blog).
122
122
- Go to **Dashboard** > **Settings** > **Reading**, and set your homepage display to the static page. Then set your Homepage to display the Homepage(the static page we created above) and set your posts to be displayed on the Blog page.
- There are other optional settings outlined in the **Reading Settings** which you can use to also manage your site.
127
127
- When done, click the button labeled **Save Changes**.
@@ -151,10 +151,10 @@ In order to display a static page on the homepage:
151
151
- Select the Document tab
152
152
- You will find Post Format listed in the Document settings.
153
153
- Select your desired Post format from the dropdown:
154
-
154
+
155
155
- Close the Settings by clicking on the gear icon.
156
156
- On your editor at the very bottom of your post, click on the Post Format Panel so as to enlarge it.
157
-
157
+
158
158
- Add relevant configuration details which will be influenced by the format you selected in the Settings.
159
159
160
160
### Post Formats
@@ -183,7 +183,7 @@ _If the above-listed post formats do not meet your requirements, you can complet
183
183
184
184
The widgets are available in **Dashboard** > **Appearance** > **Widgets**. On the left panel, we have the available widgets and the small panels on the right are the widget areas available in the theme.
-[Composer](https://getcomposer.org/): Install composer globally by following the [documentation](https://getcomposer.org/doc/00-intro.md#globally) for your particular OS.
17
14
18
15
_For a step by step guide on how you can set up WordPress in your local environment checkout [How to set up a local development...](https://www.endpoint.com/blog/2019/08/07/set-up-local-development-environment-for-wordpress)_
19
16
## Installation Guide
20
17
21
-
1. Download the <ahref="https://github.com/creativecommons/wp-theme-base/archive/master.zip">zip</a> package of the theme.
18
+
1. Download the <ahref="https://github.com/creativecommons/creativecommons-base/archive/master.zip">zip</a> package of the theme.
22
19
2. Unzip to your wp-content/themes directory.
23
20
3. Navigate to the wp-theme-base directory and run the command below on the terminal, to install all the necessary package dependencies:
24
21
25
-
<CopyToClipBoardtext="composer install"/>
22
+
```
23
+
composer install
24
+
```
26
25
27
-
One of the installed dependencies is [Queulat](https://github.com/felipelavinz/queulat). In-order to initialize Queulat in the project, follow the instructions provided in [feliperlavinz/queulat](https://github.com/felipelavinz/queulat#loading-queulat-as-mu-plugin).
26
+
One of the installed dependencies is [Queulat](https://github.com/felipelavinz/queulat). In-order to initialize Queulat in the project, follow the instructions provided in [feliperlavinz/queulat](https://github.com/felipelavinz/queulat#loading-queulat-as-mu-plugin).
28
27
29
28
Alternatively, to initialize Queulat navigate to the mu-plugins directory. The mu-plugins directory is in the root of the wp-content folder. It’s automatically created when you install Queulat using composer. At the root of the mu-plugins directory create an index.php file. Then copy and paste the code below:
30
29
31
-
<CopyToClipBoard:text="queulatSettings "/>
30
+
```php
31
+
<?php
32
+
/**
33
+
* Plugin Name: Queulat Loader
34
+
* Description: Load Queulat mu-plugin
35
+
*/
36
+
// Load Composer autoloader (ABSPATH it's the path to wp-load.php).
0 commit comments