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

Html problems ;/ forum node bars (extra css)

Discussion in 'XenForo Questions and Support' started by Wuebit, Mar 10, 2011.

  1. Wuebit

    Wuebit Well-Known Member

    Am trying to add a small bar at the end of my forum-node (see pic)
    i suck at html stuff pfft.jpg

    This is the code I was trying am guess am going at this the wrong way.
    Any pointer's would be great

    Thanks

    HTML:
        <div class="nodeInfo categoryNodeInfo categoryStrip"><div class="bar_girl">
    
            <div class="categoryText">
                <h3 class="nodeTitle"><a href="{xen:link categories, $category}">{$category.title}</a></h3>
                <xen:if is="{$category.description}"><blockquote class="nodeDescription baseHtml">{xen:raw $category.description}</blockquote></xen:if>
            </div>
    
        </div></div>
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This is in the node_category_level_1 template, right?

    Try this (I added the first line):

    Code:
    	<div class="categoryStrip" style="float: right; width: 100px; background: #000000;">blah</div>
    
    	<div class="nodeInfo categoryNodeInfo categoryStrip">
    
    		<div class="categoryText">
    			<h3 class="nodeTitle"><a href="{xen:link categories, $category}">{$category.title}</a></h3>
    			<xen:if is="{$category.description}"><blockquote class="nodeDescription baseHtml">{xen:raw $category.description}</blockquote></xen:if>
    		</div>
    		
    	</div>
    
    The categoryStrip class gives it the same padding and border radius and stuff. Then I added some inline styling to float it right and set a width and background. You may want to clean up the CSS.

    This is the result:

    Screen shot 2011-03-09 at 10.30.51 PM.png
     
    Vodkaholic likes this.
  3. Wuebit

    Wuebit Well-Known Member

    Awesome Jake... Aye this is for the node_category_level_1
    I removed the background colour from that edited first line so it keeps the same colour, What am trying to do is an a small image right at the end of that node bar.
    Is there anyway to move the image up and at the same time keep the node bar the same as it should be (as in not all the way around the image)
    i suck at html stuff pfft.jpg

    Thank alot!
     
  4. Wuebit

    Wuebit Well-Known Member

    Bump >.>
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You can try adding some positioning (position: relative; top: -100px; in this example):

    Code:
    	<div class="categoryStrip" style="position: relative; top: -100px; float: right; width: 100px; background: #000000;">blah</div>
    
    	<div class="nodeInfo categoryNodeInfo categoryStrip">
    	
    		<div class="categoryText">
    			<h3 class="nodeTitle"><a href="{xen:link categories, $category}">{$category.title}</a></h3>
    			<xen:if is="{$category.description}"><blockquote class="nodeDescription baseHtml">{xen:raw $category.description}</blockquote></xen:if>
    		</div>
    		
    	</div>
    
    You can see the result (100 pixels higher on the page):

    Screen shot 2011-03-14 at 12.19.20 AM.png
     
  6. Wuebit

    Wuebit Well-Known Member

    Hey I did it in the end with a table ^_^ Thanks tho Jake
     

Share This Page