Customizing Xidipity

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.

Xidipity Blog Post titled "Customizing Xidipity" Image 010

½×

When it comes to customization, Xidipity sits somewhere between use it out of the box and roll up your sleeves. If your desire is to customize the theme, this can be accomplished in the following three ways.

 

options

 

1
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.

 

2
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.

 

3
blog-var.css

 

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

 

General

Variable Description
File blog-var.css
Build 90131.1
Programmer John Baer
Purpose Configuration file for Xidipity WordPress Theme
License GNU General Public License v2 or later
Sources Google Material Design
Comments Xidipity variables which includes fonts, foreground colors, & background colors.
Gist Tags System: blog-var / css

 

Color Scheme

Variable Description
base gray
primary deep orange
secondary deep purple

 

Google Fonts

Font Family Font / Weights / Styles
sans serif Roboto / 100,100i,300,300i,400,400i,500,500i,700,700i,900,900i
condensed Roboto condensed / 300,300i,400,400i,700,700i
monospaced Roboto mono / 100,100i,300,300i,400,400i,500,500i,700,700i
serif Roboto slab / 100,300,400,700
cursive Kalam / 300,400,700
Branding Kaushan / 400

 

Palette

Foreground
Variable Hex Code
black & white
–fg-blk #000000
–fg-wht #ffffff
base – grey
–fg-bas-900 #212121
–fg-bas-800 #424242
–fg-bas-700 #616161
–fg-bas-600 #757575
–fg-bas-500 #9e9e9e
–fg-bas-400 #bdbdbd
–fg-bas-300 #e0e0e0
–fg-bas-200 #eeeeee
–fg-bas-100 #f5f5f5
–fg-bas-050 #fafafa
primary – deep orange
–fg-pri-900 #bf360c
–fg-pri-800 #d84315
–fg-pri-700 #e64a19
–fg-pri-600 #f4511e
–fg-pri-500 #ff5722
–fg-pri-400 #ff7043
–fg-pri-300 #ff8a65
–fg-pri-200 #ffab91
–fg-pri-100 #ffccbc
–fg-pri-050 #fbe9e7
secondary – deep purple
–fg-sec-900 #311b92
–fg-sec-800 #4527a0
–fg-sec-700 #512da8
–fg-sec-600 #5e35b1
–fg-sec-500 #673ab7
–fg-sec-400 #7e57c2
–fg-sec-300 #9575cd
–fg-sec-200 #b39ddb
–fg-sec-100 #d1c4e9
–fg-sec-050 #ede7f6
Background
Variable Hex Code
black & white
–bg-blk #000000
–bg-wht #ffffff
base – grey
–bg-bas-900 #212121
–bg-bas-800 #424242
–bg-bas-700 #616161
–bg-bas-600 #757575
–bg-bas-500 #9e9e9e
–bg-bas-400 #bdbdbd
–bg-bas-300 #e0e0e0
–bg-bas-200 #eeeeee
–bg-bas-100 #f5f5f5
–bg-bas-050 #fafafa
primary – deep orange
–bg-pri-900 #bf360c
–bg-pri-800 #d84315
–bg-pri-700 #e64a19
–bg-pri-600 #f4511e
–bg-pri-500 #ff5722
–bg-pri-400 #ff7043
–bg-pri-300 #ff8a65
–bg-pri-200 #ffab91
–bg-pri-100 #ffccbc
–bg-pri-050 #fbe9e7
secondary – deep purple
–bg-sec-900 #311b92
–bg-sec-800 #4527a0
–bg-sec-700 #512da8
–bg-sec-600 #5e35b1
–bg-sec-500 #673ab7
–bg-sec-400 #7e57c2
–bg-sec-300 #9575cd
–bg-sec-200 #b39ddb
–bg-sec-100 #d1c4e9
–bg-sec-050 #ede7f6

 

Content Headers

Variable Value / Description
h1
–h1-color #212121 / font color
–h1-font ‘Roboto’, sans-serif / font family
–h1-size 2.125em / font size
–h1-style normal / font style
–h1-weight 400 / font weight
h2
–h2-color #212121 / font color
–h2-font ‘Roboto’, sans-serif / font family
–h2-size 1.875em / font size
–h2-style normal / font style
–h2-weight 400 / font weight
h3
–h3-color #212121 / font color
–h3-font ‘Roboto’, sans-serif / font family
–h3-size 1.5em / font size
–h3-style normal / font style
–h3-weight 400 / font weight
h4
–h4-color #212121 / font color
–h4-font ‘Roboto’, sans-serif / font family
–h4-size 1.25em / font size
–h4-style normal / font style
–h4-weight 400 / font weight
h5
–h5-color #bf360c / font color
–h5-font ‘Roboto’, sans-serif / font family
–h5-size 1.125em / font size
–h5-style normal / font style
–h5-weight 400 / font weight
h6
–h6-color #bf360c / font color
–h6-font ‘Roboto’, sans-serif / font family
–h6-size 1.125em / font size
–h6-style italic / font style
–h6-weight 400 / font weight

 

Page Banners

Variable Value / Description
–sys-pg-banner-tl-border-color #eeeeee / ┏ / corner border
–sys-pg-banner-br-border-color #e0e0e0 / ┛ / corner border
–sys-pg-banner-featured-title-fg-color #212121 / featured / title / color
–sys-pg-banner-featured-descrip-fg-color #424242 / featured / description / color
–sys-pg-banner-featured-bg-color #ffffff / featured / background color
–sys-pg-banner-featured-display block / display featured as (block=display / none = hide)
–sys-pg-banner-featured-title “Sticky Posts” (content)
–sys-pg-banner-featured-descrip “Posts marked as sticky so they display first.” (content)
–sys-pg-banner-recent-title-fg-color #212121 / recent / title / color
–sys-pg-banner-recent-descrip-fg-color #424242 / featured / description / color
–sys-pg-banner-recent-bg-color #ffffff / recent / background color
–sys-pg-banner-recent-title “Recent Posts”
–sys-pg-banner-recent-descrip “📝 BLog posts ordered by date.”

 

Xidipity Header

Variable Value / Description
–sys-hdr-bg-color #fafafa / header background color
–sys-hdr-align center / header horizontal alignment
title
–title-lnk-pri-color #5e35b1 / font link color
–title-lnk-sec-color #f4511e / font link color hover
–title-font-family ‘Kaushan Script’, cursive / font family (branding)
–title-font-size 3em / font size
–title-font-spacing 0.0625em / font letter spacing
–title-font-style normal / font style
–title-font-weight 400 / font weight
description
–descr-font-color #212121 / font color
–descr-font-family ‘Roboto’, sans-serif / font family
–descr-font-size 1em / font size
–descr-font-spacing 0.5em / font letter spacing
–descr-font-style normal / font style
–descr-font-weight 300 / font weight

 

Xidipity Footer

Variable Value / Description
–sys-ft-bg-color #fafafa / footer background color
–sys-ft-align center / footer horizontal alignment
copyright notice
–copyright-line-height inherit / font line height
–copyright-font-color #455a64 / font color
–copyright-lnk-pri-color #455a64 / font link color
–copyright-lnk-sec-color #f4511e / font hover link color
–copyright-lnk-sec-bg-color transparent / font hover link background color
–copyright-font-family ‘Roboto’, sans-serif / font family
–copyright-font-size 0.75em / font size
–copyright-font-spacing normal / font letter spacing
–copyright-font-style normal / font style
–copyright-font-weight 300 / font weight
theme architect
–designer-line-height inherit / font line height
–designer-font-color #455a64 / font color
–designer-lnk-pri-color #455a64 / font link color
–designer-lnk-sec-color #f4511e / font hover link color
–designer-font-family ‘Roboto’, sans-serif / font family
–designer-font-size 0.75em / font size
–designer-font-spacing normal / font letter spacing
–designer-font-style normal / font style
–designer-font-weight 300 / font weight

 

Xidipity Body

Variable Value / Description
–sys-bg-color #fafafa / body background color
–sys-content-bg-color #ffffff / page content background color
–sys-content-tl-border-color #eeeeee / top & left content border
–sys-content-br-border-color #e0e0e0 / bottom & right content border
–sys-line-height 1.4 / line height
–sys-font-family ‘Roboto’, sans-serif / font family
–sys-font-color #000000 / font color
–sys-font-size 16px / font size (in pixels)
–sys-font-weight 300 / font weight
–sys-font-spacing normal / font letter spacing
–sys-lnk-pri-color #673ab7 / font link color
–sys-lnk-sec-color #f4511e / font link hover color
–sys-lnk-sec-bg-color transparent / font link hover background color
–sys-lnk-weight 400 / font link weight

Xidipity Fonts

Variable Value / Description
–font-sans ‘Roboto’, sans-serif / sans serif font family
–font-condensed ‘Roboto Condensed’, sans-serif / condensed font family
–font-mono ‘Roboto Mono’, monospace / monospace font family
–font-serif ‘Roboto Slab’, serif / serif font family
–font-cursive ‘Kalam’, cursive / cursive font family

 

Primary Menu

Variable Value / Description
–mnu-pri-fg-color #424242 / toolbar font color
–mnu-pri-bg-color #fafafa / toolbar background color
–mnu-pri-fg-color-hov #000000 / toolbar font hover color
–mnu-pri-bg-color-hov #ede7f6 / toolbar background hover color
–mnu-pri-fg-weight-hov 400 / toolbar font hover weight
–mnu-sec-fg-color #424242 / dropdown font color
–mnu-sec-bg-color #e0e0e0 / dropdown background color
–mnu-sec-fg-color-hov #000000 / dropdown font hover color
–mnu-sec-bg-color-hov #d1c4e9 / dropdown background hover color
–mnu-sec-fg-weight-hov 400 / dropdown font hover weight

 

View file

 

Don’t be alarmed by the detail. The design concept is really simple. The color palette consists of a base, primary, and secondary colors. Each color has ten tints/shades. The base is used for text and background tints. The primary and secondary for highlights and accents. View the color palette for other suggested color combinations and the blog post “The Rainbow of Xidipity Colors” for more details on how to apply them.

 

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 desire becomes to change fonts. The con is the site will take a small hit in performance.

 

notes

 

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 edited using the WordPress code editor which is available under the “Appearance > Themes” admin menu selection and is located in the “assets > css” folder. For your awareness the editor will complain of errors due to the declaration of the variables. Check the box to ignore this warning.

 

Not every element is styled with a css variable which limits customization. For example, it may be challenging to customize Xidipity to a predominantly dark style.

 

 

 

avatar
About: Admin

My name is John Baer and I am the author of the Xidipity theme. My goal with Xidipity is to create a theme which is flexible and easy to use. This is accomplished by the application of templates and enhancing the classic editor. Xidipity leverages the latest web technologies to remain snappy.

 

 

Got Something To Say?

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