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

Code formatting #2462

Closed
wants to merge 1 commit into from
Closed

Code formatting #2462

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions guides/v2.1/frontend-dev-guide/css-topics/css-practice.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@ The following image illustrates how store pages look when the Blank theme is app
<div style="border: 1px solid #ABABAB">
<img src="{{ site.baseurl }}/common/images/practice_blank.png" alt="product page when Blank applied">
</div>

<br />

In their Grey theme, OrangeCo wants to change the color scheme from white to grey.

The Grey theme directory is <code>app/design/frontend/OrangeCo/grey</code>.

OrangeCo decided to use the Magento UI library, so to change the color scheme, they need to define new values for certain default LESS variables.
To do this, they added an overriding <code>_theme.less</code> file in the <code>app/design/frontend/OrangeCo/grey/web/css/source</code> directory, with the following content:
<pre>
{% highlight css%}
// Color nesting
@page__background-color: @color-gray20;
@sidebar__background-color: @color-gray40;
Expand Down Expand Up @@ -73,8 +73,7 @@ To do this, they added an overriding <code>_theme.less</code> file in the <code>
// Header icons
@header-icons-color: @color-gray89;
@header-icons-color-hover: @color-gray60;

</pre>
{% endhighlight css%}

After the Grey theme is applied (and [static files cache cleared]({{ page.baseurl }}/frontend-dev-guide/cache_for_frontdevs.html#clean_static_cache)), store pages will look like following:

Expand Down