Headway Themes Project Part 2 – Adding Styling to wilwebs.org

Last week, we created the website layout  of wilwebs.org with the Layout Editor of Headway. The layout of a website defines the structure of that site.

In this post, we are going to add styling to last week’s layout.

In the image above, you see two designs. The one on top, is the default Headway styling. The second design is the current styling of wilwebs.org.

The design at the bottom shows what we would like to  come close to. Well, with some minor adjustments, like a brown background for the header and footer.

Visual Editor Menu Bar

The Visual Editor starts in Grid Mode. Click the Paint Brush in the upper left corner of the Visual Editor Menu Bar to switch to Design Mode.

To jump back to the Grid More, just click the grid icon, left of the paint brush.

When you enter the Design Mode for the first time, you are greeted by a wizard acting as a tour guide. You can always restart the tour by selecting Tools >> Tour in the Menu Bar.

The arrow with the blue paint spot in the menu bar is the Toggle Inspector. Is the Toggle Inspector active, then is the paint sport is blue, otherwise it is grayed out.

An active Toggle Inspector lets you quickly style an element by right clicking it.

You can create websites with Headway without dabbling with CSS. When you want to apply CSS code, fire up the Live CSS Editor by clicking the empty tag icon </> next to the Toggle Inspector.

View Site in the menu bar opens a new browser tab so that you see the site like your visitors would see it in the current state.

Styling Panel

At the right side of the screen you see the panel of the Design Editor, which works more or less like the WordPress Customizer.

When I reviewed Headway 3.2 two years ago, this panel was positioned below the viewport – the part of the screen displaying your website.

Personally, I consider moving this panel from the bottom of the screen to the right side of the screen as a major improvement.

It requires considerable less scrolling. And since yousee the entire panel, you get a much better impression of the available options.

The Styles Tab list the applied styles of the selected element. You can quickly remove an entry, or us an entry as a shortcut for quick edits by clicking on it.

The Navigator Tab of the panel is where you select the element that you want to style.

The Navigator Tab comprises five departments. When you enter the Design Mode, you see initially three:

• Global Styling – here you find the styling defaults that effect all or most styling elements, like the default text color
• Structure – gives you access to the styling of the HTML Document, body, and the wrappers you created with the Layout Editor in Grid Mode
• Blocks – groups the blocks that you have added to the wrappers in Grid Mode

The other two departments are only displayed when you actually style an element:

• Editing – displays feedback about what you are styling
• Editing  Buttons – each button groups the available attributes for the element that you are styling

So there are two ways to style an element:

1. Toggle Inspector in the Menu Bar
2. Navigator Tab of the Design Panel

No matter how you select an element, it is important to understand that Headway distinguishes three levels of styling:

• Regular Element – affects the element in all layouts (Blog, Single Post, Page, etc)
• This Layout – affects only the layout you are working on
• This Instance – allows you to style a some elements differently from comparable elements in the same layout

The latter may seems a little bit abstract, so here is an example. Last week we created three wrappers; Header, Content/Sidebar and Footer.  This are three instances of a wrapper.

When you style a wrapper as a Regular Element, all three wrapper might get a brown background. That is not what we want. One way to get what we want is to select This Instance for each of the three wrappers.

The Global Styling

It is recommended to style your defaults first, otherwise you will have to repeat yourself over and over again for separate elements.

Just consider the elements below the Global Styling in the Navigator, as a checklist for setting the default styling of your website.

Let us start with the default text color, click ‘Text’ under Global Styling in the Navigator.

The remaining two departments of the Navigator appear:

• Editing – tells us that we are styling the text for all layouts
• Editing Buttons – Fonts, Margins, and Nudging group the available styling options

Click Fonts. A list with all available font attributes appears.

First I like to replace the default Palatino with EB Garamond. Clicking the pencil icon opens a font explorer. You can choose from traditional web safe fonts and Google Web Fonts.

I choose Google Web Fonts and select the EB Garamond font.

You can remove a customization by clicking the little white cross on the light gray background next to the name of the attribute regarding – here Font Family.

Headway proposes a default font size for the body text of 14 px. This is just right for stuff like post meta and post info, so I leave that one untouched.

The default font color is 555555, which I want to replace with the brown 3E332C.

You can set a color by entering its Hex code like 3e332C, or use the color wheel. Entering values in HSB, and RGBA is also possible.

All other font attributes remain unchanged. Clicking the big font icon closes the list with font attributes.

Setting your color for the paragraphs and hyperlinks works in exactly the same way. Click paragraph respectively hyperlinks within the Global Styling of the Navigator, and set your colors.

My preferred color for hyperlinks is orange, so I want to swap the default 555555 for F24D22. Scrolling a little down I select ‘No Underline’ for the Text Underline attribute.

Headings have to be brown too, and since I do not want to set a uniform styling for blocks, I skip those two.

And we are done with the Global Styling. Do not forget to hit the blue [Save] button occasionally.

A brief remark before we continue. When you select an element like Text in the Global Styling, that element is highlighted with a light blue background.

Next to Text, you see an edit icon, the empty tag icon, and a blue dot.

The edit icon allows you to style the element just for the current layout. So clicking Text, edits all layouts, and clicking the edit icon, just only this layout.

The empty tag icon launches the Live CSS Editor. we met the Live Editor before.

The blue dot indicates that there are customizations. These customizations include the default Headway styling.

Styling The Structure

Now we get to the structure. The page structure comprises:

• HTML – the root element
• Body – the visible part of a web page
• Wrapper – in this case with three instances; Header, Content/Sidebar, and Footer

Body

For the Body, I choose a brown background. As background image I use the lighthouse that I already use on the live site.

Since I need only one big image of the lighthouse, I select the following settings:

• Repeat: No Tiling
• Position: Center Top
• Behavior: Stay in same position
• Size: Cover

That is it.

Wrappers

The default Headway styling adds a shadow to all wrappers. Let us get rid of those.

Select Wrappers in the Structure section. Hit the Shadow button. Remove the customizations by clicking the white cross on the gray background next to the properties Horizontal Offset, Vertical Offset, Blur, and Color. Done.

Header Wrapper

As mentioned earlier, I want a brown background for the top and bottom wrappers, while the main wrapper has to become transparent.

First we activate the Toggle Inspector to select an instance. The paint spot of the Toggle Inspector turns blue.

Next, right click somewhere  in the Header area, just make sure you do not select (click) the logo or navigation area.

From the drop-down menu choose Edit This Instance.

Now I can set the desired brown for this wrapper. Verify that the padding is set to 0px.

Logo

Let us continue with the logo.

Right click the logo, choose Edit This Instance:

• set the font family to Aladin – a Google Web Font
• font size 46px
• color, orange

In addition, we can set a Hover state for the logo, so that the color changes to white (FFFFFF) when hovering over it.

Right click the logo. This time, select Instance States from the drop-down menu, and in the sub-menu that appears Edit Hover to select the white color.

When you right click an element with the Inspector enabled, you might see an orange or purple shadow. The orange shadow indicates margin, the purple shadow padding.

Because I want to decrease the margin above the logo, I can either right click the logo or select Site Title form the Navigator. Either way, click the Margins button and reduce the top margin to 5 px. Done with the logo.

Did you notice that the Editing area above the buttons indicates what you are styling?

Navigation

The default Headway styling displays a border above and below the navigation.

To remove those lines:

1. select the navigation
2. hit the Borders button
3. click the white cross at the right of the properties where you do not see Customize

Menu Item

To style the menu items:

1. choose Menu Item in the Navigator panel
2. select Spinnaker from the Google fonts
3. set the font size to 14px
4. change the color to white
5. adjust capitalization to normal

It is all a matter of pointing and clicking.

For the Hover State we change the font color to orange, and add a 2px border with a solid style above the menu item.

As you will notice, the menu item drops 2px when hovering over it.

To prevent this, we add a transparent border above the menu item in its normal state.

Click the menu item again, add the 2px border above the item, choose solid state and in the color picker pull the slider above the swatches from the right to the utmost left side of the color wheel.

Now you have set the color to transparent. And we are done with the Header Wrapper. This is how it looks:

I think we are getting somewhere.

Main Wrapper

The default Headway wrapper has a white background. For our project, we need to change this. We change this in two steps:

1. set the background of the wrapper to transparent
2. add a white background to the content area and the widget area

Either enable the Toggle Inspector enabled and select the main-wrapper, or select the main-wrapper in the Navigator panel.

Choose background, color and pull the slider to the left. The background has changed from white to transparent. That was easy.

Go back to the Navigator and select the content block. Set the color to white.

Next add a 20px, solid white border to the content area. You can set all four sides in one hit, by clicking the chain sign in the middle.

Set the padding to 20px. Let us also increase the font-size of the body text of the content area to 16px.

Switch to the Widget Area, and repeat these steps:

1. add a 20px, solid white border
2. set the padding to 20px
3. increase the font-size to 16px

That is it.

The widget title has a top and bottom border. We are going to remove those, just as we did with the navigation; click the white cross where you do not see the word Customization.

As far as I am concerned, there is just one more thing to do, that is increase the font-size of the Entry Title and Widget Title. I am going to set these to 34px, respectively 16px.

Finishing the Styling

Styling the footer is comparable to styling the header, so I suggest that we skip that part. You probably agree with me when you have made it to the tail of this post. Hats off!

The only thing left is comparing the design of the current site, with the product of our hard work.

All in all, I am quite pleased with the results. There are a few differences.

The upper version uses an image logo, instead of a text logo. Apparently, I did not position the background image correctly of the current site – is is not fixed when I reduce the viewport of the browser. And the white footer has been replaced by a brown one, with centered text.

I must tell you, that writing this post was a lot more work than creating the layout and design of the website – with Headway.

Last week, you saw that building the layout of a website with Headway is just a matter of drag-and-drop. No coding needed.

Just as with the layout, there is no coding required when adding style to a website with Headway. Composing the design of a Headway website is done with the mouse; point-and-click. Without coding.

Next time, we are going add a static homepage to our Headway website.

Headway Plans

Headway is available with three plans:

• $59 Headway Personal
• $99 Headway Business
• $199 Headway Developer

The Personal Plan allows you to use Headway on one site. Next to the Headway framework (Headway Base), you also get the Whiteboard starter template.

Headway Business includes Headway Base, the Whiteboard template, and one official Headway template of your choice. In addition, the Business plan entitles you to use Headway on three sites.

With Headway Developer you get Headway Base, all official Headway templates, and the Community Builder.

Official templates are Headway templates created by Headway Themes itself, so excluding the Community templates. The Community templates are created by Headway specialized developers and design agencies.

All three plans include one year of support and updates. After the first years can renew your license with another year. Renewals are only 50% of the initial price.