Jump to content

Background shading with ipsGrid


NoGi
 Share

Go to solution Solved by Tom S.,

Recommended Posts

I am using ipsGrid to present a 3 x wide grid layout and want to shade each grid but have a clear (not white) border so that each grid item is separated by the theme background colour/image. I seem to have vertical splits looking fine but it's not splitting on the horizontal. So, it looks like 3 really long singular columns atm.

I am using the following code:

<div class='ipsGrid ipsGrid_collapsePhone'>
	{{foreach $rows as $row}}
  	<div class='ipsGrid_span4' style='border:2px #f0f0f5; background: #f0f0f5;'>
      	[some stuff]
	</div>
</div>

I thought that padding was what I needed to use but it doesn't give me the desired result, instead padding only the RHS side of the box. 

Link to comment
Share on other sites

If I understand where you want the padding applied, it should be in this bit of code:

<div class='ipsGrid_span4' style='border:2px solid #f0f0f5; background: #f0f0f5; padding: 4px;'>

The padding declaration will put 4px of padding on the div, and should allow the border and the background color to show behind the elements inside the DIV. Being an inline style, this should override any styles set by the ipsGrid_span4 class.

Link to comment
Share on other sites

2 minutes ago, NoGi said:

@Tom S., where is that inserted? Doesn't look like the syntax used in the recordRow HTML template I am in

Sorry I didn't make it clear.

That's a css line so you can simply put it in custom.css found Customization->Edit HTML & CSS->CSS tab->custom.css

Alternatively, you can add it to recordRow by wrapping it in style tags like this:

<style>
  body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] h4.ipsDataItem_title img
{
	padding: 10px;
}
</style>

 

Link to comment
Share on other sites

So, instead of this:

<div class='ipsGrid'class='ipsDataItem_main' align="middle" style='border:2px solid #f0f0f5; background: #f0f0f5;'>

I should try:

<div class='ipsGrid'class='ipsDataItem_main' align="middle" style='border:2px solid #f0f0f5; background: #f0f0f5;'>
	<style>
  		body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] h4.ipsDataItem_title img
		{
			padding: 10px;
		}
	</style>

	rest of code

</div>
Link to comment
Share on other sites

Just now, NoGi said:

So, instead of this:


<div class='ipsGrid'class='ipsDataItem_main' align="middle" style='border:2px solid #f0f0f5; background: #f0f0f5;'>

I should try:


<div class='ipsGrid'class='ipsDataItem_main' align="middle" style='border:2px solid #f0f0f5; background: #f0f0f5;'>
	<style>
  		body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] h4.ipsDataItem_title img
		{
			padding: 10px;
		}
	</style>

	rest of code

</div>

No, more like this (stick it at the bottom of the template)

<div class='ipsGrid'class='ipsDataItem_main' align="middle" style='border:2px solid #f0f0f5; background: #f0f0f5;'>


	rest of code

</div>

<style>
	body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] h4.ipsDataItem_title img
	{
		padding: 10px;
	}
</style>

 

Link to comment
Share on other sites

11 minutes ago, NoGi said:

Aaaah ok, padding seems to work but I seem to have lost my grid look and it's gone back to long grey columns again lol

I've taken a closer look. Your structure is all wrong.

You currently have this set up:

<div class="ipsGrid ipsGrid_collapsePhone">
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
</div>
   

What you want is this

<div class="ipsGrid ipsGrid_collapsePhone">
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
</div>
<div class="ipsGrid ipsGrid_collapsePhone">
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
</div>
<div class="ipsGrid ipsGrid_collapsePhone">
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
  <div class="ipsGrid_span4"></div>
</div>

Then inside the <style> tag add this line

body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] div.ipsGrid
{
	margin-bottom: 10px;
}

 

Link to comment
Share on other sites

I don't actually specify 3 columns, it drops to a single column if viewing on a smaller screen. Using your last example, brings me back to the other issue, where I get my grid layout but lose the image padding as the top edge of the image is where the top edge of the box is.

Thanks for your help btw

This is the page code:

{{$rowIds = array();}}
{{foreach $rows as $row}}
	{{$idField = $row::$databaseColumnId;}}
	{{$rowIds[] = $row->$idField;}}
{{endforeach}}
{{$iposted = ( $table AND method_exists( $table, 'container' ) AND $table->container() !== NULL ) ? $table->container()->contentPostedIn( null, $rowIds ) : array();}}

<div class='ipsGrid ipsGrid_collapsePhone'>
{{foreach $rows as $row}}
  	<div class='ipsGrid_span4' >
	{{$idField = $row::$databaseColumnId;}}
	<li class="cCmsRecord_row ipsDataItem ipsDataItem_responsivePhoto {{if $row->unread()}}ipsDataItem_unread{{endif}} {{if method_exists( $row, 'tableClass' ) && $row->tableClass()}}ipsDataItem_{$row->tableClass()}{{endif}} {{if $row->hidden()}}ipsModerated{{endif}}" data-rowID='{$row->$idField}'>
		{{if member.member_id}}
			<div class='ipsDataItem_icon ipsPos_top'>
				{{if $row->unread()}}
					<a href='{$row->url( 'getNewComment' )}' title='{lang="first_unread_post"}' data-ipsTooltip>
						<span class='ipsItemStatus'><i class="fa {{if in_array( $row->$idField, $iposted )}}fa-star{{else}}fa-circle{{endif}}"></i></span>
					</a>
				{{else}}
					{{if in_array( $row->$idField, $iposted )}}
						<span class='ipsItemStatus ipsItemStatus_read ipsItemStatus_posted'><i class="fa fa-star"></i></span>
					{{else}}
						&nbsp;
					{{endif}}
				{{endif}}
			</div>
		{{endif}}
		<div class='ipsGrid'class='ipsDataItem_main' align="middle" style='border:2px solid #f0f0f5; background: #f0f0f5;'>
			<h4 class='ipsDataItem_title ipsType_break'>
				{{if $row->locked()}}
					<i class='fa fa-lock' data-ipsTooltip title='{lang="content_locked_record"}'></i>
				{{endif}}

				{{if $row->isFutureDate() || $row->mapped('pinned') || $row->mapped('featured') || $row->hidden() === -1 || $row->hidden() === 1}}
					<span>
						{{if $row->isFutureDate()}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->futureDateBlurb()}'><i class='fa fa-clock-o'></i></span>
						{{elseif $row->hidden() === -1}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span>
						{{elseif $row->hidden() === 1}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span>
						{{endif}}							
						{{if $row->mapped('pinned')}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span>
						{{endif}}
						{{if $row->mapped('featured')}}
							<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span>
						{{endif}}
					</span>
				{{endif}}
									
				{{if $row->prefix()}}
					{template="prefix" group="global" app="core" params="$row->prefix( TRUE ), $row->prefix()"}
				{{endif}}

   				<a href='{$row->url()}'><img src="{file="$row->record_image_thumb" extension="cms_Records"}" height="210" width="280" /></a>
 				<h2><a href='{$row->url()}'>
    				<span class="ipsTruncate ipsTruncate_line">{{if $row->_title}}{$row->_title}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}}</span>
   				</a></h2>
             
          </h4>
          
			{{if $row->commentPageCount() > 1}}
				{$row->commentPagination( array(), 'miniPagination' )|raw}
			{{endif}}
			{{if count( $row->customFieldsForDisplay('listing') )}}
				<div class='ipsDataItem_meta'>
				{{foreach $row->customFieldsForDisplay('listing') as $fieldId => $fieldValue}}
					{{if $fieldValue}}
						{$fieldValue|raw}
					{{endif}}
 				{{endforeach}}
				</div>
			{{endif}}
			<div class='ipsDataItem_meta ipsType_blendLinks'>
				<p class='ipsType_reset ipsType_light'>{lang="byline" htmlsprintf="$row->author()->link( $row->warningRef() )"}{datetime="$row->_publishDate"}</p>
			</div>
		<ul class='ipsDataItem_stats'>
          	{{if $row::database()->options['reviews']}}
				<li>
					<ul class='ipsList_inline ipsList_noSpacing_left ipsClearfix ipsRating ipsRating_{{if \IPS\Settings::i()->reviews_rating_out_of > 5}}small{{else}}large{{endif}}'>
						{{foreach range( 1, \IPS\Settings::i()->reviews_rating_out_of ) as $i}}
							<li class='{{if $row->averageReviewRating() >= $i}}ipsRating_on{{else}}ipsRating_off{{endif}}'>
								<i class='fa fa-star'></i>
							</li>
						{{endforeach}}
					</ul>
				</li>
			{{endif}}
		</ul>

		{{if $table and $table->canModerate()}}
			<div class='ipsDataItem_modCheck'>
				<span class='ipsCustomInput'>
					<input type='checkbox' data-role='moderation' name="moderate[{$row->$idField}]" data-actions="{expression="implode( ' ', $table->multimodActions( $row ) )"}" data-state='{{if $row->tableStates()}}{$row->tableStates()}{{endif}}'>
					<span></span>
				</span>
			</div>
		{{endif}}
		</div>
	</li>
	</div>
{{endforeach}}
</div>

<style>
	body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] div.ipsGrid
	{	
		margin-bottom: 10px;
	}
</style>

 

Link to comment
Share on other sites

  • Solution

Make sure you keep the other line...

<style>
	body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] h4.ipsDataItem_title img
	{
		padding: 10px;
	}
	body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] div.ipsGrid
	{
		margin-bottom: 10px;
	}
</style>

 

Link to comment
Share on other sites

2 minutes ago, Tom S. said:

Make sure you keep the other line...


<style>
	body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] h4.ipsDataItem_title img
	{
		padding: 10px;
	}
	body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] div.ipsGrid
	{
		margin-bottom: 10px;
	}
</style>

 

Perfect thank you very much for your assistance. Now onto my last issue if anyone else knows:

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...