techtom
|
Easing Slider is free, easy and works well.
It has both a shortcode or you can call it vai php in your templates. I have used it for a while, but started using the rivaslider pro which is his upgrade.
http://www.easingslider.matthewruddy.com/
The php statement to call it in your template, your case header.php is
<?php
if (is_front_page())
{?>
<?php if (function_exists('easing_slider')){ easing_slider(); }; ?>
<?php } else { ?>
<!-- do something else here or nothing at all -->
<?php } ?>
|
| |
Maritha
|
Thanks for answering but I must admit that I do not really understand.
Have created a test theme in Artister that will act as my "try until I give up"  with a header that I want to replace with the slider but only on the home page. The slider should not pick up any of the blog posts (if any).
Have installed the easing slider and activated it. Have uploaded three images but then I have no idea how to proceed. The code you give above where in the header.php should I place it?
(my header.php below)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
<title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
<?php if(WP_VERSION < 3.0): ?>
<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
<?php endif; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php
remove_action('wp_head', 'wp_generator');
wp_enqueue_script('jquery');
if ( is_singular() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
</head>
<body <?php if(function_exists('body_class')) body_class(); ?>>
<div id="art-main">
<div class="cleared reset-box"></div>
<div class="art-bar art-nav">
<div class="art-nav-outer">
<div class="art-nav-wrapper">
<div class="art-nav-inner">
<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'class' => 'art-hmenu'
)
);
?>
</div>
</div>
</div>
</div>
<div class="cleared reset-box"></div>
<div class="art-header">
<div class="art-header-position">
<div class="art-header-wrapper">
<div class="cleared reset-box"></div>
<div class="art-header-inner">
<div class="art-logo">
<?php if(theme_get_option('theme_header_show_headline')): ?>
<?php $headline = theme_get_option('theme_'.(is_single()?'single':'posts').'_headline_tag'); ?>
<<?php echo $headline; ?> class="art-logo-name"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></<?php echo $headline; ?>>
<?php endif; ?>
<?php if(theme_get_option('theme_header_show_slogan')): ?>
<?php $slogan = theme_get_option('theme_'.(is_single()?'single':'posts').'_slogan_tag'); ?>
<<?php echo $slogan; ?> class="art-logo-text"><?php bloginfo('description'); ?></<?php echo $slogan; ?>>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<div class="cleared reset-box"></div>
<div class="art-box art-sheet">
<div class="art-box-body art-sheet-body">
|
| |
Maritha
|
I have also tried to follow this guide but the page is messed up when I replace the heading tag
http://www.buildingkillerwebsites.com/how-to-add-a-picture-slider-to-an-artisteer-theme/
|
| |
techtom
|
What I posted should work just fine. : )
|
| |
Maritha
|
I think I got it right in the end so now I only have to get rid of the background image. THANK YOU A LOT! I will not try to make a new site with what I really want.
|
| |
techtom
|
you can target the header image on a certain page by inspecting the pages code and getting the page id.
You would have to see where your header image is loading from and adjust your css to match, but it would be something like the following:
body.page.page-id-7 .art-header:after {background-image:none;}
look at the body class tag for page id. then inspect your header css for where header.jpg is being called and modify the above css to match.
|
| |
Maritha
|
Thanks again for you help.
The page id is 30 and my
style.css code is
.art-header:before
{
position: absolute;
display:block;
content:' ';
z-index:-2;
top: 0;
width:100%;
height: 260px;
background-image: url('images/header.png');
background-repeat: no-repeat;
background-position:top left;
}
.art-header:after
{
position: absolute;
z-index:-1;
display:block;
content:' ';
top: 0;
left:15px;
right:15px;
height: 260px;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
background-position: center left;
}
/* end Header */
where do I add the code? Tried after
background-image: url('images/header.jpg');
but that does not work and if I remove the line I guess the other pages will loose the header image.
|
| |
techtom
|
Try just adding the code at the end of your style.css. I usually create a spot to add additional css to. You can try the following
/* Theme Modifications */
body.page.page-id-30 .art-header:after, body.page.page-id-30 .art-header:before {background-image:none;}
|
| |
Maritha
|
Nop doesn't work. I guess the id is correct as the code is
<body class="home page page-id-30 page-template-default logged-in admin-bar">
I added your text at the end of my style.css.
|
| |
Maritha
|
Hmmm, works fine in firefox but in explorer is the image still under the slider. Any idea to kill it even there?
I know explorer sucks but I guess I have to learn how to fix it even there.
|
| |
techtom
|
Which image is the background on home?
maybe try adding a statement to remove image from .art-header as well
body.page.page-id-30 .art-header:after, body.page.page-id-30 .art-header:before, body.page.page-id-30 .art-header {background-image:none;}
|
| |
Maritha
|
Worked! Thank you so much. Now I can start playing with different themes. I try to learn as much I can about WP. Have used DW and C5 earlier but find WP so much user friendly. Not always then but mostly. Have a nice day.
|
| |
techtom
|
Glad to see it worked for you. : )
http://www.lynda.com/ has a lot of training videos for Wordpress, PHP, Javascript, CSS and much more. Worth signing up for a few months if you have the time to watch them.
|
| |
Maritha
|
Will do. Thanks again.
|
| |