Shiba

Adventures in WordPress

  • — Home —
  • Dog
  • Art
  • Contact
  • WordPress Articles
    • WP Plugins
    • WP Programming
    • WP Admin Panels
    • WP Theme Design
    • WP How-To
    • WP Theme Images
You are here: Home / Genesis Skins / Genesis Skins 1.5

Genesis Skins 1.5

Tweet

by ShibaShake Leave a Comment

Genesis skins allows you to flexibly create and assign skins to different posts, pages, or other custom post types. We can assign skins to an individual post or to groups of posts through the use of categories and tags.

Skins are created through a graphical UI based on the WordPress theme previewer interface, therefore no special CSS, HTML, or PHP editing is required.

[Full description of the Genesis Skins theme]

Note: Genesis Skins is built on top of the Genesis Framework. It will only work if the Genesis parent theme is installed.

Main updates for this release –

1. Structured Markup Using HTML5

The most exciting feature is in integrating the HTML5 markup language enabled through Genesis 2.0. This allows search engines to better understand and parse our blog pages. For example, you can view the structured data added to this page by using the Google Structured Data Testing Tool.

Screenshot of example structured HTML5 data from the Google Structured Data Testing Tool.
Some example structured data from this page shown in the Google Structured Data Testing Tool.

2. Added Menubar Options

Choose between three different menubar styles –

  • Dark – This is the default menubar style of Genesis 2.0.
  • Light – A light gray menubar style.
  • Background – Menubar color changes based on the chosen skin color of our blog.

In addition, we also added a collapsible menubar option for mobile devices. This is a blog-wide option that can be set in the Genesis Skins >> Settings screen. The collapsible option allows us to save mobile viewing space by collapsing all menubar entries into a single button. Clicking on the button toggles opening and closing of the menubar.

Screen shot of how menubar collapses for small devices.
Save mobile viewing space by collapsing all menubar entries into a single button.
Screen-shot of the menubar options when opened or un-collapsed.
Clicking on the black menubar button opens up the menu options.

This function was coded using the styles and procedures outlined here.

3. Mobile Responsive Poll Daddy Objects

Added some styles to make standard Poll Daddy objects mobile responsive. You can test out some example poll objects here.

Here is a tutorial on how to make Poll Daddy objects mobile responsive in your own theme.

Example mobile responsive Poll Daddy object.
Poll Daddy object when shown on a larger screen.
Example mobile responsive Poll Daddy object.
Mobile responsive Poll Daddy object when shown on a smaller screen.

4. Added Open Border Option

The default style for Genesis 2.0 is more open and flowing, with no page borders. The body of the blog page is still fixed width, but the header and footer extends to fill the entire width of the browser. For example, this page features a skin with open borders, while other pages on this blog have a closed border design.

Page border options can be assigned on a skin by skin basis.

Screen-shot of blog post with full page border.

Screen-shot of blog post with full page border.

Screen-shot of blog post with no page border (flowing design).

Screen-shot of blog post with no page border (flowing design).

5. Uses New Genesis 2.0 Style Sheet

The new Genesis 2.0 style sheet is much more compact and much cleaner. It took some work to properly integrate it into Genesis Skins, but I really like the results.

Note however, that there will be some style changes from previous versions. Probably the most noticeable one has to do with link styles. All links now have a light bottom border, which I think is an enhancement and makes them more easily identifiable.

As before, I have integrated widget, button, and menubar styles from Genesis 1.8. We can easily switch between Genesis 1.8 and Genesis 2.0 styles by going into Genesis Skins >> Settings.

This page uses the simpler Genesis 2.0 widgets, buttons, and menubar styles. For an example of Genesis 1.8 styles, visit this page.

Example Buttons: 1 2 3

How to Get Genesis Skins.

Related Articles

Genesis Skins - Dynamic WordPress Theme

Simple and unprecedented customization of your blog posts. Easily assign header and footer images, change blog colors, adjust title position, header height, footer height and more, all from the WordPress Theme Customizer interface. Save these settings into a skin object, and assign skins to any set of posts and pages. Built on top of the Genesis Framework.

Shiba Skins WordPress Theme

Shiba Skins allows you to assign images, colors, and more on a page by page basis. Theme customization options are saved into a skin, which we can then be applied to a specific post or to a group of post objects. Shiba Skins contains similar skinning functionality as Genesis Skins, but is built on top of the Twenty Twelve framework, which is free and developed by WordPress. Since it is based on Twenty Twelve, it is mobile responsive and supports all the other Twenty Twelve functionality. [Most [...]

How to Make Poll Daddy Objects Mobile Responsive

Currently, the standard Poll Daddy objects that I use are fixed width and not mobile responsive. Here are some simple CSS styles that I use to make Poll Daddy objects responsive to small devices. 1. Scale poll object to fit the screen. The first step is to add some styles to scale my Poll Daddy objects so that they expand to fit the screen. I do this when the browser width hits 400 pixels. Note that pds-box and pds-input-label have fixed widths assigned by default, so we need to override [...]

Leave a Reply Cancel reply

Your email address will not be published.

Recent Posts

  • Screen-shot of mobile responsive Poll Daddy object, where text floats properly to the right of radio buttons.How to Make Poll Daddy Objects Mobile Responsive
  • Screen-shot of blog post with no page border (flowing design).Genesis Skins 1.5
  • Screen-shot of the media manager Create-Gallery screen, while doing a post search.Shiba Media Library 3.7
  • Screenshot of the Edit Gallery screen after we hit the Create Gallery button.How to Expand the WordPress Media Manager Interface
  • Blonde girl looking through and holding a circular picture frame.Shiba Gallery 4.3
  • Close-up of beautiful blonde holding a square picture frame.Google Authorship - Good or Bad for Search Traffic?
  • Shiba Widgets 2.0
  • Media Temple screenshot of editing my sub-domain DNS entry.Using CDN Cnames with w3tc and MultiSite
  • Shiba Skins WordPress ThemeShiba Skins WordPress Theme
  • How to add the Media Manager Menu to the Theme Preview InterfaceHow to Add the Media Manager Menu to the Theme Preview Interface

Recent Comments

  • WordPress Search Widget – How to Style It (55)
    • TelFiRE
      - How do you style the "X" that shows up when you start typing?
  • Update custom inputs with the proper data using Javascript.Expand the WordPress Quick Edit Menu (56)
    • Francine Carrel
      - This is a very long time away from your original comment, but did you ever work it out? I am stuck on the exact same thing ...
  • WordPress Excerpt – How to Style It (36)
    • James
      - Great post. I really need some help. I have set border lines around my excerpts on my blog page/post page. The problem is ...
  • Add Custom Taxonomy Tags to Your WordPress Permalinks (123)
    • Darshan Saroya
      - Update permalinks. Go to settings > permalink and just save it.
    • Darshan Saroya
      - I want to access two different types of taxonomies like city and room, how can I access it via wp permalink?
  • How to Selectively Load Plugins for Specific Pages (6)
    • cla
      - Perfect! But at first I was misled, I thought the path / wordpress-theme / was an your alias of / theme .. and nothing happened.. ...
    • Aeros
      - Hi, I have tried your way. My problem is i'm using boilerplate to most of my plugins. When i tried to include the plugin ...
  • Write a Plugin for WordPress Multi-Site (44)
    • An Quach
      - I always use single site because it's easy for me to managed. When I need another worpdress on subdomain or subfolder, I ...
  • Screen-shot of mobile responsive Poll Daddy object, where text floats properly to the right of radio buttons.How to Make Poll Daddy Objects Mobile Responsive (3)
    • Nick
      - Thanks for this, took a while for me to find your post but it's the only answer online!
  • WordPress Theme Customizer Javascript Interface (21)
    • MailOptin Plugin
      - Excellent overview of the WordPress JS customizer API.Learned a ton from this post.

Copyright © 2019 · Genesis Skins by ShibaShake · Terms of Service · Privacy Policy ·