Chameleon Theme – slider on overy page

  • Resolved dietsmoke

    (@dietsmoke)


    12 years, 7 months ago

    Hi,

    I′m using the Chameleon theme and have the problem, that the slider shows just on the homepage. I just want to show up on every page but have no clue how to manage this.

    I think the part concerning the slider in the CSS is as follows:

    /*------------------------------------------------*/
/*--------------[FEATURED SLIDER]-----------------*/
/*------------------------------------------------*/

#featured { position: relative; background: url(images/featured-bg.png) no-repeat top center; margin-top: 12px; margin-bottom: 12px;  }
	a#left-arrow, a#right-arrow, #featured .nivo-prevNav, #featured .nivo-nextNav { position: absolute; top: 143px; width: 40px; height: 44px; text-indent:-9999px; z-index: 40; }
		a#left-arrow, #featured .nivo-prevNav { background:url(images/left-arrow.png) no-repeat; left: -7px; }
		a#right-arrow, #featured .nivo-nextNav { background:url(images/right-arrow.png) no-repeat; right: -7px; }
			.featured-top-shadow { background:url(images/featured-top-shadow.png) repeat-x; position: absolute; top:0; left: 0px; width: 960px; height: 4px; }
			.featured-bottom-shadow { background:url(images/featured-bottom-shadow.png) repeat-x; position: absolute; bottom:0; left: 0px; width: 960px; height: 4px; }
			.featured-description { position: absolute; width: 340px; height: 160px; top: 50px; right:53px; background:url(images/featured-description.png); padding: 37px 33px 40px 40px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; display:none; }
				h2.featured-title { font-family: 'Kreon', Arial, sans-serif; font-weight: lighter; font-size: 28px; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); }
					h2.featured-title a { text-decoration: none; color: #ffffff; }
				.featured-description p { color: #bebdbd; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); line-height: 21px;}
				a.readmore { display: block; background: url(images/readmore.png); height: 27px;padding: 0 13px; color: #7b9297; font-size: 13px; font-family: 'Kreon', Arial, sans-serif; line-height: 27px; position: absolute; bottom: 0px; right: 0px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
				#featured a.readmore:hover { color: #fff; }
	#controllers, .nivo-controlNav { text-align: center; padding-top: 12px; padding-bottom: 14px;  }
		#controllers a, .nivo-controlNav a { background:url(images/controller1.png) no-repeat; display:block; height:11px; margin-right:4px; text-indent:-9999px; width:11px; display: inline-block; }
			#controllers a.activeSlide, .nivo-controlNav a.active, #controllers a:hover, .nivo-controlNav a:hover { background:url(images/controller2.png) no-repeat; }

.nivoSlider { position:relative; }
	.nivoSlider img { position:absolute; top:0px; left:0px; }
/* If an image is wrapped in a link */
	/*.nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; }*/
/* The slices and boxes in the Slider */
.nivo-slice { display:block; position:absolute; z-index:5; height:100%; }
.nivo-box { display:block; position:absolute; z-index:5; }
/* Caption styles */
.nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:8; }
	.nivo-caption p { padding:5px; margin:0; }
		.nivo-caption a { display:inline !important; }
.nivo-html-caption { display:none; }
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; }
.nivo-prevNav { left:0px; }
.nivo-nextNav { right:0px; }
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav { position: absolute; bottom: -40px; left: 0; width: 960px; }
.nivo-controlNav a { position:relative; z-index:9; cursor:pointer; }
.nivo-controlNav a.active { font-weight:bold; }

#featured-modest { position: relative; height: 340px; margin-top: 30px; }
	#featured-modest .slide { position: absolute; top: 20px; left: 300px; z-index: 1; opacity: 0; width: 354px; }
		#featured-modest .active-block { top: 0; left: 246px; z-index: 3; width: 462px; }
		#featured-modest .next-block, #featured-modest .prev-block { top: 35px; z-index: 2; }
		#featured-modest .next-block { left: 575px; }
		#featured-modest .prev-block { left: 20px; }
		#featured-modest .active-block, #featured-modest .prev-block, #featured-modest .next-block { opacity: 1; }
		.shadow-left, .shadow-right { position: absolute; top: 35px; height: 234px; display: none; }
		.shadow-left { left: -29px; width: 29px; background: url(images/active-left-shadow.png) no-repeat; }
		.shadow-right { right: -21px; width: 21px; background: url(images/active-right-shadow.png) no-repeat; }

		a.featured-link { text-indent: -9999px; width: 61px; height: 71px; background: url(images/featured_active_link.png) no-repeat; position: absolute; right: -28px; top: 118px; display: none; z-index: 1000; }

		#featured-modest .featured-title { position: absolute; bottom: 115px; width: 441px; left: 0; text-align: center; padding: 0 10px 26px; font-size: 30px; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); background: url(images/featured-title-bg.png) no-repeat bottom center; display: none; }
		#featured-modest .description { background: url(images/description-bg.png) no-repeat; width: 411px; height: 86px; position: absolute; bottom: 0px; left: 1px; padding: 26px 25px 0; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); line-height: 20px; display: none; }
		#featured-modest .featured-title, #featured-modest #featured .description { cursor: pointer; }

		#featured-modest .active-block .shadow-left, #featured-modest .active-block .shadow-right, #featured-modest .active-block .featured-title, #featured-modest .active-block .description { display: block; }

		#featured-modest a.main { display: block; }

		#featured-modest img.bottom-shadow { position: absolute; bottom: -7px; left: 0; }
		#featured-modest .active-block img.bottom-shadow { bottom: -10px; }

		.gotoslide { position: absolute; top: 0; left: 0; background: url(images/next-slide-overlay.png); width: 354px; height: 234px; display: none; }
		.gotoslide span { position: absolute; top: 97px; display: block; width: 33px; height: 40px; }
				#featured-modest .next-block .gotoslide span { background: url(images/featured-arrow.png) no-repeat; right: 99px; }
				#featured-modest .prev-block .gotoslide span { background: url(images/featured-arrow-left.png) no-repeat; left: 99px; }

    Any help is much appreciated ??

    Thanks in advance*h

Viewing 3 replies - 1 through 3 (of 3 total)

  • First, the Chameleon theme you are referring to is the “ElegantThemes Chameleon” correct? – https://www.elegantthemes.com/gallery/chameleon/

    What you mentioned above is the styles for the slider which is only used for display. What you would want to do is to include the “featured.php” found in “TEMPLATE_DIRECTORY/includes/featured.php”.. If you want it to show on your post loop, single post, and pages, go open index.php, page.php, and single.php and include this code:

    <?php include(TEMPLATEPATH . ‘/includes/featured.php’); ?>

    between the line that gets the header and includes the “breadcrumbs.php” (somewhere in line 2 to line 8)..

    <?php get_header(); ?>

    <?php include(TEMPLATEPATH . ‘/includes/featured.php’); ?> //to include

    <?php include(TEMPLATEPATH . ‘/includes/breadcrumbs.php’); ?>

    This will call the featured slider and display it on your post loop, single post, and pages..

    -Raby

    As you are using a commercial theme, you need to seek any further support from the theme’s vendors.
    https://www.elegantthemes.com/forum/

    Thread Starter dietsmoke

    (@dietsmoke)

    Thanks a lot- works like a charm…

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Chameleon Theme – slider on overy page’ is closed to new replies.

Tags