Master branding

Master branding uses the MIT logo and your department name set in a specific font and deployed in a specific configuration. Communications Initiatives can set up and configure the files and code you’d need to deploy master branding on your site, Drupal Cloud or otherwise.

After CI has provided your master branding files, follow these instructions. Note that you will need to supply the file names specific to your files.

  1. Disable existing site name at upper left:
    Appearance > Settings > Scroll down to “Toggle display” and uncheck “Logo,” “Site name,” “Slogan”
     
  2. Create a master branded block:
    1. Structure > Blocks > + Add block
    2. Block Title: leave blank
    3. Block description: Enter “Master branded block” or something that is meaningful to you
    4. Block Body: Select “Text format: plain text” underneath the Block body.
    5. Paste in the HTML structure of your master branded logo set. This will vary according to the names of your divs and your CSS style sheets
      <a href="http://web.mit.edu/"><div id="MIT-logo-small"></div></a>
      <div id="logo-pipe"></div>
      <a href="https://your-site-name.mit.edu/">
      <div id="your-dlc-name"></div><a>
    6. Block Body: Select “Text format: Full html” underneath the Block body so Drupal will render your code and not interpret it as text.
    7. Enable your master brand block:
      Structure > Blocks: scroll down to locate the new master brand block in the Disabled Blocks section.
      The to right of your block name, under "Regions," select Header from the drop-down menu.
      Your new block will appear above in the Header section.
      You can also grab the cross icon at the left and drag it up to the Header section.
       
  3. Add CSS rules:
    1. Configure > CSS Injector > Create new rule (at bottom);
    2. Name it “Master branded block style” or something that is meaningful to you;
    3. Add the following CSS in the body. The exact code will vary depending on your DLC name. Upload the images provided by CPS for your master brand logo sets. Spacing and margin adjustments will be needed:
       
      1. The MIT logo at the upper left:

        #MIT-logo-small {
        float: left;
        margin-top: 8px;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 2px;
        height: 30px;
        width: 56px;
        background-image: url(https://your-drupal-site.mit.edu/sites/default/files/css_injector_images_image/MIT-logo-small.png);
        background-repeat: no-repeat;
        z-index: 100;
        background-position: 0px 0px;
        }
         
      2. The roll-over (hover) state of the MIT logo at the upper left:

        #MIT-logo-small:hover {
        background-image: url(https://your-drupal-site.mit.edu/sites/default/files/css_injector_images_image/MIT-logo-small.png);
        background-position: 0px -30px;
        }

      3. The vertical 1px divider between the MIT logo and the DLC name

        #logo-pipe {
        float: left;
        width: 8px;
        height: 48px;
        border-right: #000 solid 1px;
        margin-right: 10px;
        margin-left: 4px;

      4. Your DLC name

        #dlc {
        float: left;
        margin-top: 12px;
        width: 237px;
        height: 23px;
        float: left;
        background-image: url(https://your-drupal-site.mit.edu/sites/default/files/css_injector_images_image/dlc-master-branded-logo-desktop.png);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        }

      5. The roll-over (hover) state of your DLC name

        #dlc:hover {
        background-position: 0px -23px;
        }

      6. Hides the MIT logo at the upper right that comes as a default in the DLC theme

        #mit-header-logo {
        display: none;
        }

      7. Adjust the space around the search bar after hiding that MIT logo

        header .block-search {
        margin-bottom: 0;
        margin-top: 10px;
        }

        .region-header {
        padding-bottom: -16%;
        }

      8. Change the desktop version (longer) of your DLC name to the mobile (shorter) version at screen widths of 720px, if applicable.

        @media (max-width: 720px) {
        #dlc {
        display:block;
        float: left;
        margin-top: 7px;
        margin-left: 2px;
        width: 106px;
        height: 34px;
        float: left;
        background-image: url(https://your-drupal-site.mit.edu/sites/default/files/css_injector_images_image/dlc-master-branded-logo-mobile.png);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        }
        #dlc:hover {
        background-position: 0px -34px;
        }
        }
         

  4. Troubleshooting
    Drupal uses CK Editor in text fields, and this sometimes causes problems such as adding </br> or &nbsp; tags when you didn’t want them, resulting in garbled HTML display. If your master branded logo does not display correctly after checking and saving your code, this may be the problem. To solve:

    1. Configuration > Text formats > Add a text format
    2. Name it “Non-formatted html” or something that is meaningful to you
    3. Under roles, check “Administrator” and “Content manager”
    4. Under Enabled filters, uncheck all except  “Correct faulty or chopped-off html”
    5. Save
    6. Go back to your Master branded block (Structure > Blocks > Master branded block), click on “Configure” in the right column, and select “Text format: Non-formatted html”
    7. Save; check display of master branded logo on site; refresh or clear your site cache if needed.