SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75!  2
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

| WordPress

By default, WordPress arrives with five default user roles: Contributor, Subscriber, Author, Editor, and Administrator.

However, when you start installing plugins, you may see many extra roles.

For example, if you install Yoast SEO, there will be two new roles: “SEO Editor” and “SEO Manager”. If you then add WooCommerce, you'll find two more roles: “Shop manager” and “Customer”. The more plugins you add, the longer this list will become:

Read more ...

| WordPress

All over the web, you will find a design pattern, in which the information about the latest posts or any other kind of listing is presented in a card layout with the post image, its title, and often with a little excerpt of the article.

This visual aid is there for the users. It helps them to view the information quickly, and therefore make the right choice when clicking the “Read more” button.

The Content Views WordPress plugin allows you to configure two more layout styles:

  • Collapsible list
  • Scrollable list

You can use this to display a post or page “view” within your content. You can achieve this by using a shortcode that you get when configuring the view. Keep reading to learn how!

Read more ...

| Drupal

Long articles with many sections often discourage users from reading. They start reading and usually leave before reaching half of such articles.

To avoid this type of user experience, I recommend to group each section in your article into a collapsible tab. The article reader then will be able to digest the text in smaller pieces.

The Collapse Text Drupal 8 module adds editor filter plugin to your editor. You then will be able to create collapsible text tabs with a tag system similar to HTML.

Read on to learn how to use this module!

Read more ...

| Drupal

Creating a faceted search in Drupal implies some configuration steps. This can be overwhelming to people new to Drupal.

The MixItUp Views Drupal 8 module allows you to create a simplified version of a faceted search based on the taxonomies of the content type. It also provides a nice animation, that makes the user experience even better.

Read more ...

| Drupal

Sites with long pieces of content or with a long landing page often have a little arrow at the bottom, which helps you get back to the top of the site instead of scrolling the whole way back.

The Back To Top Drupal 8 module helps site-builders who are not yet ready to work with templates or JavaScript to place this kind of button on their sites.

Keep reading to find out how.

Read more ...

| Drupal

Sometimes, you would want to restrict access to certain pages on your site to users who do not have a specific role. You would want users to upgrade to a paid plan. Or you would just want to collect some more information from them.

The Rabbit Hole module controls what should happen when a user clicks the link to the entity or enters a URL in the address bar. It redirects such users to another page in the site.

The Rabbit Hole module works with different types of entities. They could be nodes, users, taxonomy terms and files, to name a few.

This tutorial will explain the basic usage of this module. Let’s start!

Read more ...

For many years, web developers have relied on WAMP, MAMP, XAMPP and other local development tools. However those tools have some severe limitations, particularly if you're working in a team environment.

There is a better way to do local development. We've just updated"Local Web Development With DDEV Explained" which shows you how to do local development in a way that matches modern development workflows.

Mike Anello is a long-time member of the Drupal and web development communities. In this book, he recommends replacing WAMP and MAMP with DDev-Local, a Docker-based system.

DDEV-Local is an open-source local development environment for PHP-based projects. It provides a robust and flexible setup for platforms such as Drupal, WordPress, and TYPO3.

Read more ...

| Drupal

The Embedded Google Docs Field allows the site administrator to change the display of normal file fields, making them viewable directly on the node with the help of the Google Docs Viewer.

This tutorial will explain the usage of this module through an example.

Let’s start!

Hint: Google has to be able to locate your site on the web, in order to embed the viewer. This module will not work in a local environment.

Read more ...

| Web Design

In past tutorials of this series, you learned about the flex-direction and the flex-wrap properties. They determine the orientation of flex items.

They also determine if flex-items wrap over to the next line or stay on the same line according to the available space in the layout.

The flex-flow shorthand property puts both properties together. Let’s take a look at an example!

Read more ...

Say "hello" to the 13th book from OSTraining. We're delighted to announce the launch of "Flexbox Explained" by Jorge Montoya and Steve Burge.

Flexbox Explained is a fun and enjoyable introduction to Flexbox.

Over the last fifteen years, Steve and Jorge have worked as web designers. It's been a fascinating time.

For many years, the most popular way to design websites was with frameworks such as Bootstrap and Foundation. We needed these frameworks because they added many essential features. The core features of CSS weren't enough for modern web development.

Read more ...

| Drupal

The Drupal 8 Pager module provides simple pager navigation in a block to ease up the navigation between nodes of the same content type or between nodes with a common taxonomy tag.

This tutorial will explain the usage of this module with an example. Let’s start!

Read more ...

| Web Design

In the last tutorial, you learned about the flex shorthand property. It groups three flexbox properties in one in the following order:

  1. flex-grow
  2. flex-shrink
  3. flex-basis.

This property can accept up to three values, however, you can enter only one or two values and the CSS Flexbox specification will assign the default missing value to the corresponding flex items.

Let’s check this out with an example!

Read more ...

| Web Design

The CSS Flexbox Specification is a CSS module that gives you great flexibility when creating layouts.

CSS Flexbox is an elegant and lightweight approach to layouts. It can be used without installing an extra frameworks or libraries.

Flexbox is different from the regular layouts because you can lay out items inside a flex container in all possible directions. This means that your layouts can be organize top to bottom, bottom to top, left to right or right to left.

Read more ...

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!