NoGi Posted September 26, 2016 Share Posted September 26, 2016 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 More sharing options...
Joy Rex Posted September 26, 2016 Share Posted September 26, 2016 on the border: declaration, you need the border-type property, e.g. "border: 2px solid #f0f0f5;" Not sure that solves your issue (a visual would help), but I noticed the border-type shorthand was missing. Link to comment Share on other sites More sharing options...
NoGi Posted September 26, 2016 Author Share Posted September 26, 2016 Not really but I have cleaned up the declaration as per your suggestion anyway, this is the issue: Link to comment Share on other sites More sharing options...
NoGi Posted September 26, 2016 Author Share Posted September 26, 2016 Actually, I kind of worked it out. I had it on the wrong DIV. The only issue I have now is that I still can't add padding, my image is right up the top blocking the background colour, thus removing my trimming. Link to comment Share on other sites More sharing options...
Tom S. Posted September 27, 2016 Share Posted September 27, 2016 Could you link to a working example? Link to comment Share on other sites More sharing options...
Joy Rex Posted September 27, 2016 Share Posted September 27, 2016 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 More sharing options...
NoGi Posted September 27, 2016 Author Share Posted September 27, 2016 12 hours ago, Tom S. said: Could you link to a working example? I'll PM as it's behind .htaccess 6 hours ago, Joy Rex said: it should be in this bit of code: No, that didn't seem to do much unfortunately. Link to comment Share on other sites More sharing options...
Tom S. Posted September 27, 2016 Share Posted September 27, 2016 Try this: body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] h4.ipsDataItem_title img { padding: 10px; } Link to comment Share on other sites More sharing options...
NoGi Posted September 27, 2016 Author Share Posted September 27, 2016 @Tom S., where is that inserted? Doesn't look like the syntax used in the recordRow HTML template I am in Link to comment Share on other sites More sharing options...
Tom S. Posted September 27, 2016 Share Posted September 27, 2016 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 More sharing options...
NoGi Posted September 27, 2016 Author Share Posted September 27, 2016 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 More sharing options...
Tom S. Posted September 27, 2016 Share Posted September 27, 2016 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 More sharing options...
NoGi Posted September 28, 2016 Author Share Posted September 28, 2016 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 Link to comment Share on other sites More sharing options...
Tom S. Posted September 28, 2016 Share Posted September 28, 2016 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 More sharing options...
NoGi Posted September 28, 2016 Author Share Posted September 28, 2016 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}} {{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 More sharing options...
Tom S. Posted September 28, 2016 Share Posted September 28, 2016 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 More sharing options...
NoGi Posted September 28, 2016 Author Share Posted September 28, 2016 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.