Customizing Xidipity Tutorial

On the web, “function” is much more important than “form” because good functionality leads to good content design. However, no matter how good the design is one shoe never fits all. Xidipity supports standard and enhanced customizations which support good web design and personal choices.

Customizing Xidipity Tutorial Image #010

When it comes to customization, Xidipity sits somewhere between take it or leave it and break out the coding books. If your desire is to customize the theme, this can be accomplished in the following three ways.

 


templates


 

Fundamentally WordPress creates HTML pages to display your content. In the editing process Xidipity embellishes this HTML code through the application of code snippets which are referred to as templates. The goal of this method is to provide flexibility without the need to write code.

 


admin Menu


 

After installing WordPress, the menu item needing your attention first is “Settings“. This menu contains the following submenus:

 

  • General
    • Site Title
    • Tagline
    • WordPress Address (URL)
    • Site Address (URL)
    • Email Address
    • Membership
    • New User Default Role
    • Site Language
    • Timezone
    • Date Format
    • Time Format
    • Week Starts On
  • Writing
    • Default Post Category
    • Default Post Format
    • Classic editor settings
    • Post via email
      • Mail Server
      • Login Name
      • Password
      • Default Mail Category
    • Update Services
  • Reading
    • Your homepage displays
    • Blog pages show at most
    • Syndication feeds show the most recent
    • For each article in a feed, show
    • Search Engine Visibility
  • Discussion
    • Default article settings
    • Other comment settings
    • Email me whenever
    • Before a comment appears
    • Comment Moderation
    • Comment Blacklist
    • Avatars
      • Avatar Display
      • Maximum Rating
      • Default Avatar
  • Media
    • Image sizes
      • Thumbnail size
      • Medium size
      • Large size
    • Uploading Files
      • Organize by month/year
  • Permalinks
    • Plain
    • Day and name
    • Month and name
    • Numeric
    • Post name
    • Custom Structure (/%category%/%postname%/)
  • Privacy
    • Select a Privacy Policy page

 

Some plugins such as “Akismet Anti-Spam” may also include a configuration options. I am not going to explore these items as there are many sources of information to guide you through configuring WordPress including the official WordPress Quick Start Guide.

 

Also included in the Admin menu under Appearance is the  Customize selection. Choices in this menu option include the following.

 

Theme Options
  • General Options
    • Main Sidebar Position
      • Positioned left (disabled)
      • Positioned right
    • Footer Options
      • Copyright
    • Theme Support
      • Demo Site
      • Online support
    • Enjoying the Theme
      • Review on WordPress.org
  • Site Identity
    • Logo
    • Site Title
    • TagLine
    • Site Icon
  • Header Image
  • Background Image
  • Menus
  • Widgets
  • Homepage Settings
  • Additional CSS

 

See the recommended image sizes for more information on the Logo, Header, and Site icon  Images.

 


blog-var.css


 

The blog-var.css file contains the css variables used to style your site. It is organized as follows.

 

Colors
  • foreground colors
    • black & white
      • –fg-blk (black)     
      • –fg-blk (white)     
    • base
      • –fg-bas-900     
      • –fg-bas-800     
      • –fg-bas-700     
      • –fg-bas-600     
      • –fg-bas-500     
      • –fg-bas-400     
      • –fg-bas-300     
      • –fg-bas-200     
      • –fg-bas-100     
      • –fg-bas-050     
    • primary – deep orange
      • –fg-pri-900     
      • –fg-pri-800     
      • –fg-pri-700     
      • –fg-pri-600     
      • –fg-pri-500     
      • –fg-pri-400     
      • –fg-pri-300     
      • –fg-pri-200     
      • –fg-pri-100     
      • –fg-pri-050     
    • secondary – deep purple
      • –fg-sec-900     
      • –fg-sec-800     
      • –fg-sec-700     
      • –fg-sec-600     
      • –fg-sec-500     
      • –fg-sec-400     
      • –fg-sec-300     
      • –fg-sec-200     
      • –fg-sec-100     
      • –fg-sec-050     
  • background colors
    • black & white
      • –bg-blk (black)     
      • –bg-blk (white)     
    • base
      • –bg-bas-900     
      • –bg-bas-800     
      • –bg-bas-700     
      • –bg-bas-600     
      • –bg-bas-500     
      • –bg-bas-400     
      • –bg-bas-300     
      • –bg-bas-200     
      • –bg-bas-100     
      • –bg-bas-050     
    • primary – deep orange
      • –bg-pri-900     
      • –bg-pri-800     
      • –bg-pri-700     
      • –bg-pri-600     
      • –bg-pri-500     
      • –bg-pri-400     
      • –bg-pri-300     
      • –bg-pri-200     
      • –bg-pri-100     
      • –bg-pri-050     
    • secondary – deep purple
      • –bg-sec-900     
      • –bg-sec-800     
      • –bg-sec-700     
      • –bg-sec-600     
      • –bg-sec-500     
      • –bg-sec-400     
      • –bg-sec-300     
      • –bg-sec-200     
      • –bg-sec-100     
      • –bg-sec-050     
  • Content Headers
    • h1
      • –h1-color: fg-blk     
      • –h1-font: ‘Roboto’, sans-serif
      • –h1-size: 2.125em
      • –h1-style: normal
      • –h1-wgt: 400
    • h2
      • –h2-color: fg-blk     
      • –h1-font: ‘Roboto’, sans-serif
      • –h1-size: 1.875em
      • –h1-style: normal
      • –h1-wgt: 400
    • h3
      • –h3-color: fg-blk     
      • –h1-font: ‘Roboto’, sans-serif
      • –h1-size: 1.5em
      • –h1-style: normal
      • –h1-wgt: 400
    • h4
      • –h4-color: fg-blk     
      • –h1-font: ‘Roboto’, sans-serif
      • –h1-size: 1.25em
      • –h1-style: normal
      • –h1-wgt: 400
    • h5
      • –h5-color: fg-blk     
      • –h1-font: ‘Roboto’, sans-serif
      • –h1-size: 1.125em
      • –h1-style: normal
      • –h1-wgt: 400
    • h6
      • –h6-color: fg-blk     
      • –h1-font: ‘Roboto’, sans-serif
      • –h1-size: 1.125em
      • –h1-style: italic
      • –h1-wgt: 400
  • Site Title
    • –title-align: center
    • –title-color: fg-sec-600     
    • –title-font-fam: ‘Kaushan Script’, cursive
    • –title-font-size: 3.1875em
    • –title-font-spacing: 0.0625em
    • –title-font-style: normal
    • –title-font-wgt: 400
  • Site Description
    • –descr-color: fg-bas-900     
    • –descr-font-fam: ‘Roboto’, sans-serif
    • –descr-font-size: 1em
    • –descr-font-spacing: 0.5em
    • –descr-font-style: normal
    • –descr-font-wgt: 300
  • System Defaults
    • –sys-bg-color: bg-bas-050     
      body background color
    • –sys-hdr-bg-color: bg-bas-050     
      header background color
    • –sys-ft-bg-color: bg-bas-050     
      footer background color
    • –sys-line-hght: 1.4
      content line height
    • –sys-font-color: fg-blk     
      text color
    • –sys-font-size:16px
      font size (in pixels)
    • –sys-font-wgt:300
      text weight
    • –sys-lnk-pri-color: fg-sec-500     
      link color
    • –sys-lnk-sec-color: fg-pri-500     
      link hover color
    • –sys-lnk-wgt:400
      link weight
  • Default Fonts
    • –sys-fnt-sans: ‘Roboto’, sans-serif
    • –sys-fnt-condensed: ‘Roboto Condensed’, sans-serif
    • –sys-fnt-mono: ‘Roboto Mono’, monospace
    • –sys-fnt-serif: ‘Roboto Slab’, serif
    • –sys-fnt-cursive: ‘Kalam’, cursive

 

Don’t be alarmed by the detail. The design concept is really simple. The color palette consists of a base, primary, and secondary colors. The base is used for text and tints. The primary and secondary for highlights and accents. View the Xidipity palette to view alternate color combinations and the blog post “The Rainbow of Xidipity Colors” for more details on the current colors.

 

Fonts

All fonts with the exception of “font awesome” are imported here as opposed to linking them in the functions.php file.  The pro to this solution is it provides flexibility in the event the fonts are changed. The con is the site will take a small hit in performance.

 

Execute Caution When Editing

It is very important to remember in the event the Xidipity theme is updated, any changes to blog-var will be lost.

 

To mitigate this risk keep a local copy of this file with any updates. I also suggest you update this copy before changes are made to serve as a fall back in the event things don’t go as planned.

 

The file may be editing using the WordPress code editor which is available under the “Appearance” admin menu selection. The file is located under assets, css.

 

Other editing choices include the sandbox editor or a third party editor.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *