WordPress.org

Forums

Add a class to MY_requestquotewidget (1 post)

  1. h.schiefer
    Member
    Posted 2 years ago #

    I am working with a template that includes this widget. It is, by default, set to contain three of these request a quote widgets and I have made adjustments to fit four of them . Only problem is I can't figure out where to change the class so that I can set four separate background images.

    Site is HERE

    The class .second is applied to the second widget but I need to figure out where it is applying it in the HTML so that I can apply a .third and .fourth to those widgets as well. I've looked at the PHP for the widget but I don't think it's calling it there.

    <?php
    // =============================== My Request Quote Widget ======================================
    class MY_RequestQuoteWidget extends WP_Widget {
        /** constructor */
        function MY_RequestQuoteWidget() {
            parent::WP_Widget(false, $name = 'My - Request a Quote');
        }
    
        /** @see WP_Widget::widget */
        function widget($args, $instance) {
            extract( $args );
            $title1 = apply_filters('widget_title1', $instance['title1']);
    	   $title2 = apply_filters('widget_title2', $instance['title2']);
    	   $title3 = apply_filters('widget_title3', $instance['title3']);
    				$txt1 = apply_filters('widget_txt1', $instance['txt1']);
    				$txt2 = apply_filters('widget_txt2', $instance['txt2']);
    				$txt3 = apply_filters('widget_txt3', $instance['txt3']);
            ?>
    
    		<?php
    			if($txt2=="" && $txt3==""){
    				$class='w-full';
    			} else {}
    		?>
                  <?php echo $before_widget; ?>
    			  			<div class="top-box">
    							<?php if($title1!=""){ ?>
    							<div class="box-text <?php echo $class; ?>">
    								<div class="title">
    									<h2><?php echo $title1; ?></h2>
    									<h2 class="middle"><?php echo $title2; ?></h2>
    									<h2><?php echo $title3; ?></h2>
    								</div>
    								<p><?php echo $txt1; ?></p>
    							</div><!-- end 'with title' -->
    							<?php } else { ?>
    							<div class="box-text <?php echo $class; ?>">
    								<p><?php echo $txt1; ?></p>
    							</div><!-- end 'without title' -->
    							<?php } ?>
    
    							<?php if($txt2!="" && $txt3!=""){ ?>
    								<div class="box-button">
    									<a href="<?php echo $txt3; ?>" class="button"><span class="right"><span class="tail"><?php echo $txt2; ?></span></span></a>
    								</div><!-- end 'button' -->
    							<?php } ?>
    						</div>
                  <?php echo $after_widget; ?>
            <?php
        }
    
        /** @see WP_Widget::update */
        function update($new_instance, $old_instance) {
            return $new_instance;
        }
    
        /** @see WP_Widget::form */
        function form($instance) {
            $title1 = esc_attr($instance['title1']);
    	   $title2 = esc_attr($instance['title2']);
    	   $title3 = esc_attr($instance['title3']);
    				$txt1 = esc_attr($instance['txt1']);
    				$txt2 = esc_attr($instance['txt2']);
    				$txt3 = esc_attr($instance['txt3']);
            ?>
           <p><label for="<?php echo $this->get_field_id('title1'); ?>"><?php _e('Title row #1:', 'theme1343'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title1'); ?>" name="<?php echo $this->get_field_name('title1'); ?>" type="text" value="<?php echo $title1; ?>" /></label></p>
    	   <p><label for="<?php echo $this->get_field_id('title2'); ?>"><?php _e('Title row #2:', 'theme1343'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title2'); ?>" name="<?php echo $this->get_field_name('title2'); ?>" type="text" value="<?php echo $title2; ?>" /></label></p>
    	    <p><label for="<?php echo $this->get_field_id('title3'); ?>"><?php _e('Title row #3:', 'theme1343'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title3'); ?>" name="<?php echo $this->get_field_name('title3'); ?>" type="text" value="<?php echo $title3; ?>" /></label></p>
    			 <p><label for="<?php echo $this->get_field_id('txt1'); ?>"><?php _e('Text:', 'theme1343'); ?><textarea rows="5"  class="widefat" id="<?php echo $this->get_field_id('txt1'); ?>" name="<?php echo $this->get_field_name('txt1'); ?>"><?php echo $txt1; ?></textarea></label></p>
    			 <p><label for="<?php echo $this->get_field_id('txt2'); ?>"><?php _e('Button Text:', 'theme1343'); ?> <input class="widefat" id="<?php echo $this->get_field_id('txt2'); ?>" name="<?php echo $this->get_field_name('txt2'); ?>" type="text" value="<?php echo $txt2; ?>" /></label></p>
    			 <p><label for="<?php echo $this->get_field_id('txt3'); ?>"><?php _e('Button URL:', 'theme1343'); ?> <input class="widefat" id="<?php echo $this->get_field_id('txt3'); ?>" name="<?php echo $this->get_field_name('txt3'); ?>" type="text" value="<?php echo $txt3; ?>" /></label></p>
            <?php
        }
    
    } // class Request Quote Widget
    
    ?>

    And the styles are as follows:

    /* Request a quote */
    #request {
    	width:100%;
    	background:url(images/pattern.gif) center;
    }
    .widget_my_requestquotewidget {
    	width:185px;
    	float:left;
    	margin:-70px 0 0 29px;
    	position:relative;
    	}
    .widget_my_requestquotewidget:first-child {
    	margin-left:0px;
    }
    	.widget_my_requestquotewidget .title {
    		width:185px;
    		height:186px;
    		background:url(images/request-title-bg01.png) no-repeat left top;
    		text-align:center;
    		margin-bottom:23px;
    	}
    	.widget_my_requestquotewidget.second .title {
    		background:url(images/request-title-bg02.png) no-repeat left top;
    	}
    	.widget_my_requestquotewidget.third .title {
    		background:url(images/request-title-bg03.png) no-repeat left top;
    	}
    	.widget_my_requestquotewidget.fourth .title {
    		background:url(images/request-title-bg04.png) no-repeat left top;
    	}
    
    		.widget_my_requestquotewidget .title h2 {
    			font-size:180%;
    			line-height:200%;
    			color:#564b44;
    			font-family: 'Playfair Display', serif;
    			margin:0;
    			letter-spacing:-3px;
    		}
    		.widget_my_requestquotewidget.second .title h2 {
    			color:white;
    		}
    		.widget_my_requestquotewidget .title h2:first-child {
    			padding-top:25px;
    		}
    		.widget_my_requestquotewidget .title h2.middle {
    			color:white;
    			font-size:290%;
    			line-height:100%;
    			margin:-7px 0 -6px 0;
    		}
    
    	.top-box {
    		overflow:hidden;
    		zoom:1;
    		position:relative;
    		}
    	.box-button {
    		text-align:center;
    		}
    	.box-text p {
    		color:#ccbeb6;
    		font-size:.9em;
    		line-height:1.2em;
    		text-transform:uppercase;
    		text-align:center;
    		margin-bottom:30px;
    		}

    You can see where I've added the third and fourth styles but then how do I actually tell it to call those and apply them to those widgets?

    Any ideas?

Topic Closed

This topic has been closed to new replies.

About this Topic