Day: June 30, 2020

Posted on

Web File Management Comes to WPMU DEV Hosting

Featured Imgs 22

We ran our 2020 survey. We asked you what you’d like. You told us, among other things, a web based file manager for your managed WordPress hosting. So, here you go.

Basically you were looking for the ability to simply upload and edit files in your hosting account using a file manager interface instead of SFTP. We get that. It’s a pain having to set up a client etc. and so we put this one in the ‘do it now’ queue.

And now it’s ready for you.

How Do I Access File Manager?

To access File Manager, your site(s) must be hosted with WPMU DEV.

After that, it gets all too easy!

First, log into your account, go to The Hub, and click on the main Hosting menu.

The Hub - Hosting
Access your hosting inside The Hub.

Next, select your site and click on either the hosting menu link or hosting panel to access the tools and settings for your domain.

Select your site
Select your site and click on hosting.

Scroll down to the bottom of your screen and click on Manage Files.

Manage Files
Click on Manage Files.

And voila…File Manager!

File Manager
File Manager interface.

Note: File manager is available for both production (live) and staging sites.

The Hub - Staging site - File Manager
You can also manage your files in staging sites.

For more details on how to upload, edit, and delete your files using File Manager, see our documentation.

Manage More Than Just Files…

File Manager is just one of the many time-saving tools and profit-increasing services we make available to WPMU DEV members.

We’ve also recently added other features to our managed WordPress hosting service that our members requested, like email, DNS manager, cloning templates, WAF, and more!

So, stay tuned and watch this space for more exciting announcements coming soon!

Posted on

New in Chrome: CSS Overview

Featured Imgs 23

Here’s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations… even down to the total number of defined media queries.

Again, this is an experimental feature. Not only does that mean it’s still in progress, but it means you’ll have to enable it to start using it in DevTools.

  • Open up DevTools (Command+Option+I on Mac; Control+Shift+I on Windows)
  • Head over to DevTool Settings (? or Function+F1 on Mac; ? or F1 on Windows)
  • Click open the Experiments section
  • Enable the CSS Overview option
Screenshot of the Chrome DevTools Experimental Settings window showing the CSS Overview option selected.

And, oh hey, look at that! We get a new “CSS Overview” tab in the DevTools menu tray when the settings are closed. Make sure it’s not hidden in the overflow menu if you’re not seeing it.

Screenshot of the CSS Overview window in Chrome DevTools. It shows an overview of the elements, selectors, styles and colors used on the site, which is CSS-Tricks in this screenshot.
Lovely color palette you got there, Mr. Coyier. 😍

Notice that the report is broken out into a number of sections, including Colors, Font info, Unused declarations and Media queries. That’s a lot of information available in a small amount of space right at our fingertips.

This is pretty nifty though, huh? I love that tools like this are starting to move into the browser. Think about how this can help us not only as front-enders but also how we collaborate with designers. Like, a designer can crack this open and start checking our work to make sure everything from the color palette to the font stack are all in tact.

The post New in Chrome: CSS Overview appeared first on CSS-Tricks.

Posted on

Global and Component Style Settings with CSS Variables

Featured Imgs 23

The title of this Sara Soueidan article speaks to me. I’m a big fan of the idea that some CSS is best applied globally, and some CSS is best applied scoped to a component. I’m less interested in how that is done and more interested in just seeing that conceptual approach used in some fashion.

Sara details an approach where components don’t have too much styling by default, but have CSS custom properties applied to them that are ready to take values should you choose to set them.

For each pattern, I’ve found myself modifying the same properties whenever I needed to use it — like the font, colors (text, background, border), box shadow, spacing, etc. So I figured it would be useful and time-saving if I created variables for those properties, define those variables in the ‘root’ of the component, and ‘pass in’ the values for these variables when I use the pattern as I need. This way I can customize or theme the component by changing the property values in one rule set, instead of having to jump between multiple ones to do so.

Direct Link to Article — Permalink

The post Global and Component Style Settings with CSS Variables appeared first on CSS-Tricks.