-
Notifications
You must be signed in to change notification settings - Fork 42
Transition from Thematic 1.0.4 to 2.0
When upgrading from Thematic 1.0.4, you will probably notice no change at all. This is because most of the new things has to do with html5 markup. By default, an upgraded theme will be in a legacy xhtml mode. The switch from xhtml to html5 will need to be done manually, as well as deciding to use the new responsive stylesheet.
The upgrade is done in three steps:
- Switch the markup to html5
- Remove the
@importstatements and enqueue the parent stylesheet - Check if you need to adjust your css
Tell Thematic to use html5 markup by adding theme support for thematic_html. Add this line of code to your child theme's functions.php:
add_theme_support( 'thematic_html5' );To take advantage of the new styles, child themes need to enqueue the parent stylesheet. Remove any @import declarations from the child's style.css and add this to the child theme's functions.php instead:
function mychild_add_thematic_styles() {
return array('thematic-main');
}
add_action( 'thematic_childtheme_style_dependencies', 'mychild_add_thematic_styles' );This will add the parent stylesheet as a dependency of the child stylesheet. This means that WordPress makes sure that the child stylesheet is included after the parent, so that any styles added to the child theme's style.css will override the Thematic styles.
Of course you can also use the normal wp_enqueue_style() to enqueue the stylesheet instead.
function mychild_scripts() {
wp_enqueue_style( 'thematic-main', get_template_directory_uri() . '/library/css/main.css', array(), '' );
}
add_action( 'wp_enqueue_scripts', 'mychild_scripts' );Just make sure that the parent stylesheet appears before your child's in the markup so that any overriding styles will function properly.
Since no id or class attribute has been removed, your previous custom styles should continue to work. However, some parent styling have been adjusted, so depending on how big your modifications are, some things might need to be added or changed.
Most of the following styling changes mainly applies for themes that are based on and uses styles from the parent theme. If your child theme only uses it's own stylesheet this does not apply to you. However, you need to add styles for some new markup introduced in 2.0. This is the new menu-toggle element that you will need to hide on larger screens, and you might want to adjust the breakpoint for the mobile menu or add mobile navigation css.
Here are some adjustments that you might commonly want to do.
Thematic 2.0 includes a simple navigation for mobile devices. This is completely new compared to previous versions. The default breakpoint to switch to the small menu is when the screen is less than 600 pixels wide (this can be changed though).
A theme that has added custom styling to the main navigation probably want to adjust the styling for the mobile menu to match the rest of the theme.
The mobile menu can be targeted using the class .toggled-on, and you can wrap it in the same media query as the parent uses:
@media( max-width: 600px ) {
.toggled-on .sf-menu li {
/* styles for the menu list items */
}
.toggled-on .sf-menu a {
/* styles for the links */
}
/* etc */
}New markup has been added to the #access div. There is a h3 heading used for toggling the mobile menu visibility. This h3 has a class of menu-toggle and is hidden on larger screens in the parent main stylesheet.
A theme that doesn't use the parent thematic stylesheet will need to add styles for this toggle heading. The simplest is to hide it with display: none. This is the css used in the parent main stylesheet:
@media( min-width: 601px ) {
.menu-toggle {
display: none;
}
}If you have made a lot of custom styles for the superfish menu, wrap them in a media query so that they won't interfere with the mobile navigation. Superfish flyouts work on touchscreens but flyouts don't work well on mobile.
@media( min-width: 601px ) {
/* all your .sf-menu styles should go here */
}In the main menu of the parent main stylesheet, the current page and it's ancestors are more visibly marked. The current menu parent is italic and the current menu item is blue. This may or may not interfere with child theme's styling.
To set a different look on the current page and it's ancestors, these style declarations will help you
@media( max-width: 600px ) {
.toggled-on .sf-menu .current-menu-item > a,
.toggled-on .sf-menu .current-menu-parent > a,
.toggled-on .sf-menu .current-menu-ancestor > a,
.toggled-on .sf-menu .current-post-ancestor > a,
.toggled-on .sf-menu .current_page_item > a,
.toggled-on .sf-menu .current_page_ancestor > a,
.toggled-on .sf-menu .current_page_parent > a {
/* current page parent on mobile */
}
.toggled-on .sf-menu .current_page_item > a,
.toggled-on .sf-menu .current-menu-item > a {
/* current page on mobile */
}
}
@media( max-width: 600px ) {
.sf-menu .current-menu-item > a,
.sf-menu .current-menu-parent > a,
.sf-menu .current-menu-ancestor > a,
.sf-menu .current-post-ancestor > a,
.sf-menu .current_page_item > a,
.sf-menu .current_page_ancestor > a,
.sf-menu .current_page_parent > a {
/* current page parent on larger screens */
}
.sf-menu .current-menu-item > a,
.sf-menu .current_page_item > a {
/* current page on larger screens */
}
}If there is something that doesn't look the way you designed it, you can use a css inspector like firebug for firefox or chrome developer tools to see what css rule affects that item.
To change something, select the item you want to adjust in the browser. You can see which style declarations that applies to the item. Find the relevant styles in thematic/library/css/main.css and copy them over to the child's stylesheet. There you can change the styles to match your design.