Last week’s Feature of the Week Post provided an introduction to the Dynamik Website Builder showing how easy it is to implement significant design and styling changes quickly and easily with it.
That particular post showed how changing the colour, width, shadow and shape of the Wrap Border around the site could be achieved with just a few clicks.
This week we’re going to step up a couple of gears or so and examine one of the most powerful features in the Dynamik Child Theme – the Custom CSS Builder.
When designing their sites, all that many users require is provided by the multitude of design options provided in Dynamik.
But occasionally, it can be useful to be able to apply some CSS code to a particular element to achieve a certain effect for something a little different.
The Custom CSS Builder in Dynamik allows you to do just that, and do it simply, easily and quickly, and also maintains Dynamik’s “no coding required” approach to site design.
It doesn’t matter if you’re well seasoned in CSS coding or a total newbie to it, because like it’s name suggests, it builds the code for you…. you just have to decide what design effects you want to apply!
Let’s open it up and have a look and what it offers.
Using the Custom CSS Builder
The first thing to note here is that there are several ways in which the CSS Builder can be accessed and used throughout Dynamik. Some of them will be covered in future posts, but in order to keep this post a reasonable length we’ll look at just one of them here.
So let’s click the Dynamik Custom option in the Genesis menu to get this screen:
Dynamik Custom
The default screen that opens is the CSS Tab and displays a large empty text box where CSS code can be added.
For those of you that know CSS coding and just want to enter your own code, you can do so by entering it here directly. Just click the Save Changes button at the top, and your code will be added!
But, if you’re not a coder, or just want a quick, surefire way of adding code correctly, click the CSS Builder Button at the top.
The Dynamik Custom CSS Builder
Clicking the Elements Tab then lets you select a particular element for styling (the various elements are grouped together to make finding them easier).
Selecting and Adding an Element for Coding
Here we’ve chosen the Sidebar Widget element from the ‘Body’ group of elements and clicked the arrow button which inserts the correct element name and CSS brackets into the CSS Builder on the right.
Then we just use the other Tabs (for the background, borders, fonts etc) across the top to select what code we want in order to style the element as we wish.
Styling the Element
Here we’ve used options in the ‘Borders’ and ‘Shadows’ Tabs to add a 1 pixel wide red border with box shadow and rounded corners to the sidebar widget element.
When we click the ‘Insert’ buttons for each component we want to add, the relevant CSS code for that effect gets added.
When you’re finished building up the code like this, just click the button at the bottom to insert all the code into the Custom CSS Editor text box below it.
Then remember to click the Save Changes button!
And that’s it!
We’ve now applied custom CSS code to style the Sidebar Widgets like this:
Sidebar Widgets with Custom CSS Applied
No actual coding required! How easy was that?
And you can do this kind of thing with almost any element of your site – Header, Navbars, Widgets Areas, Footer, etc etc…
I hope that provides an indication of just how easy it is to use the powerful functionality that Dynamik Website Builder provides to implement style and design options throughout a site – easily!
Have fun
David
p.s. Just for the sake of completeness, in the example above, you’d also have to select the Sidebar h4 element (the Sidebar Heading) and give that rounded corners to match the border.
Like this:
#sidebar h4 {
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
And again, that’s just done with the CSS Builder again in exactly the same way.
David Pritchard is the author of the Dynamik Theme Cheat Sheet – the 250+ page guide that helps users make the most of the Dynamik Website Builder. Licenced Dynamik Theme users can get their FREE copy in the downloads section of the Dynamik Theme forum. David also has a site with guides to using WordPress, SEO, internet marketing techniques and other topics at http://www.FastStepInternetMarketing.com
Follow & Share:
