Jump to content

Unwanted ipsPad around custom block in sidebar


SRFA

Recommended Posts

Hi,

I recently upgraded my community from 4.2.5 to 4.2.6 and this upgrade apparently brought a template change in sidebars (I understood that this was done for better advertisements management.)

My sidebars do not include any ads, but do include custom blocks which I created from the Pages app, and added in the pages by using the "easy" block manager editor. 

The code of my custom block simply starts with an ipsBox wrapper and an <h3> title, which previously was as large as the whole sidebar. Now, they are wrapped in an additional ipsBox and ipsPad which creates a white padding around my custom block. I can edit my custom block code to remove the ipsBox I added myself, but this doesn't remove the ipsPad white margin. The block title then doesn't span the whole width, and isn't visually coherent with how h3 titles show in the main area (such as announcements, forum titles...) Below, a screenshot of the appearance before and after the upgrade (the custom block code is strictly the same.)

Sidebar425.png.86b561495a9f88fcb16a13da907b8830.png  Sidebar426.png.d5c67ded85a0a6fc7dc0baa306f7ba71.png

I tried editing manual the widgetContainer template but I couldn't find any trace of this added ipsPad (which I identified with Chrome code inspector - removing it from there locally works perfectly.) My feeling is that it is now included in the $widgetHtml variable, which is generated by a call to some IPS::Output class function. Shouldn't there be a proper mean (through templates or CSS) to remove this ipsPad, without editing IPS core functions (I'm very reluctant to do so!).

Any idea about how removing this bothering ipsPad around custom blocks by satisfying means?

Many thanks for your help!

Link to comment
Share on other sites

Update about trials: the problem is solved by adding this code in the custom CSS

.ipsWidget_inner.ipsPad.ipsType_richText {
	padding: 0px !important;
	background: transparent;
	border: none;
}

However, I'm not 100% confident that this doesn't impact negatively the look and feel of other elements (I'm pretty sure it does :/)

Link to comment
Share on other sites

<h3 class="ipsType_reset ipsWidget_title" style="margin-bottom:-3px">Title</h3>
	<li class="ipsWidget_vertical ipsBox">
		<div class="ipsWidget_inner ipsPad_half">
			<p style="font-weight:600;">Subtitle</p>                      
			  <p>Describe whats below.</p>
			 <p style="text-align: center;">
				<a href="https://fb.com/" target="_blank">
					<img src="#" />
				</a>
			</p>
			<p style="text-align: center;">
				<a href="https://fb.com/" target="_blank" style="text-decoration:underline;font-weight:600;">
					Go Now
				</a>
			</p>
		</div>
	</li>

This almost looks on but there's a small space between the h3 and li unless i add negative margin

Link to comment
Share on other sites

Thanks for your answer Jaymez. My code essentially looks like:

<div class="ipsBox">
	<h3 class="ipsType_reset ipsWidget_title">
		.: ADH&Eacute;SION :.
	</h3>

	<div class="ipsWidget_inner ipsPad">
		<p>
			(some text)
		</p>
	</div>
</div>

Your solution would probably work with a -5px negative margin, wouldn't it? however I'd prefer to manage this at a more systematic level, to avoid editing all blocks one by one.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

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