Simone - a free accessible responsive WordPress theme

Simone – Responsive, Accessible, Content Focussed, Free WordPress Theme

Simone is a new free WordPress theme designed and developed by lynda.com staff author Morten Rand-Hendriksen.

Simone is available from the WordPress Theme Directory and from the theme installer in your WordPress site. You can download the most current version directly from GitHub by following this link.

The theme is based on _s (Underscores) and features future-forward web design and development standards. All the buzz-words are covered: Responsive web design, accessibility support, internationalization, RTL language support, screen-focussed typography and font-scaling, HTML5 markup, high-resolution support through CSS and icon font graphics for that crisp and clear “Retina-ready” look, the list goes on.

The primary focus when designing and building Simone was putting the content front and center. This is achieved through the use of large easily legible fonts that scale based on screen size and by placing the content in the middle of the screen whenever possible. Wider screen space is utilized to its full extent by centering the featured image and main content, breaking post meta out of the content, sticking the right-hand sidebar to the right edge of the screen with the remaining content centered, and allowing blockquotes and images aligned left and right to break out of the main stream and get a pull-quote effect.

Features

Language Support

Simone is fully translatable for LTR and RTL languages through standard WordPress internationalization (i18n). Out of the box the theme ships with English as the default language and translation support for the following additional languages:

  • Catalan (CA via Faleg)
  • Chinese (simplified) (zh_CN via Jerry Wang)
  • Dutch (nl_NL via Richard van Naamen)
  • Finnish (fi via Sami Keijonen)
  • French (fr_FR via Christine Rondeau)
  • German (de_DE via Caspar Hübinger)
  • Hungarian (hu_HU via Beata Kozma)
  • Italian (it_IT via Giorgio Riccardi)
  • Norwegian Bokmål (nb_NO)
  • Persian / Farsi (fa_IR via Emad Navy)
  • Portugese (pt_PT via João Gomes)
  • Russian (ru_RU via Vladimir Samoletov)
  • Spanish (es_ES via Juan Pablo)
  • Swedish (se_SE via Ted Derneby)

More translations are forthcoming in regular updates. If you want to contribute your own language translations to Simone feel free to submit a pull request to the Github repo.

Customizer options

Extended options available from the Customizer:

  • Background color and background image on index and archive pages (new in version 2.0)
  • Display excerpts or full content on index and archive pages (new in version 2.0)
  • Sidebar position right (default) or left (new in version 2.0)
  • Header background color
  • Header text color
  • Link color (changes link colors throughout the site including site title. Also sets color of .border-custom class.)
  • Optional Header image of 1280px x 300px can be displayed in combination with title and tagline or on its own.

Optional Social Media menu

The header features an optional social media menu which is displayed on the far right of the menu area. Social media icons from Font Awesome are automatically generated based on the URLs of different social media services so a link menu item with a Twitter URL will automatically show the Twitter icon etc. To activate the menu simply create a new menu and assign it to the Social Menu template location.

The social menu is inspired by this article by Justin Tadlock.

Social networks currently supported:

  • Dribble
  • Facebook
  • Flickr
  • Foursquare
  • Github
  • Google+
  • Instagram
  • jsFiddle
  • LinkedIn
  • Pinterest
  • Reddit
  • Soundcloud
  • Stack Overflow
  • Tumblr
  • Twitter
  • Vimeo
  • Vine
  • Yelp
  • YouTube
  • WordPress.com

When a network is not supported an external link icon is displayed.

Widgetized areas

By default Simone has a one-column centered layout. When widgets are assigned to the Sidebar the Simone will run with a two-column layout. The default page template has the sidebar applied. An optional no-sidebar template is also provided.

The default position of the sidebar is hard right meaning it will stick to the right side of the screen. The position can be changed to hard left in the Customizer.

The Recent Posts, Recent Comments, and Archive widgets have icon font styling applied to clearly indicate to the visitor what type of content is presented. Custom styling is also applied to the Custom Menu and RSS Feed widgets.

The footer widgetized area is displayed in a responsive Masonry tiled layout when the document width allows it.

Simone has two widgetized areas available:

  • Optional sidebar, max content width 300px (set position in Customizer).
  • Footer, max content width 320px.

Editor styles

Simone has built in editor styles that ensure the appearance of your content in the post and page editors is as close to the appearance of the content on the live site as possible.

Featured Images

Posts and pages can have Featured Images. On single posts and pages max Featured Image (Post Thumbnail) size is 1060px x 650px. On index pages the featured image is displayed in 780px x 250px hard crop.

Pull quote blockquotes

When using blockquotes the user can opt to add the .alignleft or .alignright classes to the blockquote tag. The blockquote will turn into a left- or right-aligned pull quote when the document width allows for it. On wide screens the quote will be pulled out of the frame of the content to float to the left or right.

Blockquote citations

Blockquotes support the <cite> tag which displays in a smaller sans-serif font aligned right and below the quote.

Post Formats

Standard and Aside post formats are supported. Asides are displayed without headings or meta content in index pages. All other displays are identical with Standard posts.

Proper paging, single post, and paged comments navigation

On index pages proper paged navigation is displayed on the bottom of each index clearly indicating where the visitor is in relation to all published material.

On single posts navigation links with the titles of the previous and next posts are displayed.

In the event of paged comments similar comment navigation is provided at the bottom of the comments section.

Helpful 404 and no search results pages

When a visitor lands on the 404 (nothing found) page or makes a search with no results she is presented with a helpful message explaining what went wrong, a search field to make a new search, and a list of the 6 most recent published posts.

Extras

Image border classes

Simone ships with three border options for images and other elements that can be applied by adding a class to the desired element. The classes add a 1px solid border around the current element. The classes are .border-black (black), .border-gray (#b9b9b9 or 25% gray), and .border-custom (defaults to header color but is overridden by custom link color in Customizer). These classes are added to allow the user to add borders in a semantic and standards based way.

Friendly comment moderation

When a visitor leaves a comment that is held for moderation she is met with a friendly note highlighted in green rather than a warning.

Licenses and External Assets

Simone is distributed under the terms of the GNU GPL v2

Simone’s code base started out as _s as it were on February 6, 2014.

The theme features three custom fonts:

The accessible main menu is powered by Superfish (MIT License).

Responsive triggers for Superfish and Masonry powered by Enquire.js (MIT License).

Namesake

Simone is named after renowned philosopher and feminist Simone de Beauvoir.

Contribution and future development

Simone is open sourced and in continuous development. The current development version of Simone is available on GitHub where you can fork it, build on it, and contribute back if you have a new feature you want to share.

If you have feature requests leave them under Issues on GitHub.

44 comments:

  1. Hello, on this page to present the characteristics of Simone, you develop nothing about accessibility ready… Why ?
    Colette from Paris

  2. This is a question more so than a comment, but I am new to WordPress.org and the fact that this theme is accessibility ready drew my attention to it.
    The question I have is, is it possible to use css to change the body typeface (and colour) to increase contrast and make it usable by a mainly visually impaired audience of my site? I have tried already but changing the attributes inside the body tags doesn’t seem to do anything. … Any help would be greatly appreciated!
    Thanks
    Daniel

  3. Hi, thanks for this amazing theme. I’ve trying to change the text name in header for a logo, but I can’t do it work (I’m not a designer). Can you help me to achieve this? Thanks!

  4. Wow! What a difference. Previously I had the Eleven40 Child Theme from Studio Press installed on the Genesis Framework. Downloaded and Installed the Simone Theme and right out of the box several problems are solved. Is there going to be a Paid version of Simone?

  5. Thank you for this great theme. Is there a way to have a smaller header, say 180 deep instead of 300 deep. I tried making the change in a new custom-header.php and placed it in an inc folder inside of my child theme but did not work. Thoughts?

  6. Hi Morten.
    Great theme and a great lynda tutorial! I look forward to using it for my projects.
    How easy would it be to ‘sassify’ the styles for Simone or at least Underscores. Do you plan to do this at all?
    Thanks!

      1. Also, as of Aug 11, 2014, if you visit Underscores.me and click on “Advanced Options”, you’ll now find that you can check a box to add Sass support.

        Thanks to you, Morten for an excellent theme and accompanying Lynda.com course to learn from :)

  7. You are my favorite teacher on WordPress. However, there are two points I don’t like about Simone.

    1. When displayed on large screen, say imac, 24 dell monitor, etc, sidebar is very far from the content. Main navigation is at far left and search box is at far right. I don’t quite understand this design and I prefer everything stay in the middle.

    2. On single post pages, the picture under navigation will show strange grey grid background while other background is pure white. I know you use this background for home page, but only a very small area of this grey background shown on the single post pages makes it feel like error.

    Still, very good classes on Lynda.com and learned a lot from you. Thank you.

    1. Hi Cece, let me quickly answer your qualms about Simone:

      1. When designing Simone the purpose was to put the content in the physical center of the screen and push the sidebar away to make it not distract from the content. The choice of locking the sidebar to the right side was deliberate because the sidebar seldom if ever add value to the content itself. This is a rather unusual design decision but it is one I believe will become more prevalent in the future. The content that matters – the content itself – stay right in the middle unlike with pretty much every other theme with a sidebar.
      2. The grey grid background you see behind the Featured Image on single posts is also there for a reason to visually separate the image from the rest of the content. This is a fairly standard design technique that is used to accommodate large Featured Image areas because the user often uploads images that are not big enough and without a contrasting background the layout looks disjointed.

      Simone is an opinionated theme with opinionated design that tries to do things a little differently. There are enough themes that look the same and I don’t think there is much point in me adding to that pile. That said I appreciate all feedback and I’m making constant updates to the theme. One such update may be to provide an option where the sidebar is displayed along side the content rather than all the way to the right.

  8. Dear Morten,

    first of all I want to appreciate your teaching at Lynda.com. Very impressive and easy for beginners too.

    The WordPress theme Simone is also very impressive.

    Thank you for being such a sport.

  9. My Favorite Mor10 >
    After installing the theme “social sharing” Button are not displayed on right side bar…

  10. Hy Mor10……
    You are my favourate tutotr at “lynda library”.
    I had many Ques… about web Development? And i have learnt all of your cources.
    As the torrent sites like “kickass” “piratebay” and many others can be develop on wordpres?
    plz make other many cources on other plateform like “joomla” “Druple” and many more!
    Thanks a lot…

  11. Dear Morten

    Firstly, I would say ‘Simone’ is a great template and very appealing on the eyes.

    I’m trying it out on my affiliate links site (though it’s designed for a different purpose).

    How and where do I change width of the main content ? I would like to make use of some of the wide open space on the left. Will you please help me with some pointers.

    Thanks in advance for your help.

    Cheers
    Rajeev

  12. Hey coach,hats off for job here,trying out with the theme at the moment,
    1.how can i change the background colour or upload an image
    2.how can i reduce the size of the header image,it seems wide

    Thanks for being here and good success

  13. Morten,

    Thank you for creating such a great launching pad for WordPress sites! I have used Simone for a handful of sites already, and what makes Simone so great is that I don’t have to completely go from the ground up, so a lot of the heavy lifting is already done, and even moments where I need to make quite a bit of tweaks are still much easier than if I would have started with only _s. Excellent work!

  14. Hi Morten,
    I have been following your most WordPress courses. Recently, I took your _s theme building course, designed my Khorunga theme as part of the course. My khorunga theme is very similar to your Simone except few glitches here and there which I could not get through the exercises.
    In my site I am using modified version of Khorunga, using child-theme (header, fonts etc) but I had to cheat and modify the main theme files to modify background and feature images dimensions. I very much liked your entire design but the modifications I made were for testing my learning experience only. I would like to follow your updates would like to keep my theme updates as much as possible.
    I thought to share this with you and congratulate you for doing a great job!

  15. Hello Morten,
    I viewed your Lynda class & downloaded Simone. However, on my large screen the sidebar still appears on the bottom as if it were a small screen. I can’t figure out where to change that. I keep returning to the videos but there isn’t anything about that specific issue.

    I’m comfortable editing the CSS as needed & to some extent I can change the javascript. I haven’t watched the developer videos.

  16. Hi Morten,

    Thanks alot for this great theme and the tuts at Lynda.com!
    I am playing around with the theme and are planning to use it for my own site real soon. While I was playing around I noticed there was no translation file for the Dutch language yet. So I created one and submitted it via your site.
    Hope you will implement it in your next update.

    Regards,
    Richard

  17. On the no-sidebar layout, I would like the content area to be 1000 px. I have copied the no-sidebar.css and placed it in my theme and made the change there. I have added a functions.php to my theme changing the path to my no-sidebar.css and nothing had worked.

    What is the correct way for increasing the size of the content area on the no-sidebar layout?

    Thanks

  18. Great theme, thanks for putting it out there.

    One issue I can’t seem to solve is when I view my site on a phone, there is a lot of blank space to the right that a user can scroll to. This trouble didn’t seem to pop up until I added a header image, and it doesn’t occur on tablets or desktops.

    Has anyone else had this problem or know what is going on?

    Thanks and again, nice work!

  19. Hi, I really like Simone, but I have a question:

    How can I make the header image occupy the whole screen, like you have on this page? In my case, the image doesn’t strech, and remains a 1200×300 with ugly white space to the sides. Thanks in advance

  20. Morten,

    I’m keen to follow any improvements you make to this theme. As it really is a very good reference for any theme builder looking for a solid foundation.

    I’d love to see dates next to the version numbers in the readme.txt. I’m not sure if this is common practice. However it would be really helpful.

    The Lynda course for this theme was excellent.
    Thank You.

    Tim

  21. Hello,i use Child Themes, but it has some wrong about the style.

    I put the code in Child Themes’s functions.php.

    add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
    function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style') );
    }

  22. Hi,

    I’m planning to use your theme, but want to replace the svg grid background by a gif version, because it gets flickering when scrolling in Firefox (Windows and Linux tested). Possibly some kind of redrawing issue with scrolling.

    I created a child theme in WordPress, but I can’t figure out how to get working a “custom” version of the content-sidebar.css in the layouts sub-directory of the theme. Pushing the rules to modify in the style.css does not work (aside from the .single-post-thumbnail class which IS in the original style.css, but only working for articles pages, not home page or category listing, where the .site-content of the second css file apply).

    How can I get my “additional” content-sidebar.css work over the original one ?

    Thanks in advance.

  23. Simone looks great and was an excellent theme update for our blog. Any options for increasing the size of Author photos? Would prefer option of larger images to put a face to the blog post(s). Is this possible with the recent update?

  24. Hi mor10,
    I really like this theme,but I am having trouble with featured image width.For some reason my featured image width is always 445px instead of 780px.Can you please help?
    Thanks

  25. Hello,
    on my website http://www.penser-la-photographie.com
    I have done the updated to the new version 2.0
    But, all the text area is going to the left…
    and I had build all in the previous version
    Can you tell me how to do… like It was ?
    (I have another website with your Simone : http://www.lesyeuxdelimaginaire.com
    I don’t updated… so you can see how it is…with the previous version)
    And sorry if my english is not so good
    Best regards
    Colette from Paris

    1. @ColetteG: I took a look at your site and I figured out what’s going on. Your child theme style.css file is a complete copy of the parent theme style.css file. That means you are sticking the old styles from the previous version on top of the new styles.

      When you create a child theme style.css file you don’t need to copy all the styles from the parent over. Instead you add only the styles you want to change. Child theme stylesheets come in addition to the parent theme stylesheet rather than as a replacement. That’s what makes them so powerful.

      What’s happening in your site is this: First the parent theme style.css is called. Then the layout styles (in your case /layouts/content-sidebar.css) are called. Then the child theme style.css file is called, and because that file is a copy of the original style.css, all the styles here override both the parent theme style.css and content-sidebar.css.

      The easiest way to fix this is to clear out your child theme stylesheet and add back in only the elements you want to change from the original theme.

  26. Ty so much for this great theme and lynda.com tutorials. I’m curious to know if I can download and import the website content which you used in Building A One Page Style Site In WordPress tutorial

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>