WordPress.org

Ready to get started?Download WordPress

Forums

WP Parallax Content Slider
[resolved] use different background color to each slide !! (3 posts)

  1. mni90
    Member
    Posted 1 year ago #

    Hi All,

    plz i need help as the title said i wanna use different background color to each slide

    Thanks in advance

    http://wordpress.org/extend/plugins/wp-parallax-content-slider/

  2. mni90
    Member
    Posted 1 year ago #

    Solved!!!

    in get_article_slide function we can check the article title and assign doubled class

    function get_article_slide($title, $excerpt, $link_article, $url_image, $title_length, $alt_image = 'Alternative text')
    	{
    		// Parameters
    		if (strlen($title) > $title_length) $title = substr($title, 0, $title_length)."...";
                    /**** Here is some php codes to make the slider colorful like lezard :) ****/
    		$da_Doubledclass=""; //The Magic variable
    		if(strcmp($title, "title number 1")==0){$da_Doubledclass="color1";}
    		else if(strcmp($title, "title number 2")==0){$da_Doubledclass="color2";}
    		else if(strcmp($title, "title number 3")==0){$da_Doubledclass="color3";}
    		else if(strcmp($title, "title number 4")==0){$da_Doubledclass="color4";}
    		else if(strcmp($title, "title number 5")==0){$da_Doubledclass="color5";}
                     /**** End lezard ****/
    		// Slide output
    		$outputSlide  = "<div class='da-slide $da_Doubledclass'>"."\n";
    		$outputSlide .= "<h2>".$title."</h2>"."\n";
    		$outputSlide .= "<p>".$excerpt."</p>"."\n";
    		$outputSlide .= "<a href='".$link_article."'>Read more</a>"."\n";
    		$outputSlide .= "<div class='da-img'><img src='".$url_image."' alt='".$alt_image."' /></div>"."\n";
    		$outputSlide .= "</div>"."\n";
    		return $outputSlide;
    	}

    --------------------------------------------------
    title number 1 & 2 & 3 ...etc
    is example you must check by your articles titles
    --------------------------------------------------

    with css now we can styling the classes

    .color1{background-color:#4F817B;}
    .color2{background-color:#632523;}
    .color3{background-color:#CC9900;}
    .color4{background-color:#265C9A;}
    .color5{background-color:#333333;}

    if effects get hidden make sure that z-index of h2 & p & da-img is higher than all..

    Thank you,
    Mohamed Nasser

  3. wp-maverick
    Member
    Plugin Author

    Posted 1 year ago #

    Great!
    Fell free to share with us your website url to see the result ;)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic