Codex Tag: styling

This brief tutorial will highlight the key aspects to consider when using the Tabular layout.

 

Goal

Goal

Our goal is the simple table of posts seen on the Architect Demos site

Blueprint Design

Blueprint Design

  1. After creating a new Blueprint and entering information for the Title and Short Name, in Blueprint Design select the Tabular layout type
  2. You can optionally add Table column titles. If you don't, it will use the components' names
  3. Set the Panels across all to 1
Content Layout

Content Layout

  1. In Content Layout, select the Components to show
  2. Resize them to fit all across. The width you set for each will be the approximate width of the column.
  3. Make sure the Components width is 100%
Blueprint Styling

Blueprint Styling

  1. In the Blueprint Styling, go to the Tabular tab

From here you can style the Headings, Odd rows, and Even rows. In our example we've created alternating coloured rows by giving the odd row a background colour.

Display the Blueprint

Display the Blueprint

Using your preferred method, place the Blueprint on a page an check to see it displays as intended.

In this tutorial, we will learn about using the custom fields feature of Architect by using the very popular Advanced Custom Fields plugin and Architect’s own Snippet post type, to make a product pricing table. In this tutorial we’ll learn about: Custom fields Custom CSS Custom taxonomies Snippets This tutorial covers custom CSS which involves…

This tutorial will help you build a slider using Architect. There is a strong school of thought against the use of sliders on websites for various reasons. One of the main reasons is later slides don’t get viewed as often as the first couple. Therefore, it is wise when using sliders to order the slides…

Goal: A 3×3 grid of excerpts The goal of this tutorial is a three by three grid of excerpts, using the dummy content type as shown. Create a new Blueprint 1:¬†Create a new BlueprintArchitect provides two means of creating a new Blueprint. For this tutorial, we are going to start with a blank Blueprint, rather…