I have this function in my controller:
public function actionResource()
{
$resourcegrporgs = Organization::find()->where(['groupid' => '1'])->all();
$resmembers = '';
foreach ($resourcegrporgs as $resourcegrporg) {
$resmembers = $resourcegrporg->getMembers()->all();
}
return $this->render('resource', [
'resourceMembers' => $resmembers,
'resourceGroups' => $resourcegrporgs,
]);
}
and in my view i try to get the members for each group as follows:
<?php foreach ($resourceGroups as $resourceGroup): ?>
<section class="team">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="col-lg-12">
<h4 class="description"><?= $resourceGroup->name ?></h4>
<div class="row pt-md">
<?php foreach ($resourceMembers as $resourceMember): ?>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">
<div class="img-box">
<img src=<?= $resourceMember->picture ?> class="img-responsive">
<ul class="text-center">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
<h1><?= Html::a(Html::encode($resourceMember->name),['memberdetail', 'id' => $resourceMember->id]) ?></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
</section>
<?php endforeach; ?>
And here is the organization model;
class Organization extends \yii\db\ActiveRecord
{
/**
* #inheritdoc
*/
public static function tableName()
{
return 'organization';
}
/**
* #inheritdoc
*/
public function rules()
{
return [
[['name', 'active', 'groupid'], 'required'],
[['active', 'groupid'], 'integer'],
[['lastdatemodified'], 'safe'],
[['name', 'logo', 'userid'], 'string', 'max' => 100]
];
}
/**
* #inheritdoc
*/
public function attributeLabels()
{
return [
'id' => 'ID',
'name' => 'Name',
'logo' => 'Logo',
'active' => 'Active',
'userid' => 'Userid',
'lastdatemodified' => 'Lastdatemodified',
'groupid' => 'Groupid',
];
}
/**
* #return \yii\db\ActiveQuery
*/
public function getMembers()
{
return $this->hasMany(Member::className(), ['organizationid' => 'id']);
}
/**
* #return \yii\db\ActiveQuery
*/
public function getGroup()
{
return $this->hasOne(Group::className(), ['id' => 'groupid']);
}
}
However, the foreach loop for the members is returning the members of the last group for every other group thus my question:
How can I fix it to render the members of each group individually?
Unless I'm missing something this is rather easy. Just change your action to the following:
public function actionResource()
{
$resourcegrporgs = Organization::find()->where(['groupid' => '1'])->all();
return $this->render('resource', [
'resourceGroups' => $resourcegrporgs,
]);
}
And then in your view, the inner foreach loop should simply be this:
<?php foreach ($resourceGroup->members as $resourceMember): ?>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile">
<div class="img-box">
<img src=<?= $resourceMember->picture ?> class="img-responsive">
<ul class="text-center">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
<h1><?= Html::a(Html::encode($resourceMember->name),['memberdetail', 'id' => $resourceMember->id]) ?></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<?php endforeach; ?>
Related
I have a list that I show with an ajax call, each element has an onclick that performs a query, the model receives the correct query but when it refreshes the list it remains blank, it is as if the information from the controller did not arrive because I have made a var_dump to the foreach and mark array[0] when the query does get results and the div remains blank
this is my code:
<?php
foreach ($direc as $direccion) :
?>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<option id="hijo" value="<?= $direccion['first_name'] ?> <?= $direccion['last_name'] ?>" href="javascript:;"
onclick="realizaProceso($(this).val());return false;">
<h4 class="mb-0">
<strong><?= $direccion['first_name'] ?> <?= $direccion['last_name'] ?>, Zona--><?= $direccion['nombre_zona'] ?></strong>
</h4>
</option>
</div>
<div class="col-auto">
</div>
<script>
function realizaProceso(padre) {
var parametros = {
"padre": padre
};
$.ajax({
data: parametros, //datos que se envian a traves de ajax
url: "<?php echo base_url() ?>Administracion/paneladminreddos", //archivo que recibe la peticion
type: 'post', //método de envio
beforeSend: function() {
$("#content").html("Procesando, espere por favor...");
},
success: function(response) { //una vez que el archivo recibe el request lo procesa y lo devuelve
$("#content").html(response);
}
});
}
</script>
There is no error message just that the div does not refresh again.
I would rewrite the HTML portion to correct the markup errors previously identified and bind the event handler after the list has been rendered.
<?php
foreach( $direc as $direccion ) {
?>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<!--
Change the `option` to another element such as `i` as used here.
Change the ID to a `data-id` so that duplicate IDs are not observered in the DOM.
Remove inline event handler and assign external event listener later.
Assign `data-set` attributes so that the event listener can obtain required information when the `i` element is clicked.
-->
<i data-id='hijo' data-zona='<?= $direccion['nombre_zona']; ?>' data-value='<?= $direccion['first_name'];?> <?= $direccion['last_name'];?>' >
<h4 class="mb-0">
<strong><?=$direccion['first_name']; ?> <?=$direccion['last_name']; ?>, Zona--><?=$direccion['nombre_zona']; ?></strong>
</h4>
</i>
</div>
<div class="col-auto">
</div>
</div>
</li>
<?php
}//end foreach loop
?>
And the external event listener:
<script>
document.querySelectorAll('i[ data-id="hijo" ]').forEach( i=>i.addEventListener('click',function(e){
e.preventDefault();
e.stopPropagation();
<?php
printf(
'const url="%s/Administracion/paneladminreddos";',
base_url()
);
?>
// Use `this` to access (dataset) properties of the `i` element.
// Construct the payload for the POST request.
let data={
'padre':this.dataset.value,
'zona':this.dataset.zona
};
$.ajax({
data:data,
url:url,
type:'post',
beforeSend:()=>$('#content').html('Procesando, espere por favor...'),
success:(r)=>$('#content').html(r),
error:(e)=>console.log(e)
});
}));
</script>
An example
document.querySelectorAll('[data-id="hijo"]').forEach(n => n.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const url = location.href;
let data = {
'padre': this.dataset.value,
'zona': this.dataset.zona
};
$.ajax({
data: data,
url: url,
type: 'post',
beforeSend: () => $('#content').html('Procesando, espere por favor...'),
success: (r) => $('#content').html(r),
error: (e) => console.log(e.statusText)
});
}));
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<i data-id='hijo' data-zona='International' data-value='John Smith'>
<h4 class="mb-0">
<strong>John Smith, Zona -->International</strong>
</h4>
</i>
</div>
<div class="col-auto"></div>
</div>
</li>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<i data-id='hijo' data-zona='Spy' data-value='Mr Bean'>
<h4 class="mb-0">
<strong>Mr Bean, Zona -->Spy</strong>
</h4>
</i>
</div>
<div class="col-auto"></div>
</div>
</li>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<i data-id='hijo' data-zona='Superhero' data-value='Batman'>
<h4 class="mb-0">
<strong>Batman, Zona -->Superhero</strong>
</h4>
</i>
</div>
<div class="col-auto"></div>
</div>
</li>
</ul>
Foreach function will be loop, repeat tag. So if you set id for that, i think you can set by numerical order or ID of that.
<option id="<?= $direccion['id'] ?>" value="<?= $direccion['first_name'] ?> <?= $direccion['last_name'] ?>"
I have this website and my problem is with the language switcher on top.
As you can see from the screenshots, when the width is between 768 - 990 px the top bar disappears.
With top bar at 1175px x 621px
Without top bar at 896px x 489px
I have tried many css tricks that i found online, like
-webkit-transform: translate3d(0, 0, 0);
but i still have the same result
The HTML code is the menu from the website. I think the problem is being created by the class="style2"
P.S. At line 6315 of the css you can see the
#media (min-width: 768px) {...}
but i can't figure if something contributes to my problem.
<?php if((get_theme_mod('andaman_top_contact') || get_theme_mod('andaman_menu_soc')) == true) { ?>
<div class="header style2">
<div class="top_bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-9 col-sm-12 col-xs-12">
<?php if(get_theme_mod('andaman_top_contact') == true) { ?>
<ul class="contacts-top">
<?php if(get_theme_mod('andaman_top_contact_address', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_address', '455 Martinson, Los Angeles')); ?></li><?php }; ?>
<?php if(get_theme_mod('andaman_top_contact_phone', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_phone', '+1 (043) 567-8930')); ?></li><?php }; ?>
<?php if(get_theme_mod('andaman_top_contact_hours', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_hours', 'Mon-Sut: 10 AM-8 PM')); ?></li><?php }; ?>
</ul>
<?php }; ?>
</div>
<div class="col-lg-2 col-md-3 col-sm-12 col-xs-12">
<ul class="soc-top">
<?php if ( is_plugin_active( 'polylang/polylang.php' )) { ?>
<li class="lang"><span><img src="<?php echo get_stylesheet_directory_uri(). '/assets/images/lang-' . pll_current_language('slug') . '.png'; ?>" width="24" height="24" alt=""> <?php echo pll_current_language('name'); ?></span>
<ul class="lang-ul">
<?php $languages = pll_the_languages( array('raw'=> true, 'hide_if_no_translation'=>true, 'hide_current'=>true) );
foreach ($languages as $language ) {
echo '<li><img src="'.get_stylesheet_directory_uri(). '/assets/images/lang-'.$language['slug'].'.png" width="24" height="24" alt="'.$language['slug'].'">' .$language['name'].'</li>'; }; ?>
</ul>
</li>
<?php }; ?>
</ul>
</div>
</div>
</div>
</div>
<?php } else { ?>
<div class="header style2 no-bar">
<?php };?>
<div class="sticky-menu">
<div class="container">
<div class="menu-flex">
<div class="logo">
<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php bloginfo( 'name' ); ?>" rel="home">
<?php if(get_theme_mod('andaman_logo_upload', 'enable') == true) { ?>
<img src="<?php echo esc_url(get_theme_mod('andaman_logo_upload', get_template_directory_uri() . '/assets/images/logo.png')); ?>" alt="<?php the_title_attribute(); ?>" style="height: <?php echo esc_attr(get_theme_mod('andaman_logo_height', '45px')); ?>;">
<?php } else { ?>
<h1 style="margin:0;"><?php echo the_title(); ?></h1>
<?php } ?>
</a>
</div>
<?php if(get_theme_mod('andaman_menu_select', 'standard') == 'standard') { ?>
<div class="menu-responsive desktop">
<div class="navbar-main-collapse pull-left responsive-menu">
<?php wp_nav_menu( array(
'theme_location' => 'menu',
'container' => false,
'menu_class' => 'nav navbar-nav',
'sort_column' => 'menu_order',
'walker' => new Andaman_My_Walker_Nav_Menu(),
'fallback_cb' => 'andaman_MenuFallback'
)); ?>
</div>
</div>
<div class="menu-responsive mobile">
<div class="burger_andaman_normal_holder"><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="burger_andaman_menu_overlay_normal">
<div class="burger_andaman_menu_vertical">
<?php wp_nav_menu( array(
'theme_location' => 'menu',
'menu_class' => 'burger_andaman_main_menu',
'depth' => 3,
)); ?>
</div>
</div>
</div>
<?php } else { ?>
<div class="menu-responsive desktop">
<div class="navbar-main-collapse pull-left responsive-menu">
<?php wp_nav_menu( array(
'theme_location' => 'onepage-menu',
'container' => false,
'menu_class' => 'nav navbar-nav share-class',
'menu_id' => 'menu-onepage',
'sort_column' => 'menu_order',
'walker' => new Andaman_My_Walker_Nav_Menu(),
'fallback_cb' => 'andaman_MenuFallback'
)); ?>
</div>
</div>
<div class="menu-responsive mobile">
<div class="burger_andaman_normal_holder"><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="burger_andaman_menu_overlay_normal">
<div class="burger_andaman_menu_vertical">
<?php wp_nav_menu( array(
'theme_location' => 'onepage-menu',
'menu_class' => 'burger_andaman_main_menu share-class',
'menu_id' => 'menu-onepage',
'depth' => 1,
)); ?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
This is happening because one of your stylesheet hiding the li.lang between mentioned width, I have provided you CSS, you can paste it inside the stylesheet.
#media screen and (max-width:990px){
li.search, li.lang {
display: block !important;
}
}
Screenshot of your CSS: (You have to change display: none to display: block)
Thank you #Gamers Agenda for your quick and accurate answer.
The changes I made with your help:
#media screen and (max-width:990px){
.soc-top {
float: right;
margin-right: 30px;
}
li.search, li.lang {
display: block !important;
}
}
This will do:
Your style:
#media (max-width: 767px)
.header.style2 .soc-top {
float: none !important;
text-align: center;
}
remove float: none !important; and be like:
#media (max-width: 767px)
.header.style2 .soc-top {
text-align: center;
}
The title of my featured article is positioned via css, but the results are not showing up properly in every screen.
I tried to place "mvp-feat2-main-text" element before "mvp-feat2-main left relative".
Problem: Text is shown behind the image. I need the text to show on top of the image.
Here is the relevant code:
<section id="mvp-feat2-wrap" class="left relative">
<?php global $do_not_duplicate; global $post; $recent = new WP_Query(array( 'tag' => get_option('mvp_feat_posts_tags'), 'posts_per_page' => '1' )); while($recent->have_posts()) : $recent->the_post(); $do_not_duplicate[] = $post->ID; ?>
<div class="mvp-feat2-main left relative">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<div class="mvp-feat2-main-img left relative">
<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { ?>
<?php the_post_thumbnail('mvp-post-thumb', array( 'class' => 'mvp-reg-img' )); ?>
<?php the_post_thumbnail('mvp-mid-thumb', array( 'class' => 'mvp-mob-img' )); ?>
<?php } ?>
<?php if ( has_post_format( 'video' )) { ?>
<div class="mvp-feat-vid-but">
<i class="fa fa-play fa-3"></i>
</div><!--mvpfeat-vid-but-->
<?php } else if ( has_post_format( 'gallery' )) { ?>
<div class="mvp-feat-gal-but">
<i class="fa fa-camera fa-3"></i>
</div><!--mvpfeat-gal-but-->
<?php } ?>
</div><!--mvp-feat2-main-img-->
<div class="mvp-feat2-main-text">
<h3 class="mvp-feat2-main-cat left"><span class="mvp-feat2-main-cat left"><?php $category = get_the_category(); echo esc_html( $category[0]->cat_name ); ?></span></h3>
<div class="mvp-feat2-main-title left relative">
<?php if(get_post_meta($post->ID, "mvp_featured_headline", true)): ?>
<h2><?php echo esc_html(get_post_meta($post->ID, "mvp_featured_headline", true)); ?></h2>
<?php else: ?>
<h2 class="mvp-stand-title"><?php the_title(); ?></h2>
<?php endif; ?>
</div><!--mvp-feat2-main-title-->
<div class="mvp-feat1-info">
<span class="mvp-blog-author"><?php esc_html_e( 'By', 'click-mag' ); ?> <?php the_author(); ?></span><span class="mvp-blog-date"><i class="fa fa-clock-o"></i><span class="mvp-blog-time"><?php the_time(get_option('date_format')); ?></span></span>
</div><!--mvp-feat1-info-->
</div><!--mvp-feat2-main-text-->
</a>
</div><!--mvp-feat2-main-->
Try to use
style="z-index:value">
on your html at then end where you want to have your element appear ontop of the image
Example:
<div class="mvp-feat2-main-text" style="z-index:99;">
the z-index value must larger then the z-index of the image so try to increase that value until it appears ontop.
I'm using bootstrap to create my page templates for a wordpress site but I am having trouble getting my dropdown nav to work when I add a child in the wordpress menu screen.
Here is my header code...
<body id="grad1">
<div class="mynavbar">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-1">
<img src="/wp-content/uploads/2015/07/logo_80px.png" class=" center-block space" alt="Enter OmniMark here"/>
</div>
<div class="col-md-6 col-sm-6 col-xs-0">
</div>
<div class="col-md-3 col-sm-3 col-xs-1">
<img src="/wp-content/uploads/2015/07/OMsemicircle.png" class=" center-block space" alt="Enter OmniMark here"/>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<div class="container-fluid" id="fontfix">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="center-block">
<div class="collapse navbar-collapse column " id="navbar-collapse-2">
<ul class="nav navbar-nav">
<!--<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>News</li>
<li>Contact</li>-->
<?php /* Primary navigation */
wp_nav_menu( array(
'menu' => 'menu 1',
'depth' => 0,
'container' => false,
'container_class' => 'collapse navbar-collapse column',
'container_id' => 'navbar-collapse-2',
'menu_class' => 'nav navbar-nav',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
<!--Used to list nav and exclude pages-->
<!--<?php wp_list_pages(array('title_li' => '', 'exclude' => '615, 14',)); ?>-->
<li>Store</li>
</ul>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="module top widewrapper center-block">
<h1><span class="fontgreen">Thin Film</span><span class="fontblue"> Product Markings</span></h1>
<p class="darktext">The world is full of products and brands whose image gets lost in the white noise of modern society. The Lauterbach Group protects your brand’s unique and inspiring image with film product markings. Thin film product markings provide exceptional decoration options, increased production efficiencies and supply chain savings with an environmental focus.</p>
<!--<img class="center-block" src="/wp-content/uploads/2015/07/homepage_800.png" alt="" />-->
</div>
<div class="container mainbump">
I can also provide the functions code if that will help...
<?php
//trying to register menu
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
if ( ! function_exists( 'wpt_setup' ) ):
function wpt_setup() {
register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
} endif;
// Register custom navigation walker
require_once('wp_bootstrap_navwalker.php');
//menu registery
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'sidebar',
'id' => 'sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'footer',
'id' => 'footer',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'sidebarmenu',
'id' => 'sidebarmenu',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>
The 'depth' value in the array is 0, you should change it to 2 or 3 if you want more.
Here's my example for the Wordpress wp_bootstraap_navkwalker() function.
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!--end navbar-header-->
<div class="collapse navbar-collapse menu-primary" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu( array(
'menu' => '',
'theme_location' => 'primary',
'depth' => 3,
'container' => '',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!--end navbar-colapse-->
</div><!--end container-->
</nav>
Try that and you should be good.
In the loop i have 4 wordpress services , I want to change second service background color ,when I apply css background property it is apply on all the services .
my template code
<div class="row">
<?php
$i=1;
$default_arg =array('class' => "index_ser_img img-responsive" );
$total_services = $current_options['service_list'];
$args = array( 'post_type' => 'rambopro_service','posts_per_page' =>$total_services) ;
$service = new WP_Query( $args );
if( $service->have_posts() )
{ while ( $service->have_posts() ) : $service->the_post();
$link=1;
$service_icon_image = get_post_meta( get_the_ID(),'service_icon_image', true );
$meta_service_description = get_post_meta( get_the_ID(),'meta_service_description', true );
if(get_post_meta( get_the_ID(),'meta_service_link', true ))
{ $meta_service_link = sanitize_text_field( get_post_meta( get_the_ID(),'meta_service_link', true )) ; }
else
{ $link=0; }
?>
<div class="span3 home_service">
<?php if(has_post_thumbnail()){ ?>
<span class="icon_align_center">
<?php if($link==1) { ?>
<a href="<?php echo $meta_service_link;?>" target="<?php if(get_post_meta( get_the_ID(),'meta_service_target', true )) echo "_blank"; ?>" >
<?php
the_post_thumbnail('',$default_arg);?>
</a> <?php } else { the_post_thumbnail('',$default_arg); } ?> </span>
<?php } else { ?>
<span class="fa-stack fa-4x icon_align_center">
<?php if($link==1) { ?>
</i>
<?php } else { ?> <i class="fa <?php echo $service_icon_image; ?> home_media_icon_1x fa-inverse"></i>
<?php } ?>
</span>
<?php } if($link==1) {?>
<a href="<?php echo $meta_service_link;?>" target="<?php if(get_post_meta( get_the_ID(),'meta_service_target', true )) echo "_blank"; ?>" ><h2><?php echo the_title(); ?></h2></a>
<?php } else { echo '<H2>'; echo the_title() ; echo '</h2>' ; }?>
<p><?php echo $meta_service_description; ?></p>
</div>
<?php if($i%4==0){ echo "<div class='clearfix'></div>"; } $i++; endwhile;
} else
{ for($j=1; $j<=4; $j++) { ?>
<div class="span3 home_service">
<span class="fa-stack fa-4x icon_align_center">
<i class="fa fa-flag home_media_icon_1x fa-inverse"></i>
</span>
<h2><?php _e('Html5 & Css3',''); ?></h2>
<p><?php _e('Mauris rhoncus pretium porttitor. Cras scelerisque commodo odio. Phasellus dolor enim, faucibus egestas scelerisque hendrerit, aliquet sed lorem.','rambo');?></p>
<!-- <a class="home_service_btn" href="#"><i class="fa fa-angle-double-right"></i><?php _e('Read More','rambo');?></a> -->
</div>
<?php }
} ?>
</div>
<!-- /Home Service Section -->
link
http://webriti.com/demo/wp/rambo/
You can do this two ways:
1) Create a class with the background color you need and add it to the second service:
.grey{
background-color: #ececec;
}
<div class="span3 home_service grey">
...
</div>
2) Or like ChaoticNadirs mentioned, use nth-child() to add only a CSS property that targets only the second service:
.span3.home_service:nth-child(2) {
background-color: #ececec;
}