Scrolling header images

  • SB

    (@indradhonu)


    11 years, 2 months ago

    Hi,
    First of all, many thanks for this nice responsive theme.
    At present, I can place a single image in header. Now, I want to have the scrolling header backgruond images(say 3-4 images).
    How is it possible? Any help? I’m giving here my sitelink for your reference, if reqd.

    I’m using this version of the theme.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter SB

    (@indradhonu)

    I’ve done it wit the “Simple responsive slider”. I’ve alter the header.php file in the child theme to get the slider inserted there. thats all.
    As there is no more purpose on getting help on the issue, I’m marking it as resolved.

    Thread Starter SB

    (@indradhonu)

    In referemce to the query of friend, I’m reopening the thread here.
    For everyone’s reference I’m posting here the modified header.php file of my website.
    BTW, I’m using version 2.0.8 of the Hueman theme(downloaded from the link given in my earlier post).
    Modified header.php file:- 

    <!DOCTYPE html> <html class="no-js" <?php language_attributes(); ?>>
<head>	<meta charset="<?php bloginfo('charset'); ?>">	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title><?php wp_title(''); ?></title>
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
	<?php wp_head(); ?></head>
<body <?php body_class(); ?>>
<div id="wrapper">
	<header id="header">
		<?php if (has_nav_menu('topbar')): ?>			<nav class="nav-container group" id="nav-topbar">				<div class="nav-toggle"><i class="fa fa-bars"></i></div>				<div class="nav-text"><!-- put your mobile menu text here --></div>				<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>				<div class="container">					<div class="container-inner">								<div class="toggle-search"><i class="fa fa-search"></i></div>						<div class="search-expand">							<div class="search-expand-inner">								<?php get_search_form(); ?>							</div>						</div>					</div><!--/.container-inner-->				</div><!--/.container-->					</nav><!--/#nav-topbar-->		<?php endif; ?>
		<div class="container group">			<div class="container-inner">						     <?php if ( ot_get_option('header-image') == '' ): ?>				    <div align="center">					<?php if ( function_exists( 'show_simpleresponsiveslider' ) ) show_simpleresponsiveslider(); ?>				    </div>				<?php endif; ?>				<?php if ( ot_get_option('header-image') ): ?>					<a href="<?php echo home_url('/'); ?>" rel="home">						<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">					</a>				<?php endif; ?>
				<?php if (has_nav_menu('header')): ?>					<nav class="nav-container group" id="nav-header">						<div class="nav-toggle"><i class="fa fa-bars"></i></div>						<div class="nav-text"><!-- put your mobile menu text here --></div>						<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>					</nav><!--/#nav-header-->				<?php endif; ?>						</div><!--/.container-inner-->		</div><!--/.container-->		</header><!--/#header-->	<div class="container" id="page">		<div class="container-inner">						<div class="main">				<div class="main-inner group">

    Also, I have modified style.csss file for better working of slider, otherwise it may show some gaps below the sliding images. The modified style.css is below:-

    /*
Theme Name: Hueman Child
Theme URI: https://alxmedia.se/themes/hueman/
Version: 2.0.8
Description: <a href="https://www.indradhonu.com">Hueman Child</a> is a responsive 100% high resolution theme customised specfically for <a href="https://www.indradhonu.com">Indradhonu Blogzine</a>. Unique toggle sidebars give a great browsing and reading experience on both tablet and mobile. The feature list is long: Unlimited topbar, header, footer and accent colors, unlimited widget areas, 0-2 sidebars to the left or right that can be uniquely specified for each page or post, 300px / 220px fixed width sidebars, 0-4 footer widget columns, almost zero layout images, related posts and post nav, featured story or slider, 10 post formats, good SEO, 3 flexible custom widgets, localisation support, social links, logo upload and many more useful admin panel features. This Hueman Child has an optional customisable header slider(based on simple responsive slider) for sliding header images.
Author: Indradhonu
Author URI: https://www.indradhonu.com
Tags: light, one-column, two-columns, three-columns, right-sidebar, left-sidebar, fluid-layout, fixed-layout, custom-colors, custom-menu, custom-header-slider, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
Template: hueman	

*/
@import url("../hueman/style.css");
/* ------------------------------------------------------------------------- *
 *  Theme customization starts here/* ------------------------------------------------------------------------- */
/*! https://responsiveslides.com v1.54 by @viljamis */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
.rslides_container {
  margin-bottom: 0px;
  position: relative;
  float: left;
  width: 100%;
  }

.rslides_nav {
  z-index: 3;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 50%;
  left: 0;
  opacity: 0.7;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("themes/themes.gif") no-repeat left top;
  margin-top: -55px;
  }

.rslides_nav:active {
  opacity: 1.0;
  }

.rslides_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }

.rslides_nav:focus {
  outline: none;
  }

.rslides_tabs {
  margin-top: 10px;
  text-align: center;
  }

.rslides_tabs li {
  display: inline;
  float: none;
  _float: left;
  *float: left;
  margin-right: 5px;
  }

.rslides_tabs a{
  text-indent: -9999px;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #ccc;
  background: rgba(0,0,0, .2);
  display: inline-block;
  _display: block;
  *display: block;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  width: 9px;
  height: 9px;
  }

.rslides_here a {
  background: #222;
  background: rgba(0,0,0, .8);
  }
.caption {
  position: absolute;
  display: block;
  bottom: -20px;
  left: 0;
  right: 0;
  padding: 15px;
  text-align: center;
  background: #000;
  background: rgba(0,0,0, .8);
  color: #fff;
}
    Thread Starter SB

    (@indradhonu)

    In referemce to the query of friend, I’m reopening the thread here.
    For everyone’s reference I’m posting here the modified header.php file of my website.
    BTW, I’m using version 2.0.8 of the Hueman theme(downloaded from the link given in my earlier post).
    Modified header.php file:- 

    <!DOCTYPE html> <html class="no-js" <?php language_attributes(); ?>>
<head>	<meta charset="<?php bloginfo('charset'); ?>">	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title><?php wp_title(''); ?></title>
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
	<?php wp_head(); ?></head>
<body <?php body_class(); ?>>
<div id="wrapper">
	<header id="header">
		<?php if (has_nav_menu('topbar')): ?>			<nav class="nav-container group" id="nav-topbar">				<div class="nav-toggle"><i class="fa fa-bars"></i></div>				<div class="nav-text"><!-- put your mobile menu text here --></div>				<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>				<div class="container">					<div class="container-inner">								<div class="toggle-search"><i class="fa fa-search"></i></div>						<div class="search-expand">							<div class="search-expand-inner">								<?php get_search_form(); ?>							</div>						</div>					</div><!--/.container-inner-->				</div><!--/.container-->					</nav><!--/#nav-topbar-->		<?php endif; ?>
		<div class="container group">			<div class="container-inner">						     <?php if ( ot_get_option('header-image') == '' ): ?>				    <div align="center">					<?php if ( function_exists( 'show_simpleresponsiveslider' ) ) show_simpleresponsiveslider(); ?>				    </div>				<?php endif; ?>				<?php if ( ot_get_option('header-image') ): ?>					<a href="<?php echo home_url('/'); ?>" rel="home">						<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">					</a>				<?php endif; ?>
				<?php if (has_nav_menu('header')): ?>					<nav class="nav-container group" id="nav-header">						<div class="nav-toggle"><i class="fa fa-bars"></i></div>						<div class="nav-text"><!-- put your mobile menu text here --></div>						<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>					</nav><!--/#nav-header-->				<?php endif; ?>						</div><!--/.container-inner-->		</div><!--/.container-->		</header><!--/#header-->	<div class="container" id="page">		<div class="container-inner">						<div class="main">				<div class="main-inner group">

    Also, I have modified style.csss file for better working of slider, otherwise it may show some gaps below the sliding images. The modified style.css is below:-

    /*
Theme Name: Hueman Child
Theme URI: https://alxmedia.se/themes/hueman/
Version: 2.0.8
Description: <a href="https://www.indradhonu.com">Hueman Child</a> is a responsive 100% high resolution theme customised specfically for <a href="https://www.indradhonu.com">Indradhonu Blogzine</a>. Unique toggle sidebars give a great browsing and reading experience on both tablet and mobile. The feature list is long: Unlimited topbar, header, footer and accent colors, unlimited widget areas, 0-2 sidebars to the left or right that can be uniquely specified for each page or post, 300px / 220px fixed width sidebars, 0-4 footer widget columns, almost zero layout images, related posts and post nav, featured story or slider, 10 post formats, good SEO, 3 flexible custom widgets, localisation support, social links, logo upload and many more useful admin panel features. This Hueman Child has an optional customisable header slider(based on simple responsive slider) for sliding header images.
Author: Indradhonu
Author URI: https://www.indradhonu.com
Tags: light, one-column, two-columns, three-columns, right-sidebar, left-sidebar, fluid-layout, fixed-layout, custom-colors, custom-menu, custom-header-slider, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
Template: hueman	

*/
@import url("../hueman/style.css");
/* ------------------------------------------------------------------------- *
 *  Theme customization starts here/* ------------------------------------------------------------------------- */
/*! https://responsiveslides.com v1.54 by @viljamis */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
.rslides_container {
  margin-bottom: 0px;
  position: relative;
  float: left;
  width: 100%;
  }

.rslides_nav {
  z-index: 3;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 50%;
  left: 0;
  opacity: 0.7;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("themes/themes.gif") no-repeat left top;
  margin-top: -55px;
  }

.rslides_nav:active {
  opacity: 1.0;
  }

.rslides_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }

.rslides_nav:focus {
  outline: none;
  }

.rslides_tabs {
  margin-top: 10px;
  text-align: center;
  }

.rslides_tabs li {
  display: inline;
  float: none;
  _float: left;
  *float: left;
  margin-right: 5px;
  }

.rslides_tabs a{
  text-indent: -9999px;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #ccc;
  background: rgba(0,0,0, .2);
  display: inline-block;
  _display: block;
  *display: block;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  width: 9px;
  height: 9px;
  }

.rslides_here a {
  background: #222;
  background: rgba(0,0,0, .8);
  }
.caption {
  position: absolute;
  display: block;
  bottom: -20px;
  left: 0;
  right: 0;
  padding: 15px;
  text-align: center;
  background: #000;
  background: rgba(0,0,0, .8);
  color: #fff;
}

    Indradhonu, thanks for response,
    But due to the way it is displayed in this thread, I have found it impossible to copy and correctly paste the code of your amended header.php and css.files. I think this is because you have not placed, as recommended, the code in between ‘backticks’.
    Regards
    John

    Thread Starter SB

    (@indradhonu)

    Indradhonu, thanks for response,
    But due to the way it is displayed in this thread, I have found it impossible to copy and correctly paste the code of your amended header.php and css.files. I think this is because you have not placed, as recommended, the code in between ‘backticks’.
    Regards
    John

    Dear John,
    Please find this pastebin link for the modified header.php file.
    Also, find the pastebin link for the modified style.css

    Hope, this will fulfil your necessity.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Scrolling header images’ is closed to new replies.