Design Options

The new Responsive Framework features a Customizer. This is where you manage your colors, fonts, layout, footer content, sidebar and widgets.

Concepts to understand:

Customizer – all settings can be accessed from the WP dashboard through Appearance > Customize.

Custom CSS – write your own custom CSS declarations. The custom CSS file is loaded last, so you can not only create new styles but over-ride existing styles in your theme.

Media Library – images uploaded to your site are stored in your media library. You can resize, edit, and crop your images for use anywhere within your site.

NOTE: Custom CSS is a powerful tool and is intended for individuals trained in CSS. IS&T does not offer CSS training and cannot support custom CSS styles on individual websites.

How to use:

Customizer

  • From the WP dashboard go to Appearance > Customize.
  • Toggle items in the sidebar to edit various properties (layout options, footer, etc.)
  • Some items (like widgets) open a secondary sidebar (see indicator arrow >)

Custom CSS

  • From the WP dashboard go to Appearance > Custom CSS.
  • Edit CSS directly in the editor, which features CSS syntax coloring and line numbers
  • The editor tracks revision history and supports rollbacks.

Image Editing

  • All editing functions found in Media > Library > click image thumbnail > Edit Image
  • Rotate – edit the orientation of an image
  • Flip – flip the image horizontally or vertically
  • Crop – edit out unwanted areas of the image
  • Scale Image – resize image by specific pixels
  • Image Crop – crop image by specific pixels and aspect ration
  • Settings – apply changes to all image sizes, just thumbnail, or all sizes except thumbnail

Review:

Walk through the Customizer functions. Visit the Custom CSS page and review the custom style created for the “Also See” text widget.

Hands-On:

  • Experiment with the Customizer for colors, fonts, layouts
  • Resize/crop and edit images

Share this: