d-theme

The Corporate Clean Drupal theme used in this website offers numerous styles and layout options. But, many of these must be "hard coded" using simple HTML syntax. To make use of this, simply click the "Source" button on the WYSIWYG editor to enter HTML editing mode. Below are links to example pages and features you may replicate in the website. Also, some HTML coding tips and tools follow.

Corporate Clean

Corporate Clean is a website template for Drupal 7.x created by More Than (Just) Themes and offered free. It is a responsive theme, meaning that content on each page rearranges or resizes itself to fit various screen sizes including smartphones. The following templates illustrate its capabilities:

Typography - block quotes, headers and subheads, warning message boxes, etc.
About page - 1 and 3 columns on same page, contact cards, quote box.
Products page - 3 columns, multi-rows with images for each
Services page - 2-columns, multi-rows with offset icon images.

Colors

All of the colors (and fonts) used for APA and many for APA-LA are specifically defined by APA. See the Branding Documentation for frequently used information. Refer to the 2007 APA Brand Guidelines document for specifics.

Theme color palette can be adjusted in Appearance Settings (Admin login required.) Changing color HEX values makes the changes globally throughout the site. I recommend printing a copy of the page and values before you go changing things. Below is a screen capture of these color values for reference.

screen cap of theme color settings

Fonts

On the website, we're trying PT Sans as a substitute for Myriad Pro. PT Sans is available as a free webfont from Google, unlike Myriad Pro which requires licensure from Adobe. The font size needs to be tweaked by hard-coding a value in the theme CSS file to enlarge it slightly for improved legibility.

@Font Your Face

Font Your Face is a Drupal module which simplifies the inclusion of remote font repositories (such as Google Fonts) into your website. Fonts can also be downloaded and stored locally within the web hosting account. How do we use server-installed webfonts and glyphs using Drupal's @font-your-face module?
Below is an example of the code to paste and then adjust as appropriate in the theme's stylesheet.

@font-face {
font-family: "Quaver Sans";src: url("/sites/default/files/fontyourface/local_fonts/Quaver_Sans-normal-normal/quaversans-webfont.eot");src: url("/sites/default/files/fontyourface/local_fonts/Quaver_Sans-normal-normal/quaversans-webfont.eot?#iefix") format("embedded-opentype"), url("/sites/default/files/fontyourface/local_fonts/Quaver_Sans-normal-normal/quaversans-webfont.ttf") format("truetype"), url("/sites/default/files/fontyourface/local_fonts/Quaver_Sans-normal-normal/quaversans-webfont.woff") format("woff"), url("/sites/default/files/fontyourface/local_fonts/Quaver_Sans-normal-normal/quaversans-webfont.svg#quaver_sansregular") format("svg");font-style: normal;font-weight: normal;
}

@font-face {
font-family: 'glyphicons-halflings-regular';
font-style: normal;font-weight: normal;
}

@font-face {
font-family: 'ionicons';
font-style: normal;font-weight: normal;
}

HTML Coding Tips

Some of this may begin to look like Greek or Latin, but it's really simple HTML code with references to CSS entries. A few frequently used examples are below, many more are on the theme's typography examples page and About example page.

Coding Tools

Clicking the Source button on the WYSIWYG editor switches to code view. This may be helpful, but it is still a plain text view of the code - no formatting or color keying - which is enormously helpful. Many software applications for HTML coding are very useful. Simply copy the code from the CMS, paste it into a blank page on your code editor tool, and temporarily save it to your computer as an HTML file. Instantly, the HTML gets color coded and usually formatted with indents. Now you can edit the code within your local editor tool until you get it right, pasting it back into the Drupal website CMS periodically and save changes to view your results live. Suggested tools I've found useful are:

Notepad++ text and code editor - get it free here http://portableapps.com/apps/development
Kompozer WYSIWYG editor - get it free here http://portableapps.com/apps/development
BlueGriffon WYSIWYG editor - get it free here bluegriffon.org

Refused Code

The website's WYSIWYG editor scans and parses the code as it saves it. What this means is that sometimes the code you type is not the same as the code that is returned the next time you see it after saving the page. One such tag which keeps getting stripped out is <code> my code here </code>. This is a minor inconvenience, yet frustrating since every time you edit a page containing code formatted with these tags, you have to switch to Source view and re-insert the <code> tags before saving. Maybe this will be resolved in Drupal 8.

Code Examples

Non-breaking space

Block Quotations

Lorem ipsum dolor sit amet, mei et wisi movet, mel ne esse commodo detracto. Duo tollit concludaturque ex. Singulis mandamus splendide nec in, probo ignota tincidunt cu usu, eum aperiam delenit ea. Graecis offendit sea at. Dico delectus in duo. Admodum mentitum gloriatur qui in, mel erat mundi fierent no. Eros homero voluptaria his ne, case fabellas apeirian est at, eum id regione ullamcorper. Vis id iudico menandri urbanitas, mea ullum iracundia cu. Qui audiam eligendi repudiare ea, in suas prima democritum eos

Link Buttons

Create a link as a styled button by including the "more" class in the link definition like this:

<div><a class="more" href="./pagename">Button Text</a></div>

Button Example

These buttons require extra padding such as a paragraph beneath each to make sure they don't obscure other text. Add a break or a paragraph. For right align add the right align class to the div container like this...

<div class="rteright"><a class="more" href="#">Button Right Align</a></div>

Button Right Align

Links to Page URLs

Every node within Drupal (a basic page, an article, a post, a history item, etc.) has the option of having a specific name assigned to it serving as it's URL path. For example, the Sections landing page [http://louisianaplanning.com/site/?q=sections] has been assigned the path name "sections". So, to create a link from any other page within this Drupal site to that particular sections page you use the page name "sections" and you insert dot slash (./) in front of it. The dot slash tells drupal that the target is within this site. Example internal URLs would be:

./sections

./docs

Placing Images

Installed are the Drupal modules picture and breakpoints. Pictures inserted directly into a page via the WYSIWYG (ckeditor), which span more than half the page and do not behave responsively. See Responsive Images below for the solution.

Consider using the selector span[data-picture-mapping="picture_breakpoints"] in your theme CSS

Responsive Images

Keep images responsive by not specifying fixed dimensions as height= and width=. Preferably, prep them at the desired resolution and pixel dimensions with Photoshop before you upload. But, if you must upload higher resolution images or graphics, insert them into the page or article. Then edit the code as follows:

max-width:100%; height:auto

This allows them to fill the width of whatever container they are in - such as the content area of a basic page (approx. 620px). If you need them displayed smaller and do not wish to physically downsample them with Photoshop, specify their size, but enclose that in a div container with max-width:100% and height:auto. This code is an example where you see that the style of the image is scaled down, but it is encapsulated in a <div> which :

Image Dimensions

blog post image: 595px × 260px
3-column page images: 270px × 175px (used on "products" or "services" page template)
2-column page square icons: 105px × 105px
headshot card square images: 106px × 112px

Responsive iframes

Code has been appended to the CSS of the theme to define this new class. Add the iframe to your page, then switch to code view and enclose it in divs like this:

    <div class="iframe-rwd">
        <iframe width="800" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/link-to-some-content-here"></iframe>
    </div>

This will enlarge the iframe content proportionately to fill larger browser windows, yet will shrink it proportionately to fit a cellphone.

Notes for Coding Corporate Clean

Slider

Here are somewhat arcane instructions to customize CorporateClean's hard coded slider...

Template Instructions: https://www.drupal.org/project/corporateclean

http://mtt.desk.com/

Because it is so obtuse, I don't use the theme's slider and instead installed the Nivo-Slider module.

Back to Docs

d-theme

Corporate Clean

Colors

Fonts

@Font Your Face

HTML Coding Tips

Coding Tools

Refused Code

Code Examples

Non-breaking space

Block Quotations

Link Buttons

Links to Page URLs

Placing Images

Responsive Images

Image Dimensions

Responsive iframes

Notes for Coding Corporate Clean

Website Sections

Navigation

Search form

d-theme

Corporate Clean

Colors

Fonts

@Font Your Face

HTML Coding Tips

Coding Tools

Refused Code

Code Examples

Non-breaking space

Block Quotations

Link Buttons

Links to Page URLs

Placing Images

Responsive Images

Image Dimensions

Responsive iframes

Notes for Coding Corporate Clean

Website Sections

Navigation