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

[help me] sidebar horizontally above the forums

Discussion in 'XenForo Questions and Support' started by Gustavo Fernandez, Jan 6, 2011.

  1. Gustavo Fernandez

    Gustavo Fernandez Active Member

    Hi people, I need to move the sidebar above the forums, horizontally.

    image
    forum page.png

    Help me?

    grettings
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You would have to edit this template:

    Admin CP -> Appearance -> Templates -> forum_list

    I was unable to create the exact layout you want, but these changes will move the sidebar content to the top of the page.

    Replace this code:

    Code:
    <xen:h1>{$xenOptions.boardTitle}</xen:h1>
    
    <xen:container var="$head.canonical"><link rel="canonical" href="{xen:link 'canonical:index'}" /></xen:container>
    
    <xen:if is="{$xenOptions.boardDescription}"><xen:container var="$head.description">
    	<meta name="description" content="{$xenOptions.boardDescription}" /></xen:container></xen:if>
    
    <xen:if is="{$renderedNodes}"><xen:include template="node_list" /></xen:if>
    
    <xen:sidebar>
    	<xen:edithint template="sidebar.css" />
    
    	<xen:hook name="forum_list_sidebar">
    		<xen:include template="sidebar_online_users" />
    
    		<!-- block: forum_stats -->
    		<div class="section">
    			<div class="secondaryContent statsList" id="boardStats">
    				<h3>{xen:phrase forum_statistics}</h3>
    				<div class="pairsJustified">
    					<dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
    						<dd>{xen:number $boardTotals.discussions}</dd></dl>
    					<dl class="messageCount"><dt>{xen:phrase messages}:</dt>
    						<dd>{xen:number $boardTotals.messages}</dd></dl>
    					<dl class="memberCount"><dt>{xen:phrase members}:</dt>
    						<dd>{xen:number $boardTotals.users}</dd></dl>
    					<dl><dt>{xen:phrase latest_member}:</dt>
    						<dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
    					<!-- slot: forum_stats_extra -->
    				</div>
    			</div>
    		</div>
    		<!-- end block: forum_stats -->
    	</xen:hook>
    </xen:sidebar>
    
    ...with this:

    Code:
    <xen:h1>{$xenOptions.boardTitle}</xen:h1>
    
    <xen:container var="$head.canonical"><link rel="canonical" href="{xen:link 'canonical:index'}" /></xen:container>
    
    <xen:if is="{$xenOptions.boardDescription}"><xen:container var="$head.description">
    	<meta name="description" content="{$xenOptions.boardDescription}" /></xen:container></xen:if>
    
    <xen:include template="sidebar_visitor_panel" />
    
    <xen:hook name="forum_list_sidebar">
    	<xen:include template="sidebar_online_users" />
    
    	<!-- block: forum_stats -->
    	<div class="section">
    		<div class="secondaryContent statsList" id="boardStats">
    			<h3>{xen:phrase forum_statistics}</h3>
    			<div class="pairsJustified">
    				<dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
    					<dd>{xen:number $boardTotals.discussions}</dd></dl>
    				<dl class="messageCount"><dt>{xen:phrase messages}:</dt>
    					<dd>{xen:number $boardTotals.messages}</dd></dl>
    				<dl class="memberCount"><dt>{xen:phrase members}:</dt>
    					<dd>{xen:number $boardTotals.users}</dd></dl>
    				<dl><dt>{xen:phrase latest_member}:</dt>
    					<dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
    				<!-- slot: forum_stats_extra -->
    			</div>
    		</div>
    	</div>
    	<!-- end block: forum_stats -->
    </xen:hook>
    
    <xen:if is="{$renderedNodes}"><xen:include template="node_list" /></xen:if>
    
    Basically you remove the xen:sidebar tags and then move the content of the sidebar above the node list. Then include the sidebar_visitor_panel template.

    Then you need to figure out how to put them into columns. I don't have code for that.
     
    Gustavo Fernandez likes this.
  3. Brogan

    Brogan XenForo Moderator Staff Member

    I've been working on some css based divs to make a grid without a table.
    You could use it for this.

    This is the basic css:
    Code:
    .grid_row {
    position: relative;
    width: 972px;
    float: left;
    margin: 10px 0;
    }
    
    .grid_cell {
    position: relative;
    width: 228px;
    height: 246px;
    float: left;
    }
    
        .grid_cell1 {
        left: 6px;
        }
    
        .grid_cell2 {
        left: 22px;
        }
    
        .grid_cell3 {
        left: 38px;
        }
    
        .grid_cell4 {
        left: 54px;
        }
    And this would be the html:
    Code:
    <div class="grid_row">
        <div class="grid_cell grid_cell1">
            Content here
        </div>
        <div class="grid_cell grid_cell2">
            Content here
        </div>
        <div class="grid_cell grid_cell3">
            Content here
        </div>
        <div class="grid_cell grid_cell4">
            Content here
        </div>
    </div>    
    The result is as follows:

    grid.PNG

    You will just have to change the dimensions to suit your layout.
     
    Gustavo Fernandez likes this.
  4. Gustavo Fernandez

    Gustavo Fernandez Active Member

    thanks but not stay as I wanted to see

    look at the results

    Jake Bunce:
    img.png

    Brogan:
    img1.png

    Example of what I want:
    img2.png


    I hope I have been clear ... I appreciate your help
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Can you implement the code in the second screenshot again and let me know the URL?

    It looks like the columns are partly working, it probably just needs some tweaking.
    As some of the boxes in the sidebar are dynamic, i.e. the size changes depending on staff online, etc., then you will have to remove any height attributes and just have basic width settings.
     
  6. Gustavo Fernandez

    Gustavo Fernandez Active Member

    Done!

    My forum_list:
    Code:
    <xen:h1>{$xenOptions.boardTitle}</xen:h1>
    
    <xen:container var="$head.canonical"><link rel="canonical" href="{xen:link 'canonical:index'}" /></xen:container>
    
    <xen:if is="{$xenOptions.boardDescription}"><xen:container var="$head.description">
        <meta name="description" content="{$xenOptions.boardDescription}" /></xen:container></xen:if>
    
    <div class="grid_row">
        <div class="grid_cell grid_cell1">
            <xen:include template="sidebar_online_users" />
        </div>
        <div class="grid_cell grid_cell2">
                    <!-- block: forum_stats -->
            <div class="section">
                <div class="secondaryContent statsList" id="boardStats">
                    <h3>{xen:phrase forum_statistics}</h3>
                    <div class="pairsJustified">
                        <dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
                            <dd>{xen:number $boardTotals.discussions}</dd></dl>
                        <dl class="messageCount"><dt>{xen:phrase messages}:</dt>
                            <dd>{xen:number $boardTotals.messages}</dd></dl>
                        <dl class="memberCount"><dt>{xen:phrase members}:</dt>
                            <dd>{xen:number $boardTotals.users}</dd></dl>
                        <dl><dt>{xen:phrase latest_member}:</dt>
                            <dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
                        <!-- slot: forum_stats_extra -->
                    </div>
                </div>
            </div>
            <!-- end block: forum_stats -->
        </div>
        <div class="grid_cell grid_cell3">
            Content here
        </div>
        <div class="grid_cell grid_cell4">
            Content here
        </div>
    </div>
    
    <xen:if is="{$renderedNodes}"><xen:include template="node_list" /></xen:if>
    my site: http://forum.desload.net/

    thanks ;)
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    I can't really see a problem - it looks to me as if there are 4 columns with content in them.

    columns.PNG
     
  8. Gustavo Fernandez

    Gustavo Fernandez Active Member

    Yes. there are 4 columns, but I need the format of the image number three.
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    You will have to split the contents of the sidebar_online_users template if you want to separate staff and normal members.
     
  10. Gustavo Fernandez

    Gustavo Fernandez Active Member

    Yes. But what i will Primarily focus is on the format.
    How do I get get the same format as the sidebar?
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    You will just need to play with the css to get it to match as you have effectively replaced the sidebar with this new layout.
     

Share This Page