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

Centering customized notice navContainer

Discussion in 'Styling and Customization Questions' started by Trombones13, Aug 18, 2012.

  1. Trombones13

    Trombones13 Well-Known Member

    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:
    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!

  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Templates -> notices

    Add the red 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>
    Now you can use this within or after that foreach loop:

    {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 likes this.
  3. Trombones13

    Trombones13 Well-Known Member

    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:"
    <div class="navContainer" style="width:{xen:calc '100*{$count} + 10*{$count}'}px">
    Thanks a lot, Jake!! :)
    Jake Bunce likes this.

Share This Page