Simple Blog Header Designs Using WordPress Shortcodes – Box Headers
on 2011/10/19 4:45 AM stored in: Uncategorized and tagged:
Introduction To Box Header Design Templates
In this tutorial I am going to show you how to create box type blog headers as part of “Simple Blog Header Designs Using WordPress Shortcodes” post series. In this example the headers are surrounded with a box with background color and a border.
Creating Simple Box Headers
function generate_header_css($content) {
return "
";
}
function box_head_medium($atts,$content) {
$style = box_head_styles($atts);
return "
" . do_shortcode($content) . "
";
}
function box_head_large($atts,$content) {
$style = box_head_styles($atts);
return "
" . do_shortcode($content) . "
";
}
function box_head_styles($atts) {
$color = isset ($atts['color']) ? "color:".$atts['color'].";" : '';
$background = isset ($atts['color']) ? "background-color:".$atts['background'].";" : '';
$outline = isset ($atts['color']) ? "outline-color:".$atts['outline'].";" : '';
$style['part1'] = $background.$outline;
$style['part2'] = $color;
return $style;
}
There are 3 types of predefined box headers. You can use box_head_small,box_head_medium or box_head_large in the type attribute to check these 3 different box headers. Your main shortcode will be [[header]Your Title [/header]]. I have used box_head_small in the example given below.
[[header type='box_head_small' color='#fff' background='#809FC5' outline='#162F4D'] Your Title [/header]]
| Main Shortcode |
| [[header /]] |
is the main shortcode you need to be using. |
| Main Parameters |
| type |
defines the type of list. for feature boxes this should have the value box_head_small, box_head_medium or box_head_large
|
| Optional Parameters |
| outline |
Border color of the box header. Default value = #CFCFCF
|
| background |
Background color of the box header. Default value = #EEEEEE
|
| color |
Text color of box header. Default value =#000
|
Examples of Using Box Headers
[[header type='box_head_small' ] Sample Blog Post Title [/header]]
[[header type='box_head_medium'] Sample Blog Post Title [/header]]
[[header type='box_head_large']Sample Blog Post Title [/header]]
[header type=’box_head_small’ ] Sample Blog Post Title [/header] [header type=’box_head_medium’] Sample Blog Post Title [/header] [header type=’box_head_large’]Sample Blog Post Title [/header]
[[header type='box_head_small' background='#BFD2F4' color='#2B4278' outline='#7FA0DC'] Sample Blog Post Title [/header]]
[header type=’box_head_small’ background=’#BFD2F4′ color=’#2B4278′ outline=’#7FA0DC’] Sample Blog Post Title [/header]
[[header type='box_head_medium' background='#BFD2F4' color='#2B4278' outline='#7FA0DC'] Sample Blog Post Title [/header]]
[header type=’box_head_medium’ background=’#BFD2F4′ color=’#2B4278′ outline=’#7FA0DC’] Sample Blog Post Title [/header]
[[header type='box_head_medium' background='#000' color='#fff' ] Sample Blog Post Title [/header]]
[header type=’box_head_medium’ background=’#000′ color=’#fff’ ] Sample Blog Post Title [/header]
[[header type='box_head_large' background='#635E65' color='#ACAEB7' outline='#7FA0DC'] Sample Blog Post Title [/header]]
[header type=’box_head_large’ background=’#635E65′ color=’#ACAEB7′ outline=’#7FA0DC’] Sample Blog Post Title [/header]
November 7th, 2011 at 1:16 pm
I like this idea. I visited your website for the first time and simply been your fan. Continue to keep writing as I am planning to come to read it daily!!