CODEWITHSUNDEEP
csswordpressgoogle-chrome-devtools
misaochan
misaochan

Reputation: 890

Changes to style.css in Chrome workspaces not showing up

I've been trying to use Chrome Workspaces to edit the CSS in my WordPress child theme more efficiently. I followed the tutorial at http://wordimpress.com/using-chrome-devtools-workspaces-for-faster-wordpress-development/ to set it up. It works for the most part, when I edit any element in my child theme, the modification shows up instantly in my browser window and I can save it directly to the local style.css .

The problem occurs when I want to add a new element to my child theme (this element already exists in the parent theme but I did not need to modify it before, so it doesn't exist in the child theme). Using the inspect tool, I found the element in the parent style.css, then copied it over to my child theme editor (in the Source tab of devtools). But making any modifications to that element is not reflected in the live browser once I do that.

For instance, this was the original code in the parent style:

media="all"
.widget a {
color: #777;
}

And I copied this to my child stylesheet and changed it to color: #000 . But there is no change in the color seen in the live browser.

Am I doing something wrong?

Upvotes: 0

Views: 611

Answers (3)

Meetai.com
Meetai.com

Reputation: 6938

It could be down to the cache-busting query string which WordPress adds-

Here is a relevant Chromium bug report.

For now, adding this to functions.php in WordPress in order to remove the cache-busting suffix allows me re-enable persistent edits:

function yourthemename_remove_version( $url ) {
    return remove_query_arg( 'ver', $url );
}

add_filter( 'style_loader_src', 'yourthemename_remove_version' );

In future, it looks like Persistence 2.0, recommended at the end of the bug report, will be the solution. It can be enabled as a Chrome DevTool experiment now. Notice that Chrome Canary doesn't work in Linux yet.

Source: https://stackoverflow.com/a/42542366

Upvotes: 0

Kerim Tim.
Kerim Tim.

Reputation: 1159

If you are using Google Chrome do following

  1. Go to Settings
  2. Clear browsing data
  3. Check all marks
  4. Obliterate the past hour or day, depends on when it worked properly.
  5. Click Clear browsing data

For me it worked.

Upvotes: 1

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

add !important - to override existing css property

Hope it works

media="all"
.widget a {
color: #777;
}

Change this to

media="all"
.widget a {
color: #000!important;//change
}

Upvotes: 0

Related Questions