Genesis Geek

Genesis child theme tutorials

FE CSS Builder in Dynamik 2.0

By

The FE CSS Builder or Front End CSS Builder has been updated and improved for Dynamik Website Builder v2.0 and Genesis Extender v1.7

These are the slides I used in this FE CSS Builder video tutorial…

This is the script from the FE CSS Builder video guide…

In this video I’m just going to explain about the changes Eric has made to the FE CSS Builder in Dynamik 2.0 and Genesis Extender 1.7. Most of the features of the editor still work in the same way as before.

  • First I go to: Dynamik > Custom > Activate Front-end CSS Builder
  • Tick the box and then save my changes.
  • I now get the “Click to view front end” option. So I click the link and view the front end of my website.

After I click the view front end link, I see my website as a site visitor would see it

But there are two new icons on the right hand side of the page. These icons are new to Dynamik 2.0 and Extender 1.7.

The bottom icon is a map icon. This is a simple toggle switch to show or hide the hooks used on this page. This hook map makes it easy for me to decide where to add widget areas or hook boxes. I just find the position I want to place my widget area and note the name of that hook.

The top icon is a code icon, it looks like two angle brackets.

When I click the code icon, a text box opens where I can paste custom CSS code.

The FE CSS Builder code edit box has two states

  • A plain text box where you paste custom code. And…
  • A code builder with a comprehensive set of code building tools.

Using the code editor…

  • I click the code icon to open the code editor.
  • I now see a simple text box that I can paste CSS code inside.
  • There are three icons in the top right corner of this text box.
  • A square with four arrows.
  • A paint brush.
  • A magnifying glass.

The most important icon is the paint brush icon, and l’ll use that in a minute.

The square icon with four arrows is just a convenient way to snap the box back to it’s original size if you ever drag to make it larger.

The magnifying glass search icon just opens a tool tip telling you that you can use Ctrl+F to search the code you’ve written.

Now we’re left with the paint brush icon. And this is the one we’ll use the most.

When I click the paint brush icon, the simple text box changes into a fully featured code editor.

After I click the paint brush icon to open the full feature code editor, I see two more icons.

I see a code button that looks like two angle brackets, this toggles back to FE CSS Builder’s plain text code box.

The other button is a group of four tiny squares. Clicking the four tiny squares toggles on or off the edit icons inside your web page. These icons inside the web page also have a paint bush on them.

When you click to select one of the paint brush edit icons inside the web page, the corresponding selector will appear in the code editor drop down list.

This is the top level selector for that general area. For instance, if I click the paint brush icon in the header area. The header selector will appear in the code editor drop down list.

Finding selectors in FE CSS Builder

Now I want to use FE CSS Builder to find the actual selector that controls the specific element I want to style.

I click to open the drop down list. All selectors in the header area are in this list. I hover over the different elements in this drop down list. As I hover, the corresponding element in the header is highlighted with a pale green overlay.

When the element I want to style lights up, I click to choose that selector. Then I press the little print button to print that specific selector in the code box.

I can now use the code editing tools to add properties and values to my selector.

Saving your code changes

When I’ve written my code using the FE CSS Builder I…

  • Click the copy to clip board button.
  • Click the angle bracket code button to open the custom CSS code box.
  • Paste my code.
  • Then I click the Save Changes button.

Removing page elements (add-remove actions)

By

(This is the script from the video)

Removing and replacing actions in Dynamik Website Builder

In this tutorial I’m going to show you how to remove the…

  • Header
  • Breadcrumbs
  • and Post title

We’ll also reposition the post info.

To do this we’ll use Dynamik Website Builder‘s Hookboxes and Labels functions.

Because we’re using labels we can remove these elements on a page by page basis. After making our hookboxes and labels, all we need to do is select a tick box before we save or update our pages and posts.

I’ve got WordPress open so let’s get started making the code.

To remove the header we need to remove three pieces of code…

  • Header markup open
  • Header
  • Header markup close

The hook we use is: wp_head

To remove the footer we need to remove three pieces of code…

  • Footer markup open
  • Footer
  • Footer markup close

The hook we use is: wp_head

To remove the Breadcrumbs find the section labelled
Misc before Loop…

  • Breadcrumbs

The hook we use is: wp_head

To remove the Post Title find the section labelled
HTML5 Loop…

  • Post title

The hook we use is: wp_head

To reposition Post info find the section labelled
HTML5 Loop…

  • Post info

The hook we use is: wp_head

As you can see removing or repositioning individual elements of your site is easy if you’re using Dynamik Website builder.

In this video we removed some elements using the remove_action function.

We also moved the post info down the page to display in the same area as the post meta. First we removed the post info from its current hook and then added it back on a different hook.

And best of all the “PHP Builder” tool wrote all the code for us.

Why not give it a try, with a bit of practice it’s surprising what you can do.

Add a page title to the page template

By

This video is part of a series of videos about making a page template using Dynamik Website Builder.

In this video we add a page title to the page template that we’ve made in the previous three videos.

To make our template we removed the loop and replaced it with widget areas. But the page title is inside the loop, so our web page template no longer has a title.

We need to add this code to our page template…

To add a title to your page template, just copy and paste the code above.

The information below explains how we found that code (you don’t need to do this, just copy and paste the code above)…

  • View your site using Firefox or Chrome browser
  • Right click on a page headline
  • Copy the highlighted HTML and paste it into a plain text editor such as notepad
  • Search Google for “WordPress Codex Function Reference/get the title”
  • Scroll down the web page and find “Usage” then copy and paste the code inside the h1 HTML code you used in the previous steps.

You’ve now found the HTML that styles your page headline and the PHP that automatically inserts the page title into your web page.

Now You’ve got the code needed, you can paste that code immediately above the first line of short code text in your page template.

Click the image to see where your code should be pasted.

Add title code to Dynamik Website Builder template

In this video we found the CSS and PHP code needed to automatically add the page title to our page template. Then we pasted the code inside our template so it displayed just above the page content.

Giving the 5 widget template full width backgrounds

By

This is the third video in a series.

In the previous two videos we made widget areas and a web page template.

In this video we’re going to add some CSS styling, giving our web page template full width backgrounds.

We will use CSS and HTML provided by Eric Hamm, the man behind Dynamik Website Builder.

I want to keep this video as short and easy to follow as possible. So all we’ll be doing is putting the three rows of widget areas that we made in the previous two videos, into html divs and classes.

Making our page template full width and stripy

If you’ve followed along with the two previous videos, all you need to do is some simple copying and pasting.
These are the steps we go through in the video…

Step 1

Paste the CSS into the CSS tab

Step 2

In the two previous videos we made shortcode widget areas. Then we added those widget areas to our template. We now need to wrap those shortcode widget areas in the html divs and classes provided below. If you’ve followed along with the first two videos, you should be able to simply copy and paste the code below into your template. If not, watch the video to see exactly what code to copy and where to paste it.

Step 3

  • Make a label called fluid-page
  • Assign the fluid-page label to the page we’re using.
  • The page we’re using now has the fluid-page label tickbox selected. And in Page Attributes, our page template is selected

You should now have a web page template with alternate rows of light and dark background colours. You can add to this code to make as many rows as you like in your page template.

You can also add background images to the rows and style the widget areas.

The template we made in the last three video tutorials is based on this tutorial and video by Eric Hamm.

Practice makes perfect, so don’t be disheartened if you don’t get it right first time. This is complicated stuff for a newbie. But if you keep trying you’ll get there :-)

 

Make a group of 5 widget areas in a web page in a grid layout

By

In this Dynamik Website Builder tutorial video we will…

  • Make five widget areas
  • Place these widget areas in a grid layout, using Genesis Column Classes
  • Place this grid layout in a web page using shortcodes

The steps we go through in the video

  1. Make “Widget Areas 1, 2=(50%) | 3=(full width) | 4, 5=(50%)”
  2. Add Calendar to “Widget Area 1, 2, 3, 4 and 5”
  3. Add classes one-half first etc.
  4. Single rows need first class!
  5. Go to PHP Builder → Create all 5 Shortcodes → Copy
  6. Paste Shortcodes into page
  7. Make page full width using Genesis Layout Settings
  8. Paste short paragraph of text before widget areas

This is not a page template. But, it is a simple way to add widget areas to a web page. And to layout those widget areas in a grid.
In future videos we’ll reuse this widget area grid layout.
We’ll put it inside a self-contained web page template and inside a hookbox.

Making a web page template with 5 widget areas

By

This tutorial uses code built in a previous tutorial. If you haven’t seen it already, please view that tutorial first.

Making a web page template from 5 widget areas. I’m using Dynamik Website Builder

When you add a new page to your WordPress website, you add words and images etc. This is similar to creating a document in a word processor.

But what if you want to make a magazine style layout or a modern stripy parallax style page?

Here are some examples…

A simple WordPress post
http://demo.studiopress.com/lifestyle/this-is-a-featured-post-1/

A magazine style homepage
http://demo.studiopress.com/daily-dish/

A parallax style homepage
http://demo.studiopress.com/parallax/

One solution is to make your own web page template using widget areas.

This video follows on from a video tutorial I made showing you how to make 5 widget areas. We are going to reuse those same 5 widget areas in this video. So if you haven’t watched the first video yet, it would make sense to watch it before you attempt this tutorial.

Go to…

  • Genesis → Dynamik Custom → Templates
  • Name your template and save it!
  • The “File” name uses lower case letters and hyphens, the “Template Name” can be upper and lower case with spaces

After saving your new template open the PHP Builder tool…

  • Force full width layout
  • Replace the Loop, this makes a new function. Make sure you name it.
  • Add the genesis(); function
  • Wrap the whole block of code in PHP tags
  • Copy and paste this code into the page template box, below the PHP Builder dialogue box

Save your changes before we move on!

We’ve now got an empty page template…

We need to put widget areas inside this page template.

Open the PHP Builder tool again

Create your widget area shotcodes using the “Create Widget Area Shortcodes” drop down list

Make sure you get the shortcodes in the correct order.
[top_left][top_right]
[middle]
[bottom_left][bottom_right]

And put each row on it’s own line, you should end up with 3 rows. Top, middle and bottom.

Copy these shortcodes and paste them inside the { curly braces of the template’s function }

Press the [do_shortcode] button. This wraps the shortcodes in the nessessery php code.

Now. Because php was opened at the very top of the template and these shortcodes open php AGAIN we have to close php before the shortcodes and open it again after the shortcodes.

Just inside the opening curly brace make sure you have a space then add { ?> the closing php tag

Just inside the closing curly brace add the opening php tag Save then test your new page template

This is a simple web page template but we can use it as a foundation to build upon.

In future videos we will wrap these widget areas in html. This makes it possible to style the template using CSS.

A really simple widget area

By

Making a really simple: Shortcode widget area
If you want to build web page templates using Dynamik Website Builder or Genesis Extender, you need to know how to make widget areas.

Luckily, this is easy.

In this video I’m going to show you how to make the simplest type of widget area.

It’s a widget area set as a shortcode.

After we make the widget area we just paste the shortcode into any web page and the widget will be displayed in that position.

  • Make “Widget Area 1”
  • Add Calendar to “Widget Area 1”
  • Go to PHP Builder → Create Shortcode → Copy
  • Paste Shortcode into page

Many of your web page templates will contain widget areas. And, as you can see, it really is easy to make them.

In future videos we will…

  • Add groups of widget areas
  • Arrange the widget areas in a grid using Genesis Column Classes
  • Put widget areas in a hookbox
  • And, put widget areas in a self contained web page template

I hope you’ll join me soon for the next video.

Make a widget area with a custom conditional label – the basics

By

Watch as I first make a simple widget area in Dynamik Website Builder. Then use a label to select exactly which pages or posts I want the widget area to display on. I use WordPress, the Genesis Framework and Dynamik Website builder. Genesis Extender can do this in almost the same way.

It only takes a couple of minutes to add a widget area to your site if you use Dynamik Website Builder or Genesis Extender plugin.

Then you can easily make a label, which is a custom conditional that places a tick box in your WordPress editor window.

Just tick the box to enable or disable the widget area on any page or post in your website.

Change web page background colour

By

If you change the colour of the post and page content background area in Dynamik Website Builder, you need to add some padding so the text doesn’t but up against the edge of it’s box.

When I want to make changes in Dynamik, my first step is to try find a skin or a setting in Dynamik that I can copy. That way I do things in the same way as Eric, he made the program and knows what he’s doing.

Luckily, the sticky post already has a coloured background so I could easily copy the settings and get the results I wanted.

I found the sticky post padding settings by going to…

  • WordPress Dashboard → Genesis → Dynamik Design
  • Click the U-Control button
  • Select the Padding/Margin Options tab
  • Click the small blue text link that says Exclude All
  • Click ONLY the Content button to edit content area padding

The Sticky Post Padding settings were 20px top, right, bottom and left. I used these settings for the…

  • Post Content Padding and Page Content Padding
  • To change the Post Content Background and Page Content Background colours…
  • In U-control select the Background Options tab
  • Click the small blue text link that says Exclude All
  • Click ONLY the Content button to edit content area padding
  • Change the Post Content Background and Page Content Background colours

There are some slides at 3 minutes and 30 seconds into the video, They’ll help you change web page background colour in Dynamik, a Genesis child theme.

U Control the basics

By

The U-Control button helps you style your Dynamik Website Builder website and it’s content quickly and easily.

Using U-Control…

  • You find the U-Control button by going to the WordPress Dashboard → Genesis → Dynamik Design
  • Then click the U-Control button at the top of the page.
  • U-Control is a toggle button, so clicking the button once activates U-Control. Clicking the U-Control button a second time takes you back to the normal Dynamik Design interface.

There are four main options inside U-Control…

  • Fonts – Backgrounds – Borders – Margins/Padding

Once you’ve chosen one of these basic settings you can include or exclude the different sections of your site. This lets you target just the elements you want to change. Such as the header, footer or sidebars etc.

The U-Control font options have an extra setting not available in the backgrounds, borders or margins settings. You can choose to make changes to all fonts or just heading fonts or just content fonts. This is a really useful feature.

Using U-Control and drilling down to specific sections of your site makes styling your site much quicker and easier to understand.

But be careful, you can easily make sweeping changes that affect your entire site. This is great if that’s what you want to do. But not so good if you change things by mistake.

If you haven’t tried U Control yet, give it a go it really is a game changer!