A new web hosting control panel has been added to the Free Web Hosting Control Panel Software page. Note that such software are only useful if you are running your own web server and want something convenient to manage it. If you merely want to start a website, see How to Set Up a Website instead.
Latest PEAR Releases:
Adding WordPress plugins to your website can bring all sorts of wonderful functionality. Whether it’s a big-ticket item like a shopping cart or a smaller enhancement such as a related posts widget, there are endless possibilities.
But functionality is only part of the package. Many WordPress plugins also come loaded with their own CSS. Sometimes, those styles are quite noticeable on the front end of your website.
Theoretically, it can be a good thing. But some of this CSS is very opinionated. It can look significantly different than the styles you’ve already established on your website. Therefore, the more plugins you add, the more inconsistent your website’s look can become.
The good news is that there are a few different ways to tackle the problem. Today, we’ll introduce you to some techniques for keeping a plugin’s CSS from disrupting your UX.
The first method for dealing with rogue plugin styling is fairly straightforward. But it does require a bit of patience. It involves finding any specific CSS classes or IDs that aren’t matching up with your site’s UI.
Locating the appropriate CSS requires some knowledge of your web browser’s developer tools. By right-clicking an element on the page and selecting “Inspect” (or “Inspect Element” in Safari), it will display the related HTML markup and CSS.
From there, it takes a little experimentation. For example, sometimes the element you right-clicked isn’t necessarily the one controlling the style. That requires navigating within the inspector’s HTML and clicking on things like parent containers or links.
It helps if you know what you’re looking to change. CSS background-color or font-size properties, for instance, can be easier to spot than some others.
Once you find the correct styles, copy and paste them into your theme’s style.css file. Alternatively, you might also use Additional CSS panel within the WordPress Customize Screen and paste the code there (we’ll discuss other options below). Then, make any desired changes, upload or save.
Hint: You only need to include the CSS properties within a class or ID that you intend to change. Everything else can be omitted.
This technique is handy for situations when there are a small number of styles you’d like to change. However, it can be cumbersome if you want to make wholesale changes.
This method requires a time commitment, along with some intermediate-to-advanced CSS skills. And you may even want to reserve it for situations where a plugin’s styles are really getting in your way.
We’re talking about using the WordPress wp_dequeue_style() function, which removes a previously enqueued stylesheet. This can be used to effectively turn off any stylesheets related to a plugin.
Once you’ve turned off a stylesheet, you can take the plugin’s styles and edit them however you like. It can be a big job, but also a way to ensure that the styles are exactly what you want them to be.
The WordPress Developer Resources site has a great example of how this is done. One of the keys to success here is finding the stylesheet’s registered name. This could be found within the plugin’s code, or you might also find it in the source of a front-end page, labeled as the stylesheet’s ID.
In addition, you’ll need the CSS associated with the plugin. Again, you’ll want to dive into the plugin’s folder to find the files you need. Their contents will need to be copied, pasted into your theme’s style.css and changed to meet your needs.
Still, there are plugins that have a lot of styles. WooCommerce is a prime example. It comes packed with a significant amount of CSS. The styles work well enough, but can sometimes clash with your theme.
If you want to dequeue all or just specific WooCommerce stylesheets, their documentation can guide you through the process.
Getting a plugin’s CSS to bend to your will can be tricky. Things don’t always work the way you want them to the first time around. With that in mind, here are a few other tips and troubleshooting ideas to consider:
In some instances, a plugin’s documentation can provide solid advice for implementing style customizations. In addition to the methods mentioned above, there may be other options – such as back-end settings or plugin-specific theming.
Also, be sure to check out support forums. The odds are that someone has already asked questions regarding custom styles. There may be some valuable information to help you along the way.
We already mentioned how important the browser’s developer tools are to finding the styles you want to override. They are just as crucial to troubleshooting when things don’t work as intended.
For instance, the inspector tool can help you determine where a custom style falls within the cascade. Another style may be taking precedent, or perhaps you’re viewing a cached version of the page.
Even better is that you can edit styles right within the inspector and instantly view the results. This will let you see what a change looks like before you deploy it.
These tools might become your best friend in squashing bugs. Get to know them!
If you’re going to spend time customizing a plugin’s styles, you’ll want to make sure they are implemented sustainably. That means placing them in a location where they’ll be safe from being erased or inadvertently changed.
Placing styles within your theme’s main stylesheet is OK – provided you know that they won’t be lost after a theme update. Child themes are a great way to protect against this.
To keep things better organized, it might be worthwhile to throw all of your custom styles into a separate stylesheet. This way, you’ll always be able to find those specific styles when you need to make a change.
In addition, keep a close eye on plugin changelogs. Styles do evolve, and what you customize today isn’t guaranteed to work forever.
In general, WordPress plugins are terrific. But it can be a challenge to get their associated styles to fit in with the rest of your website. Still, you can get there with a little bit of digging.
With the help of your web browser’s developer tools, you can locate the CSS classes and IDs you want to change. From there, it’s a matter of applying those changes in a way that works best for your needs.
It takes a keen eye, but the effort can really pay dividends. When every aspect of your website looks and feels consistent, it’s that much easier for visitors to navigate. In addition, content develops a natural flow. The user experience will be all the better because of it.
The post Many Plugins, Many Styles: Creating a Consistent User Experience with WordPress appeared first on Speckyboy Design Magazine.
Newfold Digital has acquired Yoast, the WordPress SEO Plugin. Yoast is currently installed in at least 12 million websites worldwide. Newfold Digital is a leading web presence solutions provider, and their brands include Bluehost, CrazyDomains, HostGator, Network Solutions, Register.com, Web.com, and others. I use the Yoast WordPress plugin on this site, as well as many other sites and client sites that I work on.
Yoast will continue to provide it’s WordPress SEO plugin, and all of the Yoast employees will join Newfold Digital, including the leadership team and Joost de Valk.
In a blog post, Marieke van de Rakt, the CEO of Yoast, wrote about the acquisition:
Big news for Yoast! We’re so incredibly happy to announce that we are joining Newfold Digital. Joining forces with this leading web presence solutions provider will enable Yoast to take SEO for everyone to the next level! We look forward to new possibilities to help even more people to improve their SEO. We believe that our joint forces will help us to expand new possibilities across many platforms.
Joost de Valk founded Yoast in 2010.
Mobile Palette Generator – This tool will help you create a gorgeous mobile color palette, complete with previews.
ALX Free Themes – You’ll want to check out this collection of free WordPress themes to enhance your projects.
10 Reasons We Switched to Figma For Icon Design – The team at Font Awesome provide an inside look at how Figma has benefitted their design work.
8 React JavaScript Snippets That Enhance Everyday UI Elements – Prime examples of the impact React can have on a UI.
CSS Modules (The Native Ones) – A sneak peek at native CSS modules and how this experimental feature works.
How to Get Those Creative Juices Flowing Again – Some unusual but very effective ways to refresh your creative flow.
CSS Nesting, specificity and you – Learn the benefits and potential pitfalls that come along with CSS nesting.
Refactoring CSS: Strategy, Regression Testing And Maintenance (Part 2) – This helpful series shifts to establishing best practices, regression testing and crafting a maintenance plan.
Illustration Techniques: Types of Styles & Designs – An in-depth look at the different types of illustration used throughout time.
Git for Designers – All You Need to Know – Brush up on the basics of Git with this handy guide.
Performance in progress – A look at the efforts being made to improve Firefox’s startup performance.
How to Provide Great Support to Your Web Design Clients – The key ingredients for keeping your websites running smoothly and your clients happy.
Knights of the Flexbox Table – Help Sir Frederic Flexbox and his friends uncover the treasures hidden in the Tailwind CSS dungeons.
microletter – This email newsletter tool is built with simplicity in mind.
8 CSS & JavaScript Snippets for Creating Onboarding Carousels – Use these snippets to create a solid foundation for your onboarding UI.
uiFont – An online tool to help you find that perfect font.
The post Weekly News for Designers № 605 appeared first on Speckyboy Design Magazine.