Customizing content itemtype

The Swift branding settings are used to make sure key branding parameters – such as fonts, line height, casing, and button design – are consistent across the whole website. We believe that the default branding settings are adequate for most projects, and make it simple to configure new solutions, but in some cases it may be necessary to add custom settings to branding.

In this guide we will:

  • Create a custom branding configuration meant to be used for Black Friday using a non-standard font, font weight, etc.
  • Create a custom poster column which includes a branding selector, so you can select the Black Friday branding

In the end you will end up with something like Figure 1.1.

First create the custom branding CSS and include it in Swift:

  1. First read & follow the procedure for including custom CSS in Swift
  2. Open your custom header include file and add a reference to a font, e.g. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tourney"> 
  3. Open your custom.css file and add this CSS – if using another font adjust as necessary:
CSS
.brand .brand-black-friday { --swift-display-font: "Tourney"; --swift-display-font-weight: 200; --swift-button-primary-font-weight: 300; }

Next you want to create a custom poster column which allows the editor to choose which branding to use:

  1. First read about creating custom columns
  2. Copy “ItemType_Swift_Poster.xml” and rename it to “ItemType_Swift_Poster_Custom.xml”
  3. In the new xml file change the name and system name to match
  4. Copy /Designs/Swift/Paragraphs/Swift_Poster.cshtml and name it Swift_Poster_Custom.cshtml
  5. Log into the backend and navigate to Settings > Item Types > Swift > Page
  6. Open the Restrictions modal and enable the new item type
  7. Go to Settings > Item Types and click Refresh
  8. Open the item type – Settings > Item types > Swift > Paragraphs > Standard > Poster Custom
  9. Add a new item field – a dropdown field with the options “Standard:standard, Black friday:brand-black-friday”
  10. Open the Swift_Poster_Custom.cshtml template and add this variable:
RAZOR
string brand = !string.IsNullOrWhiteSpace(Model.Item.GetRawValueString("Brand")) ? " brand " + Model.Item.GetRawValueString("Brand").Replace(" ", "").Trim().ToLower() : "";
  1. Use the variable in the first <div> in the template, just like @(theme) is used

That’s all folks!