long time reader first time poster. I downloaded a theme for wordpress recently and i'm trying to edit it but am having difficulty. I know a bit of css but php is slightly out of my capability. So anyway I have 3 excepts of pages which show up on the main page. I would like to give them different background colours. I've managed to give the first two the same colour and the last a different one. I would like to give the middle one a different color as well, but i don't know how to. It seems that the div control is managed through php. Here is the php code:
<?php if ( get_option('chameleon_display_blurbs') == 'on' ){ ?>
<div id="services" class="clearfix">
<?php for ($i=1; $i <= 3; $i++) { ?>
<?php query_posts('page_id=' . get_pageId(html_entity_decode(get_option('chameleon_home_page_'.$i)))); while (have_posts()) : the_post(); ?>
<?php
global $more; $more = 0;
?>
<div class="service<?php if ( $i == 3 ) echo ' last'; ?>">
And here is the css code:
#services { margin-bottom: 40px; }
.service { float: left; width: 244px; margin-right: 66px; background:#000; } .last { margin-right: 0px; background:#0F0; }
So just to reiterate, I just want to be able to apply a different colour to the middle div.
website address:
Thank you and any help would be much appreciated!
I think the easiest way would be to change this line:
<div class="service<?php if ( $i == 3 ) echo ' last'; ?>">
to
<div class="service<?php if ( $i == 3 ) echo ' last'; ?> service-<?php echo $i; ?>">
That will give each div a different class (service-1, service-2, and service-3) which you can style separately.
Related
I have a set of case studies which vary in size. Like so:
| Large | Large |
|Small | Small | Small |
| Large | Large |
...
I'm trying to run a loop which will check if the case study is the first or second result pulled, if so, use .case-card--large CSS, else use the default .case-card CSS.
I'm unsure on how to use select classes if the loop condition is true?
In plain English: if first two results, use .case-card--large, then for the next three use .case-card, then again, use .case-card--large for the next two and so on.
Here's my loop so far (incomplete):
<?php
$counter = 1;
$loop = new WP_Query( array( 'post_type' => 'case-studies') );
while ( $loop->have_posts() ) : $loop->the_post();
if ($counter % 3 == 1){
echo 'alpha';
} else {
echo 'omega';
}
$counter++ ;
endwhile
?>
Output: alpha omega omega alpha omega, when I need it to be alpha alpha omega omega omega.
The div and CSS:
.case-card--large {
width: 50%;
border: 1px solid red;
}
.case-card {
text-align: center;
padding: 40px;
width: 33%;
}
<div class="case-card case-card--large" <?php echo tp_bg_image($background, 'full' ); ?>
<div class="wrapper">
<p>ID:
<?php the_ID(); ?>
</p>
<h1>
<?php echo $heading; ?>
</h1>
<p>
<?php echo $subheading; ?>
</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#case-study-video">
Click me
</button>
</div>
</div>
Is a loop the right away to go about this?
I am trying to display a 'meet the team' page in a 2x5 table, working with code written by the previous web designer in Wordpress.
This is the page I am looking at - http://www.stirling-house.com/about-us/meet-the-team As I say, I want to display the pictures in a table, so it looks neater.
The code I have is -
<div id="maintext">
<h1>MEET THE TEAM</h1>
<h3>THE STIRLING HOUSE ADMINISTRATION TEAM</h3>
<?php $members =get_posts('numberposts=99&cat=4&order=ASC'); //print_r($members);
foreach ($members as $post) {
setup_postdata($post);?>
<div class="member-box">
<img src="<?php echo get('member_photo');?>" alt="" style="margin:5px 7px 0 0;" />
<h3><?php echo $post->post_title;?></h3>
<h4><?php echo get('member_designation');?></h4>
Can anyone help?!
One way of doing it is by adding a counter before the foreach (for example, $n), initialize it to zero and increment it every time the loop finishes. Then, make all the odd divs float to the left and the even ones float to the right.
This is how the code would look like (more or less):
<?
$n = 0; // Counter
foreach($members as $post){
if($n % 2) $style="float:left";
else $style="float:right";
<img src="<?php echo get('member_photo');?>" alt="" style="margin:5px 7px 0 0;" />
<h3><?php echo $post->post_title;?></h3>
<h4><?php echo get('member_designation');?></h4>
If that does not work, you can try using a table layout and placing a <tr> tag after $n rows (resetting the counter every time you add a <tr>).
It is the opinion of most web designers (post-2005 or so) that <table> elements should not be used for layout/design. If you add the following CSS rule to your sites, stylesheet:
.member-box { display: inline-block; }
You will get something that looks like this: http://imgur.com/DzEkLAU
Sorry to answer indirectly, but I think this is the answer you're really looking for... ;)
I created a page to display messages that are saved into a database.The messages are displayed with a picture. I have the following DIV layout:
<div id="MessageWrapper">
<div id="MessagePicture"></div>
<div id="MessageText">
<div id="MessageTitle"></div>
<div id="MessageContent"></div>
</div>
</div>
I wanted the div 'MessagePicture' and 'MessageText' to alternate their position (left and right) So The final code I have is:
$i = 0;
while ($Row = mysql_fetch_assoc($Result))
{
$class = (++$i % 2) ? 'even' : 'odd';
echo '
<div id="MessageWrapper">
<div id="MessagePicture" class="'.$class.'">
<style>
#MessagePicture {
background-image: url(../../../Images/'.stripslashes($Row['Code']).'.png);
background-repeat: no-repeat;
background-position: center
</style>
</div>
<div id="MessageText" class="'.$class.'">
<div id="MessageTitle">
<h1>'.$Row['NameBox'].'</h1>
</div>
<div id="MessageContent">
<p>'.nl2br($Row['MessageBox']).'</p>
</div>
</div>
</div>
The problem I'm facing: although the parsed source code has different codes ($Row['Code']) in the url of the background image, all the messages display the same image.
It is always the first image of the first ($Row['Code']) that is entered into the database.
Does anyone know how to resolve this problem?
Give each of your divs a unique id. For example:
$i = 0;
while ($Row = mysql_fetch_assoc($Result))
{
$class = (++$i % 2) ? 'even' : 'odd';
echo '
<div id="MessageWrapper'.$i.'">
<div id="MessagePicture'.$i.'" class="'.$class.'">
<style>
#MessagePicture'.$i.' {
background-image: url(../../../Images/'.stripslashes($Row['Code']).'.png);
}
</style>
... etc ...
}
You end up with the first div having an id of MessagePicture1 and a corresponding #MessagePicture1 style, the next one MessagePicture2, and so on.
I have this loop which basically displays a block on the page with an image in it, the class gallerypic has a margin of 20px on the right, it also has the rule float:left;, the issue is every time the third div is created it starts on a new line, because the margin is pushing it there. So Ideally every third post I would like no margin, and to apply a div gallerypicright or something.
Im wondering does someone have a solution to this? Possibly an easier one that simply stops the margin from happening when its the third one? I need the margin on the other two as it creates a neat gap between the posts.
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$archive_query = new WP_Query('cat=14&showposts=14&paged=' . $paged);
$id = get_the_ID();
while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
<div class="events">
<div class="gallerypic"><div class="limerickguideblockheader"><p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?>
</div>
<div class="gallerypiccontainer"><a href="<?php the_permalink(); ?>" >
<?php echo get_the_post_thumbnail( $id, 'gallery-thumb', $attr ); ?> </a></div>
</div>
</div>
<?php endwhile; ?>
edit: a picture paints a 1000 words, here is the link so far, with three posts...
http://limerickfc.hailstormcommerce.com/cms/?page_id=2466
A method via CSS would be even better if possible.
Cheers
Adrian
Try the below code.
<style>
.gallerypicright {
margin: 0;
}
</style>
...
<?php
$count = 0;
while ($archive_query->have_posts()) : $archive_query->the_post();
$count++;
$third_div = ($count%3 == 0) ? 'gallerypicright' : '';
?>
...
<div class="gallerypic <?php echo $third_div; ?>">
If you want a pure CSS solution, you could try using
.gallerypic:nth-child(3n + 1) {
margin:0;
}
n is a counter that goes up for every element. The counter (n) starts at 0 but the elements on the page start at 1, so the 3n + 1 means for every 3 * n + 1 elements, e.g.:
element 1 (3 * 0 + 1), 4 (3 * 1 + 1), 7 (3 * 2 + 1) etc.
This solution is only available in CSS3, so older browsers won't have it. (see: http://caniuse.com/#search=nth-child).
Note that :nth-child counts all children, so you should group the events in a div:
<div class="container">
<div class="gallerypic">...</div>
<div class="gallerypic">...</div>
<div class="gallerypic">...</div>
</div>
you have to count your post after that in loop you have to module by 3 to total no of post & apply the right class in given post such as
if ($cnt%3 == 0){ $class = 'right'}
You might try the trick of adding a balancing negative right margin on your container, so in your case, perhaps
div.events { margin-right: -20px; }
Or, if you can cope with the slightly patchy browser support (IE9+ only, better in other browsers, I think) perhaps style using nth-child:
.gallerypic:nth-child(3n+3) { margin-right: 0px; }
I am trying to integrate a small section on an existing website, my problem seems simple, but I can't seem to get my head around it. Here is how I want it to look like:
alt text http://img691.imageshack.us/img691/329/layouth.jpg
Blue = #pagecontainer
Red = #sectioncontainer
Yellow = .post
pagecontainer { height: 100%; width: 900px;}
post container {width: 900px;}
.post {width: 210px;}
Four posts are getting pulled in from WordPress using:
<?php if (have_posts()) : ?>
<?php query_posts('category_name=Category&posts_per_page=4'); ?>
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?>
<div class="post">
<?php the_content() ?>
</div>
<?php endwhile; ?>
The posts will be a fixed width, but a varied height. The problem is, I cannot put spacers in-between, without the last post pushing a div underneath, and I cannot use margins because the first and last div are bumped up against the page container.
I could probably use something like
.post {margin-right: 20px;}
.post:last-child {margin: 0 !important;}
...but this just seems messy and I would rather avoid using the child pseudo selectors.
Any ideas on a tidier solution?
You can use a $count
Something like:
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?>
<?php $count++; ?>
<?php if ($count < 5) {
$class = 'post';
} else {
$class = 'post-last';
} ?>
<div class="<?php echo $class; ?>">
<?php the_content() ?>
</div>
<?php endwhile; ?>
Then just set your 'post' class in the CSS to have the margin of 20px and 'post-last' to not have a margin
Try to use margin-based solution, but instead of :last-child trick that is unfortunately isn't cross-browser, set parent's margin at right side to equivalent negative value:
.post {margin-right: 20px;}
.secioncontainer {margin-right: -20px;}
Also make sure that there will be no spaces in-between of the .posts. You could modify the markup so that it is written in one line without spaces:
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?><div class="post"><?php the_content() ?></div><?php endwhile; ?>
Or use CSS technique like:
.secioncontainer {font-size: 0px;}
.post {font-size: /*your normal value*/;}