WP Engineer » CSS

Extend the TwentyEleven Navigation with your Social Icons

Michael — Sat, 03 Dec 2011 07:32:55 +0000

In this little tutorial we show how to add in the navigation of the TwentyEleven Theme our RSS Feed, a link with icons to our Twitter page and to our Facebook profile. Without writing a single line of PHP code. You are able to accomplish this with the WordPress Menu.

First we go in the backend to Design-> Menu and activate the CSS Classes. Therefore we click on "Screen Options" on the very top right corner. And unter "Show advanced menu properties" you check the box for "CSS Classes" and close the Screen Options.

After that we use the "Custom Links" to create the menu entries. We add the addresses to our RSS Feed, Facebook and Twitter and add them to the menu. There we assign the 3 menu entries to the CSS Classes. RSS Feed has the class rss, Twitter the class twitter and Facebook facebook. Don't forget to save.

I prepared a sprite, which you can download with a right mouse click->Save Image As… . You have to save this sprite into the folder twentyeleven/images/.

Then we open the file TwentyEleven style.css with a text editor and add at the end of the Menu block #access our additional CSS. We do not have much to add. We let our 3 list items float to the right, push the text out of view and position the graphic. Only for the hover, focus and active states, we must define a little tricky CSS rule in order to circumvent the background gradients of TwentyEleven.

#access .twitter, #access .rss, #access .facebook {
	float: right;
}
#access .twitter a, #access .rss a, #access .facebook a {
	background: transparent url(images/social-sprite.png) 0 0 no-repeat;
	padding: 0;
	text-indent: -9999px;
	width: 70px;
}
#access .rss a { background-position: 0 0; }
#access .facebook a { background-position: 0 -96px; }
#access .twitter a { background-position: 0 -48px; }
#access .rss a:hover, #access .rss a:focus, #access .rss a:active {
	background: transparent url(images/social-sprite.png) 0 -144px no-repeat;
}
#access .twitter a:hover, #access .twitter a:focus, #access .twitter a:active {
	background: transparent url(images/social-sprite.png) 0 -192px no-repeat;
}
#access .facebook a:hover, #access .facebook a:focus, #access .facebook a:active {
	background: transparent url(images/social-sprite.png) 0 -240px no-repeat;
}

This is just an example to experiment. Add your Google+ profile and expand this example with cool CSS tricks!

Use WordPress Custom Post Type In CSS-Class for Styling

Frank — Wed, 24 Aug 2011 09:03:06 +0000

Today I would like to show you, how to assign CSS classes to custom post types for styling your website.

Basically we just extend the function body_class() of WordPress with our own post types, so that we can address them to style our design accordingly.

The same I had already explained in detail in another post where the title of a post has been incorporated into this function, so there you can find additional information.

// Adds classes for custom post types to body_class() and post_class()
function fb_add_body_class( $class ) {
	$post_type = 'my_example_post_type'; // the Post Type

	if ( get_query_var('post_type') === $post_type ) { // only, if post type is active
		$class[] = $post_type;
		$class[] = 'type-' . $post_type;
	}

	return $class;
}
add_filter( 'body_class', 'fb_add_body_class' );

Alternatively you can extend the function post_class() so you won't have the class of the custom post type directly at the body tag. Therefore I use the same function and we just address the hook of the post class.

add_filter( 'post_class', 'fb_add_body_class' );

Both template tags are used in HTML tag, as it shown on the codex pages, we have mentioned above; and here is an example for the post class:

Enjoy testing and using it, if you know any improvements or have any question, please feel free and leave a comment.

Update: A small example for the custom taxonomie inside this fucntions of WordPress

function fb_add_body_class( $class ) {

	if ( ! is_tax() )
		return $class;

	$tax   = get_query_var( 'taxonomy' );
	$term  = $tax . '-' . get_query_var( 'term' );
	$class = array_merge( $classes, array( 'taxonomy-archive', $tax, $term ) );

	return $class;
}
add_filter( 'body_class', 'fb_add_body_class' ); // or post_class as hook

Use or fork it and have an idea or small solution for your requirements.

Move WordPress Admin Bar to the Bottom

Frank — Wed, 16 Mar 2011 08:00:29 +0000

Not everybody likes the WordPress Admin Bar, which exists since WordPress 3.1, at the top of the browser. With just a bit CSS you can change it. The following function provides CSS directly in the footer of backend and frontend. It displays the Admin Bar at the bottom.

You can expand the code as you like, for example the implementation with the help of an external CSS stylesheet to get it into the compiler of WordPress. Also you could arrange options for the users. For my needs this little snippet helped, put in a Plugin or in the functions.php of your theme.

function fb_move_admin_bar() {
    echo '
    ';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

As an alternative you could also use this Plugin, thanks Coen!

Simple Media Queries Tester

Frank — Thu, 23 Dec 2010 12:08:16 +0000

CSS Media Queries are getting more popular and the adjustment of the size of a website for different clients or the size of the browsers are more necessary. The Media Queries are a solution, which also have its advantages and disadvantages. It was a disadvantage, when using, that I couldn't see all sizes at the same time. So why not just a small script, the iframe element. If you like to use it, here is a simple solution or you can use the current script in my "Test-Laboratory".

The solution can be expanded and improved, enjoy.

You can store the following code in a PHP file and can then be used. I played a little with CSS and adapted it; also browser support is probably not very large because I purely use HTML5 and CSS3 and don't use any scripts.




	 

	Simple Media Queries Tester 

	
	 

	



	
		Simple Media Queries Tester
	

	
		
		
		Test your URL
		Test URL
			
			
		
		
		
	

	
		
		© 2010 bueltge.de · Impress

Simple Autoresize for WordPress Background Image Function

Frank — Sun, 19 Dec 2010 12:41:27 +0000

In WordPress 3.0 you have the possibility to easily upload and use a background image. The image is positioned via CSS in the background. Thus it is not quite simple to have the possibility of auto resize and the background adapts to the size of the browser. There are some nice possibilities for this request, I will briefly highlight a very simple way of using CSS, since then the function of WordPress will not be effected.

The following syntax must be integrated within the stylesheet. You can also create a Childtheme when the original theme should not be changed. The values have to be provided with !important since otherwise the values of WordPress will be used. So that the background is always adjusted to the size of the browser - but beware: this is not always the best solution because the images are going to change from the actual size. So it can look very distorting. The sample screenshot is as little sensitive as the clouds tolerate this and still provide a nice background picture - in contrast to the standard in which the image in the preview would be tiled, and for other images may look very ugly.

body {
	background-repeat:no-repeat !important;
	background-position:center center !important;
	background-attachment:fixed !important;
	-o-background-size: 100% 100%, auto !important;
	-moz-background-size: 100% 100%, auto !important;
	-webkit-background-size: 100% 100%, auto !important;
	background-size: 100% 100%, auto !important;
}

This CSS is not usable in all browsers, see overview , therefore it provides only in newer browsers the expected effect. The Internet Explorer has it difficulties with it.

function fb_header_callback() {

  $background = get_background_image();
  if ( ! $background )
    return;

  if ( $background ) {
    $image = " background-image: url('$background');";

    $style  = 'background-repeat:no-repeat;';
    $style .= 'background-position:center center;';
    $style .= 'background-attachment:fixed;';
    $style .= '-o-background-size: 100% 100%, auto;';
    $style .= '-moz-background-size: 100% 100%, auto;';
    $style .= '-webkit-background-size: 100% 100%, auto;';
    $style .= 'background-size: 100% 100%, auto;';

    $style .= $image . $style;
  }
?>


This function must be given to the function as a callback, of course it can be adjusted. In the functions.php of the theme it should work if the background image functionality already exists, the function add_custom_background(). This needs to be expanded in the first parameter with the new function and now the default callback of WordPress will no longer be called.
	// This theme allows users to set a custom background
	add_custom_background( 'fb_header_callback' );

The style will then output via hook wp_head directly in head, rather ugly - I think, and therefore you should format it in the style sheet, since it is static anyway and can not be adjusted by the user. Equally important is, that the hook is also present in the Theme, which is also important for other Plugins or features.
Use values from the backend
The last little tip for your own adjustments. I want to show you how to get the values from the backend and use them.

The background color of the wallpaper options will be given back with the following function:
$color = get_background_color();
The image gets via:
$background = get_background_image();
And query individual settings for the style via get_theme_mod($name);:

The following little snippet gives the set values back to the Theme.
$mods = get_theme_mods();
var_dump($mods);

For the default Theme Twenty Ten it could look like this:
string 'Twenty Ten' (length=10)

array
  'background_image' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_image_thumb' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_repeat' => string 'no-repeat' (length=9)
  'background_position_x' => string 'center' (length=6)
  'background_attachment' => string 'scroll' (length=6)
  'background_color' => string '' (length=0)

Based on these values in the array you can, for example, get the value background_repeat,
$repeat = get_theme_mod( 'background_repeat' );
which gives in this example no-repeat back.
The other values can be treated similarly, a lot of possibilities and opportunities.

 

© WP Engineer Team, All rights reserved (Digital Fingerprint: WPEngineer-be0254ce2b4972feb4b9cb72034a092d)

Create Your Own WordPress Login Design

Frank — Wed, 17 Dec 2008 13:00:02 +0000

WordPress 2.7 has been released these days and comes with some updates to the backend design. I think most of you already know that there is a new login-section. The design is now equal to the new backend's and the team did only little changes.
From my point of view this is very important to an all-inclusive-package, like a theme – or a corporate design.
The CSS changed a bit and if anybody wants to customize the login-section, I will show how to achieve it. The CSS is also included as a good starting point for your own custom design.

Loading the Stylesheet

I have to use a simple function, which I put in functions.php of the current theme and integrate it via hook login_head into the login-head to load the css for the login-section. This will make the custom css being referenced only by one specific theme and if I switch to a different, a different css will also be loaded.

// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
	echo '';
}

add_action('login_head', 'fb_custom_login');

The stylesheet comes with the name custom-login.css and is located in /custom-login in the folder of the theme.

The Stylesheet

Like I already said, here is tiny example, which includes classes and id's of the login-section, so you can customize it very easily.

html {
background-color: #fff;
}

#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !important;
}

#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}

#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}

The example above is just one way to customize the style. As usual there are unlimited possibilities with css and the art of it. A recommendational note from me, is to use the Firebug extension, which is really helpful when customizing css live. I can't mention this enough.