Jump to content


Photo

Adding Feature Boxes - Alignment


  • Please log in to reply
6 replies to this topic

#1 keithdunlop

keithdunlop

    Member

  • Members
  • PipPip
  • 16 posts

Posted 28 October 2011 - 08:00 PM

I want to add a 4th feature box and have it on the same row with the default three with even alignment. When I add the 4th box in the feature setup screen, it automatically gets bumped to a second row on my home page. I couldn't find any placement/alignment tools. http://www.keithdunlop.com Thanks!

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 29 October 2011 - 03:45 PM

You'll need to use CSS to resize the boxes so that they can fit in on a single row.

#3 keithdunlop

keithdunlop

    Member

  • Members
  • PipPip
  • 16 posts

Posted 30 October 2011 - 06:31 PM

"You'll need to use CSS to resize the boxes" -- Probably a more helpful comment to a programmer. I guess I'll have to dig around on my own and try to figure out what to do. Thanks.

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 October 2011 - 12:07 AM

Keith,

If you FTP into your site and go to wp-content/themes/whitehousepro/pro/ look for template_fboxes.php Make a backup copy on your desktop.

Edit the file and look for this:
 <div class="clear"></div>
Try commenting it out by doing this:
 //<div class="clear"></div>

Save and re-load the file. See of this helps. If it doesn't, I'm off the hook owing Danny a few beers. If it does, I owe him lunch to go with them.

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 October 2011 - 12:08 AM

Oh, if you run into any difficulties, just upload the backup copy you made to the same folder.

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15269 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 31 October 2011 - 12:10 AM

Hi Keith,

This will require editing the core code and therefore I would recommend you create a child theme, otherwise whenever their is an update to Whitehouse Pro, your edits of the core code will be overwritten. You can of course simply change this everytime as its only one line of code, but making a child theme will save messing around everytime an update is available.

Check out the link below, which is instructions about child theming.
http://www.pagelines...ase-child-theme

To make the all the boxes aligned follow these instructions:

1. Using your favourite FTP client, navigate to "/wp-content/themes/whitehousepro3_dev/pro/" and open the file called "template_fboxes.php".

2. Once the file is open, it should look similar to this below:

 
	<div class="fboxes fix">
		<div class="fboxdividers fix">
			<?php
			// inserts a clearing element at the end of each line of boxes
			$perline = 3;
			$total = count(pagelines('fboxes'));
			$count = 1;?>
			<?php foreach(pagelines('fboxes') as $fbox):?>
	
				<?php if(showfeature($fbox['page'], $post->ID) && !isset($fbox['draft']) && isset($fbox['text']) && !empty($fbox['text'])):?>
					<div class="fbox">
						<div class="fboxcopy">
							<div class="fboxtitle"><?php echo do_shortcode($fbox['title']);?></div>
							<div class="fboxtext"><?php echo do_shortcode($fbox['text']);?></div>
	
						</div>
					</div>
	
					<?php if($count % $perline == 0 && $count != $total):?>
	
						<div class="clear"></div> <---REMOVE THIS LINE & SAVE THE FILE
	
					<?php endif;?>
					<?php $count++;?>
				<?php endif;?>
			<?php endforeach;?>
		</div>
	</div>
	<div class="clear"></div>

I have added this to the code above: <---REMOVE THIS LINE & SAVE THE FILE

Delete that line of code and save the file.

3. Now you will need to add some custom css, as the width of the boxes is to large. I have added the code below you need, but you may have to adjust the width to match your sites.

 
	/* CHANGE THE WIDTH TO MATCH TO FIT YOUR LAYOUT */
	.fboxes .fbox { width: 239px; }

4. The code below is optional and not needed, but I've added a description as to what each does and you may find useful.

 
	/* YOU MAY WANT TO REMOVE THE DIVIDER, ADD THIS IF YOU WISH TO */
	.fboxdividers { background: transparent !important; }
	
	/* ADD THIS TO RESIZE YOUR IMAGES TO FIT YOUR NEW BOX WIDTH */
	.fboxtext img { width: 90%; }


#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 October 2011 - 12:32 AM

Stick with Danny's solution. He's brilliant. Deserves beer and lunch!