Try to create theme - But nothing apply #1590

sunilit42 · 2015-07-30T14:16:54Z

Hello,

I am trying to create new theme in magento 2.

I am trying to change background color.

So i copied web/css/source/_theme.less

And change @page__background-color: @Color-White; to @page__background-color: @color-gray19;

But nothing changed into frontend side.

Already removed static files.

Also If i want to add more color code then i need to edit below file?

lib\web\css\source\lib\variables_colors.less

gotbahn · 2015-07-30T16:49:00Z

Hello @sunilit42

Seems you are doing everything right, let's try to catch what is wrong, please verify next things:

You created new theme with next structure:

app/design/frontend/
├── YourVendorName
│   │   ├──YourThemeName
│   │   │   ├── web
│   │   │   │   ├── css
│   │   │   │   │   ├── source
│   │   │   │   │   │   ├── _theme.less

You applied this theme as main in admin Stores -> Configuration -> Design -> Design Theme
Chosen your theme, saved configuration and flushed cache
Theme is applied and styles for example going from pub/static/frontend/YourVendorName/YourThemeName/...

I suggest problem in of some steps above

Also If i want to add more color code then i need to edit below file?

lib\web\css\source\lib\variables_colors.less

No, you shouldn't work with lib, it would lead to incompatibility.
Instead you can create new styles or override existing.

Example of create new styles for new theme with blank theme parent:

Simple way

Just create source/_extend.less in your theme and add there everything that you need to add new for your theme.

app/design/frontend/
├── YourVendorName
│   │   ├──YourThemeName
│   │   │   ├── web
│   │   │   │   ├── css
│   │   │   │   │   ├── source
│   │   │   │   │   │   ├── _extend.less

Advanced way

Create new parent less files

app/design/frontend/
├── YourVendorName
│   │   ├──YourThemeName
│   │   │   ├── web
│   │   │   │   ├── css
│   │   │   │   │   ├── styles-l.less, styles-m.less

Inside your new parent styles (styles-l.less, styles-m.less) you can add any new styles or imports.

Example of override exisiting styles for new theme with blank theme parent:

Let's say you don't like something that included in Magento 2 lib or sources or predefined theme, as example buttons (why not?). You can simply override existing buttons implementation with create new _buttons.less file in your theme. If path are matched your theme will override default file.

app/design/frontend/
├── YourVendorName
│   │   ├──YourThemeName
│   │   │   ├── web
│   │   │   │   ├── css
│   │   │   │   │   ├── source
│   │   │   │   │   │   ├── _buttons.less

sunilit42 · 2015-07-31T09:49:24Z

Hello,

Thanks for good explain but still same issue.

One more thing notice:
Just rename of theme name from pub/static/frontend/PackageName/Themename

When i refresh page all static content not able to create automatically, I already set Developer mode in htaccess.

So everytime i need to run below command:
magento setup:static-content:deploy

gotbahn · 2015-07-31T11:35:12Z

@sunilit42

Renaming directories seems bad practice, after creation and call theme stored in DB.

I can't reproduce your issue. Can you provide more info please? Add some screenshot with path of static files in debugger or/and created theme structure would be great.

sunilit42 · 2015-07-31T12:22:15Z

Hello,

Create new theme and name of name demo theme.

Folder stucture of theme is

Frontend screenshot:-

Now i am trying to change color from @color-gray19 to #ff5501

Now refresh page at frontend side
no changes is apply.

So rename static folder or delete it

After rename, not able to create all files automatically

So everytime when i will change something in css, i need to run below command?
magento setup:static-content:deploy

look forward your reply

gotbahn · 2015-07-31T12:42:26Z

@sunilit42 ok, now I see that theme is created and applied and trying to reach by correct path to pub.

Please verify that this files are missed in pub/static/frontend/Test/mage2... Please delete all renamed folders and 'pub/static' and show what you have after page refresh.

So everytime when i will change something in css, i need to run below command?
magento setup:static-content:deploy

No, you don't need that. Deleting of pub/static/frontend/Test/mage2... enough to rerun all process that generates static files for your theme.

sunilit42 · 2015-07-31T12:46:38Z

Already removed static folder

Only requirejs folder created after remove it.

gotbahn · 2015-07-31T14:11:31Z

@sunilit42 gotcha, thank you for detailed screenshots
seems problem is in deletion .htaccess inside pub/static, try to recover it and delete only files that need to be recreated pub/static/frontend/Test/mage2/...

sunilit42 · 2015-08-03T06:42:58Z

Hello,

Thanks for that.

What i did, i copied that htaccess file from repository.

But still one css missing- first time load.

But second time when i refresh page it is working fine

sunilit42 · 2015-08-03T06:54:11Z

Also

I changed background color from _theme.css file still not applied after refresh page.

Then i removed static files but still not showing changes.

Anything missing?

gotbahn · 2015-08-03T09:02:00Z

But still one css missing- first time load.
image

But second time when i refresh page it is working fine

@sunilit42
It's known issue. Less php processing is slow on some environments and catch timeout for second file, so it's generates only for second request. Which gonna be when you refresh page second time.

I believe we have internal ticket for that.

I changed background color from _theme.css file still not applied after refresh page.

Then i removed static files but still not showing changes.

Anything missing?

Doh. Well seems you did everything right, for me hard to say what's wrong. I created new themes couple times during last days and all was fine.

We need plan B. Can you upload your current repo to GitHub? Will try to debug fork directly.

sunilit42 · 2015-08-03T10:46:03Z

uploaded theme files on dropbox

https://www.dropbox.com/s/thm0398aivxaglt/Test.zip?dl=0

Thanks for your help

annapet · 2015-08-04T16:04:28Z

I had the same situation and I deleted also the folder /var/view_preprocessed, or in backend System/"Cache Managed" clicked on button "Flush Static Files Cache". Maybe it will help.

sunilit42 · 2015-08-04T16:16:00Z

this is not a solution..every time when I changed something in CSS then
remove all folder in developer mode
On Aug 4, 2015 9:35 PM, "Anna" [email protected] wrote:

I had the same situation and I deleted also the folder
/var/view_preprocessed, or in backend System/"Cache Managed" clicked on
button "Flush Static Files Cache". Maybe it will help.

—
Reply to this email directly or view it on GitHub
#1590 (comment).

annapet · 2015-08-04T16:18:04Z

I think so too! :)

sunilit42 · 2015-08-05T06:21:50Z

waiting for some good answer !!!

sunilit42 · 2015-08-05T08:23:48Z

@godban , is there any solution?

gotbahn · 2015-08-05T09:22:59Z

@sunilit42 as for theme that you provided, I didn't find required <preview_image>media/logo.png</preview_image> preview image. It can break theme generation.

@sunilit42 @annapet

I had the same situation and I deleted also the folder

We found issue with copies of LESS source files that are created instead of symlinks in client side less compilation. That mean there is no chance to apply changes without deleting 'pub/static/frontend' manually now. Sorry about this.
We created internal ticket for that MAGETWO-40652 and will fixed asap.

sunilit42 · 2015-08-27T10:54:54Z

hey,

any news on this?

gotbahn · 2015-09-03T17:01:44Z

Hey @sunilit42,
sorry for delay, should be fixed now

okorshenko · 2015-09-24T08:50:32Z

@sunilit42 Are you still able to reproduce this issue?

sunilit42 · 2015-10-02T08:33:45Z

one more question:

if i want to do some small changes into cssm then how i can do directly and test.

Because in magento2, that working based on saas, so it merge all css and creating css file, so much time consuming, how we can do quickly.

praful-rajput · 2015-10-12T12:07:39Z

Hello,
Que: How "grunt watch" will work for newly created theme?

I installed Magento ver. 1.0.0-beta.

I have cloned from luma theme as child theme under /app/design/frontend/Vendor/lumaDark

Note: Grunt is installed with necessary tool like [watch] and its working fine.

If I change something from /app/design/frontend/Vendor/lumaDark/Magento_Checkout/web/css/source/module/_minicart.less file. it doesn't showing under Grunt watch from command line.

While If I change it from /pub/static/frontend/Vendor/lumaDark/Magento_Checkout/web/css/source/module/_minicart.less

It showing file changes status in Command Line and less processing has been working fine.

So what is the exact way to work with less as well as grunt watch parallel for run time less processing?

Please help me..

eug123 · 2015-10-12T12:24:52Z

Hello, @vasuscoin

Have you added your theme (Vendor/lumaDark) to the themes list grunt configuration file
dev/tools/grunt/configs/themes.js?

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html#grunt_prereq

praful-rajput · 2015-10-12T12:35:25Z

Hey @eug123
Sorry for delay.
I have added them to dev/tools/grunt/configs/theme.js as well as added to dev/tools/grunt/configs/less.js

praful-rajput · 2015-10-12T12:40:50Z

@eug123
I have attached theme.js & less.js screenshot.

When execute grunt less:lumaDark or grunt exec:lumaDark or grunt exec:all all these commands are working fine. but issue is mentioned in my first comment.

eug123 · 2015-10-12T13:21:12Z

Sorry, @vasuscoin

Have skipped info about your magento version.
There is an issue in beta - system creates copies of less files instead of symlinks, so changes in sources are not visible for watcher.
There is a discussion about it
And here is a patch to fix symlink issue in beta - https://gist.github.com/godban/8cb178f9a84ed85f1eac

praful-rajput · 2015-10-13T07:24:49Z

@eug123
I tried to install patch. Unfortunately app/code/Magento/Developer/Test/Unit/Console/Command/CssDeployCommandTest.php file not found.

Where from I will received this file?

eug123 · 2015-10-13T08:38:25Z

Hi @vasuscoin
ver. 1.0.0-beta version of this file in the master branch
https://github.com/magento/magento2/blob/master/app/code/Magento/Developer/Test/Unit/Console/Command/CssDeployCommandTest.php

praful-rajput · 2015-10-13T12:51:02Z

In which branch we have to work after cloned from https://github.com/magento/magento2 ? develop or master ?
I observed that there are some files & folders are missing in develop branch.
e.g. https://github.com/magento/magento2/tree/master/lib/internal/Magento/Framework/Less is not found into develop branch.

praful-rajput · 2015-10-13T12:57:50Z

I got answer for my query at http://devdocs.magento.com/guides/v2.0/install-gde/install/composer-clone.html#instgde-prereq-compose-clone
Thank you.

sunilit42 · 2015-10-13T13:42:30Z

When i am using grunt watch command,it showing waiting screen only:

davidalger · 2015-11-10T21:32:14Z

Fixed.

Public Pull Requests #11240 #11493 #11430 #11470 #11445 #11406 #11383 #11351 #11359 #11342 #11261

sunilit42 changed the title ~~Try to create theme~~ Try to create theme - But nothing apply Jul 30, 2015

vpelipenko added CS bug report labels Jul 30, 2015

vpelipenko added question and removed bug report labels Jul 30, 2015

gotbahn mentioned this issue Aug 5, 2015

Grunt watch - doesn't see file changes #1619

Closed

vpelipenko added Issue: Ready for Work Gate 4. Acknowledged. Issue is added to backlog and ready for development bug report and removed question labels Aug 5, 2015

okorshenko added the Progress: needs update label Sep 24, 2015

okorshenko removed the Progress: needs update label Oct 2, 2015

davidalger closed this as completed Nov 10, 2015

okorshenko pushed a commit that referenced this issue Oct 16, 2017

Merge pull request #1590 from magento-engcom/2.2-develop-prs

080a341

Public Pull Requests #11240 #11493 #11430 #11470 #11445 #11406 #11383 #11351 #11359 #11342 #11261

Try to create theme - But nothing apply #1590

Try to create theme - But nothing apply #1590

Comments

sunilit42 commented Jul 30, 2015

gotbahn commented Jul 30, 2015

Example of create new styles for new theme with blank theme parent:

Simple way

Advanced way

Example of override exisiting styles for new theme with blank theme parent:

Uh oh!

sunilit42 commented Jul 31, 2015

Uh oh!

gotbahn commented Jul 31, 2015

Uh oh!

sunilit42 commented Jul 31, 2015

Uh oh!

gotbahn commented Jul 31, 2015

Uh oh!

sunilit42 commented Jul 31, 2015

Uh oh!

gotbahn commented Jul 31, 2015

Uh oh!

sunilit42 commented Aug 3, 2015

Uh oh!

sunilit42 commented Aug 3, 2015

Uh oh!

gotbahn commented Aug 3, 2015

Uh oh!

sunilit42 commented Aug 3, 2015

Uh oh!

annapet commented Aug 4, 2015

Uh oh!

sunilit42 commented Aug 4, 2015

Uh oh!

annapet commented Aug 4, 2015

Uh oh!

sunilit42 commented Aug 5, 2015

Uh oh!

sunilit42 commented Aug 5, 2015

Uh oh!

gotbahn commented Aug 5, 2015

Uh oh!

sunilit42 commented Aug 27, 2015

Uh oh!

gotbahn commented Sep 3, 2015

Uh oh!

okorshenko commented Sep 24, 2015

Uh oh!

sunilit42 commented Oct 2, 2015

Uh oh!

praful-rajput commented Oct 12, 2015

Uh oh!

eug123 commented Oct 12, 2015

Uh oh!

praful-rajput commented Oct 12, 2015

Uh oh!

praful-rajput commented Oct 12, 2015

Uh oh!

eug123 commented Oct 12, 2015

Uh oh!

praful-rajput commented Oct 13, 2015

Uh oh!

eug123 commented Oct 13, 2015

Uh oh!

praful-rajput commented Oct 13, 2015

Uh oh!

praful-rajput commented Oct 13, 2015

Uh oh!

sunilit42 commented Oct 13, 2015

Uh oh!

davidalger commented Nov 10, 2015

Uh oh!