• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Centering customized notice navContainer

Trombones13

Well-known member
#1
I've customized my notices such that the navContainer is separated from the scrollContainer, with each individual notice title measuring 100x100 (see image below). I want to be able to center the notices instead of having them float to the left, as is shown on the bottom half of the attached image. However, I can't put a specific width since it will screw up if the number of notices changes. I know the width that makes the lower image work can be calculated as follows:
Code:
100*(number of notices) + 10*(number of notices)
Is there a way to calculate that with xen:calc? (Also, I presume xen:calc can be put in the custom CSS of a Style Property--in this case, @panelScrollerNavContainer--right?)

Hopefully that all makes sense--thanks!

xenforo-center-notices.png
 

Jake Bunce

XenForo moderator
Staff member
#2
Admin CP -> Appearance -> Templates -> notices

Add the red code:

Code:
<xen:if is="{$notices}">

<xen:require css="panel_scroller.css" />
<xen:edithint template="notice" />

<div class="{xen:if @scrollableNotices, PanelScroller, PanelScrollerOff}" id="Notices" data-vertical="@noticeVertical" data-speed="@noticeSpeed" data-interval="@noticeInterval">
	<div class="scrollContainer">
		<div class="PanelContainer">
			<ol class="Panels">
				<xen:foreach loop="$notices" key="$noticeId" value="$notice" count="$count">
					<xen:include template="notice">
						<xen:set var="$content">{xen:raw $notice.message}</xen:set>
					</xen:include>
				</xen:foreach>
			</ol>
		</div>
	</div>
Now you can use this within or after that foreach loop:

Code:
{xen:calc '100*{$count} + 10*{$count}'}
You would probably do inline styling in this case rather than CSS since the number of notices can change.

Hopefully that helps.
 

Trombones13

Well-known member
#3
That worked perfectly! On the off-chance that anyone else comes across this later and needs it, I added this style attribute to the div with class "navContainer:"
Code:
<div class="navContainer" style="width:{xen:calc '100*{$count} + 10*{$count}'}px">
Thanks a lot, Jake!! :)