Invision Community 4: SEO, prepare for v5 and dormant account notifications Matt November 11, 2024Nov 11
Posted September 26, 20168 yr 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.
September 26, 20168 yr 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.
September 26, 20168 yr Author Not really but I have cleaned up the declaration as per your suggestion anyway, this is the issue:
September 26, 20168 yr Author 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.
September 27, 20168 yr 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.
September 27, 20168 yr Author Could you link to a working example? I'll PM as it's behind .htaccess it should be in this bit of code: No, that didn't seem to do much unfortunately.
September 27, 20168 yr Try this: body[data-pageapp="cms"][data-pagelocation="front"][data-pagemodule="pages"][data-pagecontroller="page"] h4.ipsDataItem_title img { padding: 10px; }
September 27, 20168 yr Author @Tom S., where is that inserted? Doesn't look like the syntax used in the recordRow HTML template I am in
September 27, 20168 yr @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>
September 27, 20168 yr Author 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>
September 27, 20168 yr 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>
September 28, 20168 yr Author 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
September 28, 20168 yr 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; }
September 28, 20168 yr Author 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>
September 28, 20168 yr 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>
September 28, 20168 yr Author 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:
Archived
This topic is now archived and is closed to further replies.