XF 1.x Category strip in custom page

abdfahim

Registered
I want to make similar block design as below in a custom page (except that expand button). Can I do it?


upload_2017-2-4_23-21-20.png
 

abdfahim

Registered
Hi @Russ, if you kindly comment on this. The context is, I use DragonByte ShoutBox in homepage as well as in a custom page node. Usually the header of the shoutbox is like this, which doesn't go with my overall EDGE look.

upload_2017-2-7_7-53-2.png


So, after few trials, I added couple of styles in the DIVs to make it like this

upload_2017-2-7_7-54-8.png


Changes: added "nodeList" to container, and "categoryStrip" class to the heading DIV.
Code:
<div class="nodeList">
    <div class="categoryStrip">Shoutbox</div>
    ............................content..........................
</div<

Now, this works perfectly in the homepage, but not in a custom page node. When I do the same in a custom page node, nothing changes.

I believe as the structure in a custom page is different from forum_list, only adding those two classes is not going to apply that look. So, is there a shortcut for this?
 

Russ

Pixel Exit Staff
Try doing simple in your custom node:

Code:
<div class="subHeading">Hello</div>
<div class="primaryContent">
test
</div>

You shouldn't need to carry over any additional CSS.
 

abdfahim

Registered
Oh no no, that worked like a charm. But this time I asked for another design, if you compare the two images.

Previous one was the design of the node category strips, this one is the one used for the individual posts block (inside thread view).
 

abdfahim

Registered
I actually did it at last by adding two css files in the custom page node and copying whole ol block from the posts. But I am not sure if I have overkilled it, e.g. if there is an efficient and simpler way.

Simething like below (pasting from memory)

Code:
<xen:require xb_message.css>
<xen:require message.css>

<ol class ="messageList>
<li class ="messgae">
Lots of DIV
</li>
</ol>
 

abdfahim

Registered
Oh no no, that worked like a charm. But this time I asked for another design, if you compare the two images.

Previous one was the design of the node category strips, this one is the one used for the individual posts block (inside thread view).

I actually did it at last by adding two css files in the custom page node and copying whole ol block from the posts. But I am not sure if I have overkilled it, e.g. if there is an efficient and simpler way.

Simething like below (pasting from memory)

Code:
<xen:require xb_message.css>
<xen:require message.css>

<ol class ="messageList>
<li class ="messgae">
Lots of DIV
</li>
</ol>

Hi @Russ, if you kindly look into it whenever you can. Thanks.
 

Russ

Pixel Exit Staff
Try this out:

Code:
<xen:require css="xb_message.css" />
<xen:require css="message.css" />

<ol class="messageList">
<li class="message">
   <div class="messageHeading">
       <span class="leftSide">Some test</span>
       <span class="rightSide">Optional Right Side</span>
   </div>
Lots of DIV
</li>
</ol>

Result:
Screenshot_5.png
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.