The navigation speeds up the search of your users within your site. With CSS Flexbox, it is quite practical to code a basic navigation bar without the need of using floats or complicated pixel calculations.
Keep reading this tutorial in order to learn how. Let’s start!
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!
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.
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!
In the last tutorial, you learned about the flex shorthand property. It groups three flexbox properties in one in the following order:
flex-growflex-shrinkflex-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!
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.
One OSTraining user asked us if it was possible to give everyone their own content in WordPress.
For example, is it possible to create a page for each staff member? The idea is that each staff member could login and update their own page (but not be able to update anyone else's page).
It is possible to this in WordPress thanks to the PressPermit Pro plugin.
By default, a Drupal 8 user account collects only very basic information about the user.
And, most of that information is not visible to visitors or other users on the site.
Fortunately, Drupal makes it easy to modify and expand this profile so that people can add useful information about themselves such as their real name (versus a username), address, employer, URLs, biography, and more.
Google Maps don't look appealing or pretty by default when you embed them in your Drupal content. Nor do they always nicely coordinate with your site look and feel.
What if you found a way to give them a custom design? For example - your own color? In this tutorial, you will learn how to give your Drupal Google Maps a custom style with the Styled Google Map contrib module.
This is actually quite a common question from our students. They start building their Drupal site. Then they go to work with their blocks or menus.
Then they accidentally disable the "Log in" menu link. There is no "Log in" link displayed on the site anymore. Neither for them nor for their visitors.
In this short tip, you will learn how to login to your Drupal admin page in such situation.
Telegram is an easy to use free chat application that is rapidly winning fans all over the world.
There is a Telegram plugin for WordPress but there is not yet a Telegram module for Drupal.
In this tutorial, you will learn how to integrate the Telegram app with your Drupal 8 site using JavaScript from Re:plain.
CSS Grid is revolutionizing webdesign
For the last two decades, we've relied on CSS to lay out websites, but it has always been missing some key functionality. We've relied on workarounds such as tables, floats, and positioning.
CSS Grid is different and better.
CSS Grid allows you to create a grid-based layout system, using columns and rows. You don't have to use any workarounds. You don't have to use different hacks for different browsers. You don't have to install any extra frameworks.
Because it's such a useful tool, we wrote CSS Grid Explained. CSS Grid Explained is a fun, practical introduction to CSS Grid. This was the 10th book from OSTraining, and also one of our most popular. So we've been working on big updates for the book.
One of Drupal’s big advantages is its possibility to structure content with the use of fields. However, from time to time you will want to link a file to your content without the need of adding a field to the database for that purpose.
The D8 Editor File Upload module provides this functionality by adding a button to the toolbar of the rich text editor (in this case CKEditor). This way it is possible to upload a file and present it within the content as a link. This tutorial will expĺain the usage of this module.
Let’s start!
It's amazing how much has been written about the new Gutenberg editor for WordPress.
But many people haven't really started to the use Gutenberg in the daily publishing workflow. As a result, Gutenberg is still full of semi-secret features.
One such feature is the "Pre-Publish Checks" screen in Gutenberg. When you click "Publish" on a post, you'll now see the sidebar shown below. WordPress asks "Are you ready to publish?" and encourages you to double-check your settings:
WordPress has one of the most powerful revision systems available on any blogging platform.
When you start writing in WordPress, your changes will be automatically and safely saved. And, if you want to compare your current version of a post to an old version, WordPress gives you an easy side-by-side comparison. The image below shows a revision comparison in WordPress - the old content is marked in red and the new content is in green.
In the previous tutorials of the "CSS Flexbox" series, you learned that the flex-grow property specifies how items expand relative to each other to fill up the available remaining space within the flex-container.
You also learned that flex-shrink sets how items shrink relative to each other if there is not enough space available within the flex-container. The flex-basis property assigns a fixed, ideal width (or height) to the flex-items.
All these properties can be summed up in one shorthand property, the flex property.
Let’s take a look at an example!