Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit f86b37e

Browse files
jfrontainjfrontain
committed
Merge branch 'develop' of https://github.com/magento/devdocs_internal into 2.1.13-release-notes
2 parents 7a76ea7 + 8abfa11 commit f86b37e

File tree

12 files changed

+8691
-3205
lines changed

12 files changed

+8691
-3205
lines changed

‎common/js/app.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/app.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎guides/v2.0/install-gde/trouble/tshoot_admin.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
---
22
layout: default
33
group: install_trouble
4-
subgroup: 02_access
54
title: Error after logging in to the Magento Admin
6-
menu_title: Error after logging in to the Magento Admin
7-
menu_node:
8-
menu_order: 15
95
version: 2.0
106
github_link: install-gde/trouble/tshoot_admin.md
117
functional_areas:
@@ -14,14 +10,18 @@ functional_areas:
1410
- Setup
1511
---
1612

17-
1813
### Details
1914

20-
The requested URL /magento2index.php/admin/admin/dashboard/index/key/0c81957145a968b697c32a846598dc2e/ was not found on this server.
15+
The requested URL /magento2index.php/admin/admin/dashboard/index/key/0c81957145a968b697c32a846598dc2e/ was not found on this server.
2116

22-
Note the lack of a slash character between <tt>magento2</tt> and <tt>index.php</tt> in the {% glossarytooltip a05c59d3-77b9-47d0-92a1-2cbffe3f8622 %}URL{% endglossarytooltip %}.
17+
Note the lack of a slash character between `magento2` and `index.php` in the {% glossarytooltip a05c59d3-77b9-47d0-92a1-2cbffe3f8622 %}URL{% endglossarytooltip %}.
2318

2419
### Solution
2520

26-
The base URL is not correct. The base URL must start with <tt>http://</tt> or <tt>https://</tt> *and* it must end with a slash (/). Run the installation again with a valid value.
21+
The base URL is not correct. The base URL must:
22+
23+
* Start with `http://` or `https://`
24+
* End with a slash (`/`)
25+
* Match the case of the `web/unsecure/base_url` record in the `core_config_data` database table
2726

27+
Re-run the installation using a valid value.

‎guides/v2.1/frontend-dev-guide/css-guide/css_quick_guide_mode.md

Lines changed: 134 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,153 @@
11
---
22
layout: default
33
group: fedg
4-
subgroup: D_CSS_G
54
title: Simple style changes with client-side LESS compilation vs. server-side
6-
menu_title: Simple style changes with client-side LESS compilation vs. server-side
7-
menu_order: 2
85
version: 2.1
96
github_link: frontend-dev-guide/css-guide/css_quick_guide_mode.md
107
functional_areas:
118
- Frontend
129
---
13-
<h2> What's in this topic </h2>
1410

15-
After you <a href="{{page.baseurl}}/frontend-dev-guide/themes/theme-create.html" target="_blank">create a theme</a>, before starting to change the styles, is deciding, which LESS compilation mode you will use. There are <a href="{{page.baseurl}}/frontend-dev-guide/css-topics/css-preprocess.html#LESS compilation modes" target="_blank">two modes available in Magento</a>: server-side compilation mode and client-side (recommended for {% glossarytooltip d2093e4a-2b71-48a3-99b7-b32af7158019 %}theme{% endglossarytooltip %} development).
16-
This topic demonstrates on a practical example how the choice of the mode influences the styles development.
11+
After you [create a theme]({{page.baseurl}}/frontend-dev-guide/themes/theme-create.html), you need to decide which LESS compilation mode to use before changing styles. You can choose between [two modes]({{page.baseurl}}/frontend-dev-guide/css-topics/css-preprocess.html#LESS compilation modes):
1712

18-
The first step, creating and applying a theme is done before the compilation mode is chosen, so it is described only once, but is required whatever compilation mode you will further use.
13+
- Server-side compilation mode (default)
14+
- Client-side compilation mode (recommended for {% glossarytooltip d2093e4a-2b71-48a3-99b7-b32af7158019 %}theme{% endglossarytooltip %} development)
1915

20-
In the examples in this topic the <a href="{{page.baseurl}}/frontend-dev-guide/css-guide/css_quick_guide_approach.html#simple_extend">simplest approach for customizing theme styles</a> is used: changes are done in the `_extend.less` of the new theme.
16+
The examples in this topic use the [simple approach]({{page.baseurl}}/frontend-dev-guide/css-guide/css_quick_guide_approach.html#simple_extend) for customizing theme styles. You make changes to the `_extend.less` file.
2117

22-
In our examples we will change the color and font of the primary buttons. The default view of the primary buttons can be illustrated by the **Create an Account** button view on the Customer login page:
18+
In our examples, we will change the color and font of the primary buttons. The default view of the primary buttons can be illustrated by the **Create an Account** button view on the Customer login page:
2319

24-
<img src="{{site.baseurl}}/common/images/extend_less_screenshot0.png" alt="Admin login page with the default view of the primary buttons">
20+
![Admin login page with the default view of the primary buttons]({{site.baseurl}}/common/images/extend_less_screenshot21.png)
2521

26-
<h2 id="first_step">First step: Create and apply a theme</h2>
22+
## Before you begin
2723

28-
1. Create a new theme as described in the <a href="{{page.baseurl}}/frontend-dev-guide/themes/theme-create.html" target="_blank">Create a theme</a> topic. In your `theme.xml` specify Magento Luma or Magento Blank as a parent theme.
29-
2. <a href="{{page.baseurl}}/frontend-dev-guide/themes/theme-apply.html#theme-apply-apply">Apply your theme</a> in the {% glossarytooltip 18b930cf-09cc-47c9-a5e5-905f86c43f81 %}Magento Admin{% endglossarytooltip %}.
24+
1. [Create a theme]({{page.baseurl}}/frontend-dev-guide/themes/theme-create.html). In your `theme.xml` file, specify Magento Luma or Magento Blank as the parent theme.
25+
2. [Apply your theme]({{page.baseurl}}/frontend-dev-guide/themes/theme-apply.html#theme-apply-apply) in the {% glossarytooltip 18b930cf-09cc-47c9-a5e5-905f86c43f81 %}Magento Admin{% endglossarytooltip %}.
3026

31-
Server-side is the default mode for LESS compilation, so if you do not change this, your Magento instance is using server-side compilation mode.
32-
33-
<h2 id="server-side">Making simple style changes in server-side compilation mode</h2>
27+
## Using server-side compilation mode
3428

3529
The following is an illustration of how the process of making simple changes looks like with the server-side LESS compilation mode:
36-
<ol>
37-
<li>Create and apply a theme.</li>
38-
<li>In your theme directory, add <code>web/css/source/_extend.less</code>.</li>
39-
<li>Change the color of the buttons by adding the following code in <code>_extend.less</code>:
40-
41-
<img src="{{ site.baseurl}}/common/images/extend_less_code_1.png" alt="Less code redefining the color of the primary buttons">
42-
</li>
43-
<li markdown="1">[Clean static files cache]({{page.baseurl}}/howdoi/clean_static_cache.html)</li>
44-
<li>Refresh the page, and view the changes applied. For example:
45-
46-
<img src="{{ site.baseurl}}/common/images/extend_less_screenshot1.png" alt="Less code redefining the color of the primary buttons">
47-
</li>
48-
<li>Change the font of the buttons by adding the following code in <code>_extend.less</code>:
49-
50-
<img src="{{ site.baseurl}}/common/images/extend_less_code_2.png" alt="Less code redefining the font of the primary buttons">
51-
</li>
52-
<li>Delete all files in the following directories:
53-
<ul>
54-
<li><code>pub/static/frontend/&lt;Your_Vendor&gt;/&lt;your_theme&gt;</code></li>
55-
<li><code>var/view_preprocessed/less</code> </li>
56-
</ul>
57-
</li>
58-
<li>Refresh the page, and view the changes applied.
59-
60-
<img src="{{ site.baseurl}}/common/images/extend_less_screenshot2.png" alt="Admin login page where the font of the buttons was changed">
61-
</li>
62-
</ol>
63-
64-
If your Magento instance uses the server-side compilation mode, to make your changes apply, you need to clean the previously generated static view files. Several ways to do this are described in the [Clean static files cache]({{page.baseurl}}/howdoi/clean_static_cache.html) topic. You can automate this process by additionally installing Grunt, and using the built-in Grunt commands to watch the changes and clean the directories. The flow of making changes using Grunt is described in the following section.
65-
66-
<h2 id="server-side-grunt">Making simple style changes in server-side compilation mode using Grunt</h2>
67-
68-
<ol>
69-
<li>Create and apply a theme. </li>
70-
<li>In your theme directory, add <code>web/css/source/_extend.less</code>.</li>
71-
<li>Install Grunt and register your theme as described in <a href="{{page.baseurl}}/frontend-dev-guide/css-topics/css_debug.html#grunt_prereq" target="_blank">Installing and configuring Grunt</a>.</li>
72-
<li>From your Magento installation directory, run the following commands:
73-
<ul>
74-
<li><code>grunt exec:&lt;your_theme&gt;</code></li>
75-
<li><code>grunt less:&lt;your_theme&gt;</code></li>
76-
<li><code>grunt watch</code></li>
77-
</ul>
78-
Where <code>&lt;your_theme&gt;</code> is the code of your theme. Conventionally it should coincide with the theme directory name.
79-
</li>
80-
<li>Change the color of the buttons by adding the following code in <code>_extend.less</code>:
81-
<img src="{{ site.baseurl}}/common/images/extend_less_code_1.png" alt="Less code redefining the color of the primary buttons">
82-
</li>
83-
<li>Refresh the page and view your changes applied:
84-
<img src="{{ site.baseurl}}/common/images/extend_less_screenshot1.png" alt="Admin login page where the color of the button was changed">
85-
</li>
86-
<li>Change the font of the buttons by adding the following code in <code>_extend.less</code>:
87-
<img src="{{ site.baseurl}}/common/images/extend_less_code_2.png" alt="Less code redefining the font of the primary buttons">
88-
</li>
89-
<li>Refresh the page and view your changes applied:
90-
<img src="{{ site.baseurl}}/common/images/extend_less_screenshot2.png" alt="Admin login page where the font of the buttons was changed">
91-
</li>
92-
</ol>
93-
94-
<h2 id="client-side">Making simple style changes in client-side compilation mode</h2>
95-
96-
<ol>
97-
<li>Create and apply a theme.</li>
98-
<li>In your theme directory, add <code>web/css/source/_extend.less</code>.</li>
99-
<li>In the Magento Admin, change the LESS compilation mode to client-side under <b>STORES</b> > <b>Configuration</b> > <b>ADVANCED</b> > <b>Developer</b> > <b>Front-end development workflow</b> > <b>Workflow type</b>. For detailed description see the <a href="{{page.baseurl}}/frontend-dev-guide/css-topics/css-preprocess.html#less_modes">CSS preprocessing</a> topic.</li>
100-
<li markdown="1">[Clean static files cache]({{page.baseurl}}/howdoi/clean_static_cache.html)
101-
</li>
102-
<li>Change the color of the buttons by adding the following code in <code>_extend.less</code>:
103-
104-
<img src="{{ site.baseurl}}/common/images/extend_less_code_1.png" alt="Less code redefining the color of the primary buttons">
105-
</li>
106-
<li>Refresh the page and view your changes applied:
107-
108-
<img src="{{ site.baseurl}}/common/images/extend_less_screenshot1.png" alt="Admin login page where the font of the buttons was changed">
109-
</li>
110-
<li>Change the font of the buttons by adding the following code in <code>_extend.less</code>:
111-
112-
<img src="{{ site.baseurl}}/common/images/extend_less_code_2.png" alt="Less code redefining the font of the primary buttons">
113-
</li>
114-
<li>Refresh the page and view your changes applied:
115-
116-
<img src="{{ site.baseurl}}/common/images/extend_less_screenshot2.png" alt="Admin login page where the font of the buttons was changed">
117-
</li>
118-
</ol>
119-
120-
If your Magento instance uses the client-side compilation mode, simple changes are applied at once. In case of more sophisticated changes, you might need to manually clean the theme sub-directory in the <code>pub/static/frontend</code> directory. There are more details about these types of changes and about the client-side mode implementation in the <a href="{{page.baseurl}}/frontend-dev-guide/css-topics/css_debug.html#css_debug_client" target="_blank">Styles debugging</a> topic.
121-
122-
<h2>Recommended reading</h2>
123-
<ul>
124-
<li><a href="{{page.baseurl}}/frontend-dev-guide/css-topics/css_debug.html" target="_blank">Styles debugging</a></li>
125-
<li><a href="{{page.baseurl}}/frontend-dev-guide/css-topics/css-preprocess.html" target="_blank">CSS preprocessing</a></li>
126-
</ul>
30+
31+
1. Navigate to your theme directory and add the `web/css/source/_extend.less` file.
32+
1. Change the color of the buttons by adding the following code in the `_extend.less` file:
33+
34+
```css
35+
.action {
36+
&.primary {
37+
background-color: palevioletred;
38+
border-color: palevioletred;
39+
}
40+
}
41+
```
42+
43+
1. [Clean static files cache]({{page.baseurl}}/howdoi/clean_static_cache.html).
44+
1. Refresh the page and verify your changes.
45+
46+
![Less code redefining the color of the primary buttons]({{ site.baseurl}}/common/images/extend_less_screenshot121.png)
47+
48+
1. Change the button font by adding the following code in the `_extend.less` file:
49+
50+
```css
51+
.action {
52+
&.primary {
53+
background-color: palevioletred;
54+
border-color: palevioletred;
55+
font-size: 1.5em;
56+
}
57+
}
58+
```
59+
60+
1. Delete all files in the following directories:
61+
62+
- `pub/static/frontend/<vendor>/<theme>`
63+
- `var/view_preprocessed/css`
64+
- `var/view_preprocessed/source`
65+
66+
1. Refresh the page and verify your changes.
67+
68+
![Admin login page where the font of the buttons was changed]({{ site.baseurl}}/common/images/extend_less_screenshot221.png)
69+
70+
{:.bs-callout .bs-callout-info}
71+
If you are using server-side compilation mode, you must [clean generated static view files]({{page.baseurl}}/howdoi/clean_static_cache.html). Continue to the next section to learn how to use Grunt to automate this process.
72+
73+
## Using server-side compilation mode with Grunt
74+
75+
1. Navigate to your theme directory and create a `web/css/source/_extend.less` file.
76+
1. Install Grunt and register your theme as described in [Installing and configuring Grunt]({{page.baseurl}}/frontend-dev-guide/css-topics/css_debug.html#grunt_prereq).
77+
1. From your Magento installation directory, run the following commands:
78+
79+
- `grunt exec:<your_theme>`
80+
- `grunt less:<your_theme>`
81+
- `grunt watch`
82+
83+
1. Change the color of the buttons by adding the following code in the `_extend.less` file:
84+
85+
```css
86+
.action {
87+
&.primary {
88+
background-color: palevioletred;
89+
border-color: palevioletred;
90+
}
91+
}
92+
```
93+
94+
1. Refresh the page and verify your changes.
95+
96+
![Admin login page where the color of the button was changed]({{ site.baseurl}}/common/images/extend_less_screenshot121.png)
97+
98+
1. Change the button font by adding the following code in the `_extend.less` file:
99+
100+
```css
101+
.action {
102+
&.primary {
103+
background-color: palevioletred;
104+
border-color: palevioletred;
105+
font-size: 1.5em;
106+
}
107+
}
108+
```
109+
110+
1. Refresh the page and verify your changes.
111+
112+
![Admin login page where the font of the buttons was changed]({{ site.baseurl}}/common/images/extend_less_screenshot221.png)
113+
114+
## Using client-side compilation mode
115+
116+
1. Navigate to your theme directory and create a `web/css/source/_extend.less` file.
117+
1. Log in to the Magento Admin.
118+
1. Click **STORES** > **Configuration** > **ADVANCED** > **Developer** > **Front-end development workflow** > **Workflow type**.
119+
1. Change the LESS compilation mode to client-side.
120+
1. [Clean static view files]({{page.baseurl}}/howdoi/clean_static_cache.html).
121+
1. Change the color of the buttons by adding the following code in the `_extend.less` file:
122+
123+
```css
124+
.action {
125+
&.primary {
126+
background-color: palevioletred;
127+
border-color: palevioletred;
128+
}
129+
}
130+
```
131+
132+
1. Refresh the page and verify your changes.
133+
134+
![Admin login page where the font of the buttons was changed]({{ site.baseurl}}/common/images/extend_less_screenshot121.png)
135+
136+
1. Change the button font by adding the following code in the `_extend.less` file:
137+
138+
```css
139+
.action {
140+
&.primary {
141+
background-color: palevioletred;
142+
border-color: palevioletred;
143+
font-size: 1.5em;
144+
}
145+
}
146+
```
147+
148+
1. Refresh the page and verify your changes.
149+
150+
![Admin login page where the font of the buttons was changed]({{ site.baseurl}}/common/images/extend_less_screenshot221.png)
151+
152+
{:.bs-callout .bs-callout-info}
153+
Simple changes are applied immediately in client-side compilation mode. For more sophisticated changes, you might need to manually clean the theme sub-directory in the `pub/static/frontend` directory. See [Styles debugging]({{page.baseurl}}/frontend-dev-guide/css-topics/css_debug.html#css_debug_client).

0 commit comments

Comments
 (0)