Help for Header script

  • Resolved sophicwife

    (@sophicwife)


    10 years, 4 months ago

    I am helping a church out with a website, and I honestly am no good when it comes to any code beyond html and maybe some very basic javascript. I have been playing around with your plugin, and I did manage to insert the code into the header (through editing the theme’s header scripts), but the slideshow is not flush with the top of the page, and there is a nice little gap between the bottom of the show and the controls. The site is live for now, you can see it here…

    https://renewedchristianfellowship.com/

    As a bonus, if anyone knows how to fix the red stripe at the top that won’t seem to expand to fit the header text, I’m all ears!!!

    Here is the code I’m working with:

    <?php
/**
 * Title: Header template.
 *
 * Description: Defines header content.
 *
 * Please do not edit this file. This file is part of the Cyber Chimps Framework and all modifications
 * should be made in a child theme.
 *
 * @category Cyber Chimps Framework
 * @package  Framework
 * @since    1.0
 * @author   CyberChimps
 * @license  https://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     https://www.cyberchimps.com/
 */
?>
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="ie ie6 lte9 lte8 lte7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html class="ie ie7 lte9 lte8 lte7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8 lte9 lte8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 9]>
<html class="ie ie9" <?php language_attributes(); ?>>
<![endif]-->
<!--[if gt IE 9]>  <html <?php language_attributes(); ?>> <![endif]-->
<!--[if !IE]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="initial-scale=1.0; maximum-scale=3.0; width=device-width" />

	<title><?php wp_title(''); ?></title>

	<link rel="profile" href="https://gmpg.org/xfn/11" />
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

	<!-- IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
		<script src="<?php echo get_template_directory_uri(); ?>/inc/js/html5.js" type="text/javascript"></script>
	<![endif]-->

	<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<div class="full-width-container header-full-width">

	<div class="headerslider"> <?php echo do_shortcode('[sp_responsiveslider limit="-1"]'); ?></div>
	<div class="header-image-banner"></div><!-- banner -->

  <div class="header-container">

    <div class="container">

    <?php do_action('cyberchimps_before_wrapper'); ?>

      <div class="container-fluid">

        <div id="header_nav_container">

          <div class="row-fluid">

            <div class="span4">
            <?php cyberchimps_header_logo(); ?>
            </div><!-- span4 -->
            <div class="span8">
            <?php do_action('cyberchimps_before_navigation'); ?>

              <nav id="navigation" class="row-fluid" role="navigation">
                <div class="main-navigation navbar">
                  <div class="navbar-inner">
                    <div class="container">
                    <?php /* hide collapsing menu if not responsive */
                    if( cyberchimps_get_option( 'responsive_design', 'checked' ) ): ?>
                      <div class="nav-collapse collapse">
                      <?php endif; ?>
                      <?php wp_nav_menu( array( 'theme_location'  => 'primary', 'menu_class' => 'nav', 'walker' => new cyberchimps_walker(), 'fallback_cb' => 'cyberchimps_fallback_menu' ) ); ?>
                      <?php /* hide collapsing menu if not responsive */
                      if( cyberchimps_get_option( 'responsive_design', 'checked' ) ): ?>
                      </div><!-- collapse -->

                    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </a>
                    <?php endif; ?>
                    </div><!-- container -->
                  </div><!-- .navbar-inner .row-fluid -->
                </div><!-- main-navigation navbar -->
              </nav><!-- #navigation -->

            <?php do_action('cyberchimps_after_navigation'); ?>
            </div><!-- span8 -->
          </div><!-- row fluid -->
        </div><!-- header nav container -->

      </div><!-- container-fluid -->
    </div><!-- container -->
  </div><!-- header container -->
</div><!--container full width -->
<div class="container">
<div id="wrapper" class="container-fluid">

    https://www.ads-software.com/plugins/responsive-header-image-slider/

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter sophicwife

    (@sophicwife)

    Also, I’m not sure where the little weird grey dot above the slideshow is coming from either. It appeared after I altered the code. ??

    Good news is, the little red banner is presently aligning over the slideshow roughly where I expected it to be.

    Plugin Author Anoop Ranawat

    (@anoopranawat)

    Hello,

    Please go to the setting > Responsive header image setting

    Here you can setup all the setting like :
    1) Navigation : true OR false
    2) Pagination :ture OR false
    3) Effect
    etc

    The wierid grey dots above the banner is a background
    Plz check your stylesheet style.css file line no 145

    .full-width-container.header-full-width {
    margin-bottom: 40px;
    position: relative;
}

    Make margin-bottom:0px

    thanks

    Plugin Author Anoop Ranawat

    (@anoopranawat)

    Gap you can manage with giving a height to the slider from setting page
    OR
    .slidesjs-container {height:350px !important}

    Thread Starter sophicwife

    (@sophicwife)

    Thank you so much! I will try both of these in the morning and update.

    Thread Starter sophicwife

    (@sophicwife)

    Changing the margin-bottom attribute fixed the gap on the top of the header… but setting a slideshow height from the setting page did not fix the gap on the bottom.

    I would have tried the piece of code you gave me, but I didn’t know where to put it:

    .slidesjs-container {height:350px !important}

    Weird grey dot is displaying overtop of the slideshow now. Hmm.

    Thank you again for your help.

    Thread Starter sophicwife

    (@sophicwife)

    I tried the code snippet in the header section of the stylesheet, and it worked. Thank you for bearing with me.

    I’m guessing the controls are supposed to display underneath the slideshow?

    Plugin Author Anoop Ranawat

    (@anoopranawat)

    Please add this css code in your style.css file

    .slidesjs-container {
    height: 350px !important;
}

    And if you want navigation above the image then plz paste the css in your style.css file

    .slidesjs-pagination {
    float: right;
    list-style: none outside none;
    margin: -60px 20px 0 !important;
    position: relative !important;
}
#slides .slidesjs-navigation {
    left: 10px !important;
    position: relative !important;
    top: -65px !important;
}

    Thread Starter sophicwife

    (@sophicwife)

    Awesome, thank you! Is there any way to keep the navigation from blinking?

    Plugin Author Anoop Ranawat

    (@anoopranawat)

    sorry but i am not able to see the updated changes on your website. Please update that, then i will check and give you the solution

    Thanks

    Plugin Author Anoop Ranawat

    (@anoopranawat)

    Ok here is the final css plz add this in your style.css file and delete the old one that i have sent you in above post

    .slidesjs-container {
    height: 350px !important;
}
.slidesjs-pagination {
    float: right;
    list-style: none outside none;
    margin: -30px 20px 0 !important;
    position: relative !important;
    z-index: 9999999;
}
#slides .slidesjs-navigation {
    left: 10px !important;
    position: relative !important;
    top: -35px !important;
    z-index: 999999;
}
    Thread Starter sophicwife

    (@sophicwife)

    Sorry for the delayed response. That worked perfectly. Thank you so much!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Help for Header script’ is closed to new replies.