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.

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.

 

 

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.

½×

/*
Build         - 90122.1
File          - blog-var.css
Programmer    - John Baer
Purpose       - Support file for Xidipity WordPress Theme
License       - GNU General Public License v2 or later (http://www.gnu.org/licenses/gpl-2.0.html)
Sources       - Google Material Design (https://material.io/)
Comments      - Xidipity variables which includes fonts, foreground colors, & background colors.
Tags          - System: configuration / css

Color Scheme    https://xidipity.com/authoring-tools/style/color-palette/
         base - gray
      primary - deep orange
    secondary - deep purple
    
Google Fonts    https://fonts.google.com/
   sans serif - Roboto
    condensed - Roboto condensed
   monospaced - Roboto mono
        serif - Roboto slab
      cursive - Kalam

-----------------------------------------------------------------------------
DOCUMENTATION
-----------------------------------------------------------------------------

google font imports

Roboto
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
Roboto Condensed
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i');
Roboto Mono
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i');
Roboto Slab
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700');
Kalam
@import url('https://fonts.googleapis.com/css?family=Kalam:300,400,700');
Kaushan (Site Title)
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');

foreground
  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
  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;

headers
  --h1-color:#000000;                                 > 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-color:#000000;                                 > 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-color:#000000;                                 > 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-color:#000000;                                 > 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-color:#000000;                                 > 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-color:#000000;                                 > 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

site-header
  --sys-hdr-bg-color:#fafafa;                         > header background color
  --sys-hdr-align:center;                             > header alignment
  site-title
  --title-color:#5e35b1;                              > font color
  --title-font-family:'Kaushan Script', cursive;      > font family
  --title-font-size:3em;                              > font size
  --title-font-spacing:0.0625em;                      > font character spacing
  --title-font-style:normal;                          > font style
  --title-font-weight:400;                            > font weight

  site-description
  --descr-align:center;                               > font alignment
  --descr-color:#212121;                              > font color
  --descr-font-family:'Roboto', sans-serif;           > font family
  --descr-font-size:1em;                              > font size
  --descr-font-spacing:0.5em;                         > font character spacing
  --descr-font-style:normal;                          > font style
  --descr-font-weight:300;                            > font weight

site-footer
  --sys-ft-bg-color:#fafafa;                          > footer background color
  --sys-ft-align:center;                              > font horizontal alignment
  site-copyright
  --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 character spacing
  --copyright-font-style:normal;                      > font style
  --copyright-font-weight:300;                        > font weight

  site-designer
  --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 character spacing
  --designer-font-style:normal;                       > font style
  --designer-font-weight:300;                         > font weight

site
  --sys-bg-color:#fafafa;                             > body background
  --sys-line-height:1.4;                              > content line height
  --sys-font-family:'Roboto', sans-serif;             > default 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 character 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

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

dropdown menu
  --mnu-fg-color:#616161;                             > main toolbar text color
  --mnu-bg-color:#f5f5f5;                             > main toolbar background color
  --mnu-fg-hover-std-color:#000000;                   > main toolbar text hover color
  --mnu-bg-hover-std-color:#eeeeee;                   > main toolbar background hover color
  --mnu-fg-alt-color:#616161;                         > dropdown toolbar text color
  --mnu-fg-hover-alt-color:#000000;                   > dropdown toolbar hover text color
  --mnu-bg-alt-color:#eeeeee;                         > dropdown toolbar background color
  --mnu-bg-hover-alt-color:#f5f5f5;                   > dropdown toolbar background hover color

print
  @page
  --prnt-page:letter;

  fonts
  --font-sans: sans-serif;
  --font-condensed: sans-serif;
  --font-mono: monospace;
  --font-serif: serif;
  --font-cursive: 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. 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 theme.

 

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.

 

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 edited 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 *