SImple CSS Changes for Striking ThemeIsland Colors

SEO/SEM Experts - For Serious Use Only

CSS Changes to Enhance Striking Theme

The Striking Premium Theme by Kaptinlin is fast becoming my theme of choice. It is no secret that I’ve been a Thesis Framework fan for many years, but I am finding more-and-more that I am recommending the Striking Theme to my SMB clients.

PREMMISS: Use Only WordPress Editor – No FTP

The goal is to do all of these changes using only the WordPress built in Theme editor. I would highly recommend making your web site future proof by following Chris Pearson’s Guide to a Custom CSS file and Function file. But, this would require us to use a FTP client and some type of editor.

Before we start adding CSS Hacks we are gong to need to do the following simple steps to setup our workspace

Add the class custom to the body tag
Add the style.css into the header

Access the WordPress Theme Editor

Go to your WordPress Dashboard and on the left side do the following:

Appearance -> Editor

Next, look down the right side of the Editor and find:

Theme Functions(functions.php). The functions.php file will be loaded into the editor and you should see the following

<?php 
/* Load the Theme class. */
require_once (TEMPLATEPATH . '/framework/theme.php');

$theme = new Theme();
$theme->init(array(
    'theme_name' => 'Striking', 
    'theme_slug' => 'striking'
));

1

2

3

4

5

6

7

8

9

<?php

/* Load the Theme class. */

require_once (TEMPLATEPATH . '/framework/theme.php');

$theme = new Theme();

$theme->init(array(

'theme_name' => 'Striking',

'theme_slug' => 'striking'

));

Next add the following so that the the functions.php file looks like this:

<?php 
/* Load the Theme class. */
require_once (TEMPLATEPATH . '/framework/theme.php');

$theme = new Theme();
$theme->init(array(
    'theme_name' => 'Striking', 
    'theme_slug' => 'striking'
));

///////////////////////////////////////
/// Attach body_class(custom) function
/// with filter so that custom class
//////////////////////////////////////
add_filter('body_class', 'custom_body_class');

function custom_body_class($classes) {
        $classes[] = 'custom';
            return $classes;
}
//////////////////////////////////////////////
/// Add the /style.css to the header
/////////////////////////////////////////////
add_action('wp_head', 'custom_css');

function custom_css() {
    echo "\n" . '<link rel="stylesheet" type="text/css" href="' . THEME_URI .'/style.css" />' . "\n";

        
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<?php

/* Load the Theme class. */

require_once (TEMPLATEPATH . '/framework/theme.php');

$theme = new Theme();

$theme->init(array(

'theme_name' => 'Striking',

'theme_slug' => 'striking'

));

///////////////////////////////////////

/// Attach body_class(custom) function

/// with filter so that custom class

//////////////////////////////////////

add_filter('body_class', 'custom_body_class');

function custom_body_class($classes) {

$classes[] = 'custom';

return $classes;

}

//////////////////////////////////////////////

/// Add the /style.css to the header

/////////////////////////////////////////////

add_action('wp_head', 'custom_css');

function custom_css() {

echo "\n" . '<link rel="stylesheet" type="text/css" href="' . THEME_URI .'/style.css" />' . "\n";

}

Start Using the Style.css File

Now Save the functions.php file and you are all setup to start using the style.css file for all your CSS modifications. You should see the following:

/*
Theme Name: Striking
Description: Designed by <a href="http://themeforest.net/user/Kaptinlin">Kaptinlin</a>.
<a href="http://twitter.com/kaptinlin" target="_blank">Follow KaptinLin on Twitter</a> for the updates.
 Get support from <a href="http://kaptinlin.com/support/">Forum</a>.
Author: <a href="http://themeforest.net/user/Kaptinlin">Kaptinlin</a>
Version: 3.0.5
Author URI: http://themeforest.net/user/Kaptinlin
*/

1

2

3

4

5

6

7

8

9

/*

Theme Name: Striking

Description: Designed by <a href="http://themeforest.net/user/Kaptinlin">Kaptinlin</a>.

<a href="http://twitter.com/kaptinlin" target="_blank">Follow KaptinLin on Twitter</a> for the updates.

Get support from <a href="http://kaptinlin.com/support/">Forum</a>.

Author: <a href="http://themeforest.net/user/Kaptinlin">Kaptinlin</a>

Version: 3.0.5

Author URI: http://themeforest.net/user/Kaptinlin

*/

Use .custom Prefix on all CSS Changes

From now on you will always use the .custom prefix on all modifications in the style.css file. The reason behind this is CSS’ built in specificity. So if you were going to change the footer id to not display you would in the past without the custom class in the body tag use the following CSS:

#footer {
  display:none;
}

1

2

3

#footer {

display:none;

}

Now you will always put the custom class prefix on all changes:

.custom #footer {
  display:none;
}

1

2

3

.custom #footer {

display:none;

}

Child Theme Options

In June of 2011, Striking officially supported Child Themes with version 3.05.
The use of Child Themes in some instances may make more sense than the above examples.
Read this article to learn more about WordPress Child Themes to see if it makes more sense for your installation.
As for me, It is hard to teach an old dog new tricks, I would much rather use the Chris Pearson’s Custom folder trick which is an enhanced version of the above.

The Following are Simple CSS Tricks

My Logo Needs More Space on the Bottom

Amazingly, there is no need for CSS here. Use the Striking General Option panel. The adjustment for the bottom logo height solves many issue. Try it before any major changes.

Center My Logo

This needs a very simple CSS change. Again, use the .custom prefix if you followed the above tutorial

.custom #logo,
.custom #logo_text {
      // Use .custom prefix ONLY if you have done the above
    position: absolute;
     // The area is 940px wide depending on your logo size you will have to adjust
     // left: 0px means the logo sits on the left most edge.
     // Every 1px moves the left margin closer to the right side
    left: 400px;
}

1

2

3

4

5

6

7

8

9

.custom #logo,

.custom #logo_text {

// Use .custom prefix ONLY if you have done the above

position: absolute;

// The area is 940px wide depending on your logo size you will have to adjust

// left: 0px means the logo sits on the left most edge.

// Every 1px moves the left margin closer to the right side

left: 400px;

}

That is it one simple adjustment of the left margin.

Remove the Top and Bottom Feature Box Shadows

There are a number of simple ways to do this. One is to just use display:none;, but this removes the spacing. Here is a way that keeps the spacing.
Remove the Bottom shadow:

.custom #feature .bottom_shadow {
       background-image:none;
   // you can adjust the height here
       height: 9px;
}

1

2

3

4

5

.custom #feature .bottom_shadow {

background-image:none;

// you can adjust the height here

height: 9px;

}

Now for the Top shadow:

.custom #feature .top_shadow {
       background-image:none;
    // you can adjust the height here
       height: 9px;
}

1

2

3

4

5

.custom #feature .top_shadow {

background-image:none;

// you can adjust the height here

height: 9px;

}

Not much more too it.

Remove the Bottom Slider Shadows

For this too, there are a number of simple ways to remove this shadow. One is to just use display:none;, but this removes the spacing. Here is a way that keeps the spacing. Below well remove all the bottom shadows for all the sliders that Striking Theme has
Remove the Nivo Bottom shadow:

.custom #nivo_slider_wrap {
    background-image: none;
     // Adjust the bottom padding if needed
        padding-bottom:40px;
}

1

2

3

4

5

.custom #nivo_slider_wrap {

background-image: none;

// Adjust the bottom padding if needed

padding-bottom:40px;

}

Remove the Kwicks Bottom shadow:

.custom #kwicks_shadow {
    background-image::none;
      // Adjust the bottom padding if needed
    height:40px;
}

1

2

3

4

5

.custom #kwicks_shadow {

background-image::none;

// Adjust the bottom padding if needed

height:40px;

}

Remove the Anything Bottom shadow:

.custom #anything_shadow {
    background-image:none;
      // Adjust the bottom padding if needed
    height:40px;
}

1

2

3

4

5

.custom #anything_shadow {

background-image:none;

// Adjust the bottom padding if needed

height:40px;

}

Just remember, that you can always adjust the height at the bottom using the background-image:none. If you use display:none, you do not have access to adjusting the height as the container will not be displayed. You could use visibility:hidden, but let’s keep it simple.

Center a Web Page in an iPad Every Time

Often times a web page will left justify when viewed in an iPad or mobile Safari. This can easily be corrected using the Viewport Meta tag. Add the following into your functions.php file

//////////////////////////////////////////////
/// Add the /viewport meta to the header
/////////////////////////////////////////////
add_action('wp_head', 'add_viewport_meta');

function add_viewport_meta() {
       echo "\n" . '<meta name="viewport" content="width=1100" />' . "\n";        
}

1

2

3

4

5

6

7

8

//////////////////////////////////////////////

/// Add the /viewport meta to the header

/////////////////////////////////////////////

add_action('wp_head', 'add_viewport_meta');

function add_viewport_meta() {

echo "\n" . '<meta name="viewport" content="width=1100" />' . "\n";

}

In the Striking Theme without this meta tag, you will see a right gap when the web page is viewed on an iPad. It acts as if the page was left justified. This quickly corrects the problem

Center the Copy Right and Footer Menus

The copy right in the Striking Theme is left justified and the footer menu is right justified. Use the following CSS to make them both center aligned. Add the extra width of 100% to both IDs just-in-case.

.custom #copyright {
    /* float: left; */
    text-align: center;
    font-size:13px;    
    line-height:1.5em;
        width:100%; /* just in case */
}

.custom #footer_menu {
    /* float: right;
    text-align:right; */
        text-align:center;
        width:100%; /* just in case */
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.custom #copyright {

/* float: left; */

text-align: center;

font-size:13px;

line-height:1.5em;

width:100%; /* just in case */

}

.custom #footer_menu {

/* float: right;

text-align:right; */

text-align:center;

width:100%; /* just in case */

}

Fix Your Server Permission Issues

James or Websys at the Striking Theme forum wrote up an excellent article about Fixing Server Permissions
[lightbox href="http://kaptinlin.com/support/discussion/1281/server-permissions-how-to-adjust-your-hosting-if-your-settingssliders-not-working-7-april11?hl=en&tab=nw" iframe="true" width="990" height="1000"]Everything You Need to Know about Server Permissions[/lightbox]
This is a Great starting point and finishing point for that matter.

Simple CSS Changes For Striking Theme

CSS Changes to Enhance Striking Theme

PREMMISS: Use Only WordPress Editor – No FTP

Access the WordPress Theme Editor

Start Using the Style.css File

Use .custom Prefix on all CSS Changes

Child Theme Options

The Following are Simple CSS Tricks

My Logo Needs More Space on the Bottom

Center My Logo

Remove the Top and Bottom Feature Box Shadows

Remove the Bottom Slider Shadows

Center a Web Page in an iPad Every Time

Center the Copy Right and Footer Menus

Fix Your Server Permission Issues

Leave a Reply

My Video

Ad Squares Widget

Take a look behind the scenes.

Disable Autosave in WordPress

iPad Layout CSS – Fix Using Viewport Meta Tag

Jquery Code Snippets

Photos

Need to Know

Latest Tweets

This is A Form

Contact Me