Pages: (9) 1 2 3 4 ... Last » ( Go to first unread post ) Add ReplyNew Thread

 Custom Forum Structure, Jcink
Kenz
 Posted: November 21st, 2013, 04:03 PM
Quote
Newbie
Posts:2Group:New MemberJoined:November 20th, 2013
Send Message


that did it!!! thanks so much!!
Email
Black
 Posted: November 30th, 2013, 01:24 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Glad I could help, Kenz!

In recent news, Step 2 of the installation instructions has been updated with the following text:

QUOTE (Black @ September 29th, 2013, 07:00 AM)
It has been demonstrated that errant line breaks in the following line of HTML can sometimes cause the contents of entire forums to vanish. This devastating bug is probably related to the way the script handles forums set to be viewed as categories, and it will be transparently fixed in later editions of the script. However, until these inconsistencies are resolved, it is strongly suggested that all users use the code below exactly as it appears.

CODE
<div id="board"><% BOARD %></div>


This has been another public service announcement. I apologize for any inconvenience this may have caused!
MAX ROCKATANSKY
 Posted: December 4th, 2013, 12:21 AM
Quote
Advanced Member
Posts:65Group:MemberJoined:November 19th, 2013
Send Message


Okay first of all this is beautiful and you are beautiful.

Secondly I have a little suggestion/request? idk if it's possible, but it would be super super cool if there was a way to customise when the user's last activity returns 'false' on the custom profile. Or maybe just make it disappear when it's false?
Pierrot
 Posted: December 4th, 2013, 06:37 AM
Quote
you are not your skin.
Posts:499Group:StaffJoined:August 28th, 2013
Send Message


You can probably use a method similar to this except with recent activity instead of subfoorums.

QUOTE (Black @ November 16th, 2013, 05:36 PM)
Being a non-standard feature, as in, one that I wrote specifically and not something I just have the script pull from existing markup like its counterpart {%subforums}, {%subforumlist} returns false if a forum contains no subforums. Its output, then, will either be a list of subforums separated by subforumSeparator, or the boolean value false. When printed in the HTML output, the latter will just display the string "false".

I assume this is what you meant. If it's not, please fill me in!

Anyway, this is by design; it forces people to explicitly define their own behavior. I could have tried to be predictive and set this(and other, similar variables) up to be as automatic as possible, but when I reviewed the feedback I'd received for previous script versions I found that a lot of people were using bits and pieces of it very differently. If I locked people in to a set way of doing things it would limit flexibility, which is anathema to the point of this script.

Until I write my own conditional parser and stack it on top of the text replacement function already included with each module, the best(but not the only) way to accomplish this is to turn html from a property into a method by declaring it a function instead. Then you can check to see if {%subforumlist} is false or not. This does require more JavaScript knowledge, but it's a fair tradeoff.

Code (Click to highlight)
 
...
html: function () {
// Declare a temporary output variable.
var output = "<div class='theboard'> <div class='boardlink'>{%link} • ";
// Does {%subforumlist} exist?
if(this.vals["{%subforumlist}"]) {
  // If it does, add it to the output.
  output += "<div class='subboards'>{%subforumlist}</div>";
}
// If it doesn't, just continue like normal.
output += </div> <div class='description'>{%description}</div></div>";
// Don't forget to return the output!
return output;
}, // Don't forget the comma, if "html" is not the last property/method in the object being passed to customIndex.init()
...


We do something similar in our user profile and topic view pages here on Code. You can check the source code here to see more examples. It's also worth noting that you can easily set up alternate behavior by inserting a JavaScript else clause after the if conditional, which is nice for printing messages like "This forum has no subforums."

Email
Black
 Posted: December 4th, 2013, 07:48 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


QUOTE (JON SNOW. @ December 4th, 2013, 12:21 AM)
idk if it's possible, but it would be super super cool if there was a way to customise when the user's last activity returns 'false' on the custom profile. Or maybe just make it disappear when it's false?


I could do it, but I'd rather leave behavioral changes like that in the hands of you designers. It spares me from having to write a whole heap of extra config options, at any rate! Pierrot is right on the money, what you want to do is use a function instead of a string. That way, you can use basic JavaScript conditionals to check if a value exists in this.vals to determine whether or not it should be output.

Code (Click to highlight)
...
html: function() {
var output = "whatever<br />";
if(this.vals["{%last-active}"]) {
output += "{%last-active}";
}
return output;
},
...


More examples are available toward the end of the documentation.
MAX ROCKATANSKY
 Posted: December 4th, 2013, 08:08 PM
Quote
Advanced Member
Posts:65Group:MemberJoined:November 19th, 2013
Send Message


Oh okay, thanks so much to both of you!
PANSY PARKINSON
 Posted: December 5th, 2013, 05:19 PM
Quote
Advanced Member
Posts:40Group:MemberJoined:October 28th, 2013
Send Message


Would this work on Invisionfree?
EmailWebsite
Pierrot
 Posted: December 5th, 2013, 09:59 PM
Quote
you are not your skin.
Posts:499Group:StaffJoined:August 28th, 2013
Send Message


The forum structure might, but I don't think the other codes will. At the least, it might require tweaking due to the difference in value-names.
Email
Black
 Posted: December 6th, 2013, 04:50 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


QUOTE (valkyriemc @ December 5th, 2013, 05:19 PM)
Would this work on Invisionfree?


Out of the box? No, probably not. You could try it, but if there are changes however minor between the markup provided by the adapted version of IPB1.3.1 that Zathyus Networks runs on their service and the version Jcink runs on his, the script could very well just refuse to function.

However, after I got the script running more stably on Jcink boards, I was planning on porting functionality over to InvisionFree. I'll consider your interest an official request and bump the priority on that side project up a tad.
lola
 Posted: December 16th, 2013, 03:02 PM
Quote
Newbie
Posts:2Group:New MemberJoined:December 16th, 2013
Send Message


So I have a dent handle on CSS and HTML, but jQuery is a nightmare for me. None the less I'd really like to get a hold of it which is why I am trying this out paired with the pop-up modules. Anyway here is my code:

CODE
<!DOCTYPE html>
<html>
   <head>
<title><% TITLE %></title>
<% CSS %>
<% JAVASCRIPT %>
<script src="http://elegantexpressions.us/black/cfs.min.js"></script>


 </head>
   <body>

<div id="wrapper">

    <% BOARD HEADER %>
    <div id="innerwrapper">
     <div id="navi">
     <% NAVIGATION %>
     </div>
     <div id="board"><% BOARD %></div>
<script>
customIndex.init({
page: "<!-- |input_act| -->",
html: ""
});
customStats.init({
html: ""
});
customProfile.init({
html: ""
});
customTopics.init({
html: ""
});
</script>
     <% COPYRIGHT %>
    </div>
</div>
   </body>
</html>


However, nothing has happened. I am trying to follow this step by step but I haven't received any pop-up message or anything. My index looks the exact same. Is it because I haven't customized the HTML stuff? If so... where do I even begin with that. Urgh. The is so much information and "new-ness" it's slightly overwhelming for me.
Black
 Posted: December 16th, 2013, 05:16 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Hello hello, and thank you for giving things a try!

This script in particular is actually not based on jQuery and will happily plug away without a reference to that library anywhere on your forum. I found that the heavy lifting needed to rearrange the index page was slowed down considerably by jQuery's otherwise robust selector engine, so I wrote mine from scratch in minimal JavaScript with speed in mind. That said, the way each module is invoked is slightly reminiscent of jQuery's syntax, but there's actually none involved. Just bear in mind that searching for jQuery tutorials to help you get a handle for this script in particular will take you in the wrong direction.

Imagine, if you will, that each row on your forum's index page is its own little box with all the little bits and pieces- a link to the forum, a forum marker, the forum's description, and so on- all packaged neatly inside it.

This script pries open each box, lets you pick and choose which of those bits and pieces you want to use and lets you specify how you want to use them, then gets rid of the old boxes completely and repackages what you want in entirely new boxes. The "instructions" for the repackaging process are contained in the html property of the object you pass to customIndex.init().

CODE
customIndex.init({
page: "<!-- |input_act| -->",
html: "Instructions go here!"
});

Those instructions are then used by the script for the repackaging process. If you used the above script sample exactly as it appeared it would replace all of your forum rows with the string, Instructions go here!. This is obviously not what you want, though. You want the bits and pieces!

Those are described in the documentation. Each of the four modules has its own list of unique values. Using a value from the Custom Stats module in the Custom Profile module will not work. To use the values for any module, just plug them into the html property of that module's .init() method like you would regular text. For example, the following code sample will make your index only display a link to each forum.

CODE
customIndex.init({
page: "<!-- |input_act| -->",
html: "{%link}"
});

It's a little bland, but we're getting there. Try adding the forum description next.

CODE
customIndex.init({
page: "<!-- |input_act| -->",
html: "{%link}<br />{%description}"
});

There, see! And look- HTML works inside html, too. This means you can include your own HTML markup for styling. Let's give it a try.

CODE
customIndex.init({
page: "<!-- |input_act| -->",
html: "<div class='row'>{%link}<br />{%description}</div>"
});

And it works!

However...

This is actually a common pitfall for a lot of people new to this script. Providing your own wrapper element for the contents of html can result in some strange behavior once you actually get around to styling it, especially if you plan on using CSS to float or manually reposition each row on the index page. This is because my script already provides a wrapper element, a <div> tag with the class .new-row and id #row-n, where n is the numeric id of that forum as expressed in that forum's URL.

So, this was actually a step backwards. Better remove that superfluous <div>, and while we're at it, we might as well wrap our description in a <p> tag for demonstration purposes.

CODE
customIndex.init({
page: "<!-- |input_act| -->",
html: "{%link}<p>{%description}</p>"
});

And that's basically it. Once you have the script configured how you want it to be(another subject entirely), all you're going to be doing is changing what's inside the html property.

It's really pretty simple once you play around with it a bit.
lola
 Posted: December 17th, 2013, 12:59 PM
Quote
Newbie
Posts:2Group:New MemberJoined:December 16th, 2013
Send Message


Black, this was so helpful. It makes a lot more sense now. I just want to check in with you before I start playing with HTML. So below is the result from the code you've helped me with:

http://i.imgur.com/fe7HVFW.png


CODE
<!DOCTYPE html>
<html>
   <head>
<title><% TITLE %></title>
<% CSS %>
<% JAVASCRIPT %>
<script src="http://elegantexpressions.us/black/cfs.min.js"></script>


 </head>
   <body>

<div id="wrapper">

    <% BOARD HEADER %>
    <div id="innerwrapper">
     <div id="navi">
     <% NAVIGATION %>
     </div>
     <div id="board"><% BOARD %></div>
<script>
customIndex.init({
page: "<!-- |input_act| -->",
html: "{%link}<p>{%description}</p>",
conf: {
 target:   "board",
 subforumSeperator: ", ",
 subforumNone:  "This forum has no subforums.",
 addBefore:  false,
 addAfter:  false,
 dateDefault:  "--",
 titleDefault:  "----",
 authorDefault:  ""
}
});
customStats.init({
html: ""
});
customProfile.init({
html: ""
});
customTopics.init({
html: ""
});
</script>
     <% COPYRIGHT %>
    </div>
</div>
   </body>
</html>


I just want to make sure that this is what it should look like? And if so when I start playing with HTML is that where I assign size of the forum along will all other customizables?

This post has been edited by lola: December 17th, 2013, 01:00 PM
Black
 Posted: December 17th, 2013, 04:47 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Pretty much, yep! You can use inline styling(though I advise against this- the stuff I usually find inside html can be hard enough to read through without looking past lengthy style attributes everywhere, too) or class names and regular CSS(thumbs up!) to target the appearance of the output.

As an example of what I mean, have a look at what we use in the html property here on Code:

CODE
<h1>{%link}<div class='forum-stats newrow-icon'><div class='stats-popup'><strong>Threads:</strong><span>{%topics}</span><br/><strong>Replies:</strong><span>{%replies}</span></div></div></h1><div class='rowbody'><p>{%description}</p><div class='latest'>Latest post: {%lp-title} by {%lp-author} <a href='{%lp-title#link}' class='latest-link' title='Click to read entire post'><div class='latest-popup'><span></span><span></span><span></span><div class='innerblock'></div></div></a><a class='mark-as-read' href='/?act=Login&amp;CODE=04&amp;f={%id}&amp;i=1' title='Mark forum as read'></a></div></div>


Oh, and feel free to get rid of any of the properties inside conf that you're not actually changing, since the script will automatically substitute hard-coded defaults if it doesn't detect any manual overrides and will be very, very slightly faster as a result.
Mnikolic
 Posted: December 19th, 2013, 12:13 AM
Quote
Member
Posts:17Group:MemberJoined:December 19th, 2013
Send Message


Is there any way of showing the maintitle on the subforums list inside main forums while using the input act tag in the custom index code?

This post has been edited by Mnikolic: December 19th, 2013, 12:17 AM
Black
 Posted: December 19th, 2013, 08:47 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


QUOTE (Mnikolic @ December 19th, 2013, 12:13 AM)
Is there any way of showing the maintitle on the subforums list inside main forums while using the input act tag in the custom index code?


I'm afraid not, no- not with the script, anyway. I might be able to add that as a feature, though. On the other hand, you can use a pseudo-element like CSS' :before to approximate what you want:

CODE
#board > .new-section:first-child:before {
display: block;
content: "Subforums";
border: 1px solid red;
/* Etc */
}
Mnikolic
 Posted: December 19th, 2013, 09:03 AM
Quote
Member
Posts:17Group:MemberJoined:December 19th, 2013
Send Message


Thanks, that worked like a charm smile.gif
syddiecat.
 Posted: February 4th, 2014, 01:17 PM
Quote
Newbie
Posts:2Group:New MemberJoined:February 4th, 2014
Send Message


Hi, so I'm having a bit of trouble with this! I've seen it done before, but when I do it, it's just not showing up, or affecting the board at all. What am I doing wrong?

CODE
<!DOCTYPE html>
<html>
   <head>
<title><% TITLE %></title>
<% CSS %>
<% JAVASCRIPT %>
<script src="http://elegantexpressions.us/black/cfs.min.js"></script>


 </head>
   <body>

<div id="wrapper">

    <% BOARD HEADER %>
    <div id="innerwrapper">
     <div id="navi">
     <% NAVIGATION %>
     </div>
     <div id="board"><% BOARD %></div>
<script>
customIndex.init({
page: "<!-- |input_act| -->",
html: "<center><div class="board1"><div class="board2"></div><div class="board3">{%link}</div><table><tr><td><div class="board4">
<table cellspacing="0" style="padding: 10px;"><tr><td><div class="board5">{%replies}</div></td><td><div class="board6">POSTS</div></td></tr><tr><td><div class="board6">TOPICS</div></td><td><div class="board5" style="background: #a9dbd3">{%topics}</div></td></tr></table></div></center></div></td><td><div class="board7"><center>{%description}</center></div></td><td><div class="board8"><center><div class="board9"><div class="board10">LAST POST BY:</div><div class="board11">{%lp-author}</div><div class="board12">IN {%lp-title}</div><div class="board13">{%lp-date}</div></div></center></div></td></tr></table><div class="board14">{%subforumlist}</div><div class="board15"></div></div></center>",
conf: {
 target:   "board",
 subforumSeperator: ", ",
 subforumNone:  "This forum has no subforums.",
 addBefore:  false,
 addAfter:  false,
 dateDefault:  "--",
 titleDefault:  "----",
 authorDefault:  ""
}
});
customStats.init({
html: ""
});
customProfile.init({
html: ""
});
customTopics.init({
html: ""
});
</script>
     <% COPYRIGHT %>
    </div>
</div>
   </body>
</html>


Any help would be so appreciated!

This post has been edited by syddiecat.: February 4th, 2014, 01:19 PM
Pierrot
 Posted: February 4th, 2014, 01:54 PM
Quote
you are not your skin.
Posts:499Group:StaffJoined:August 28th, 2013
Send Message


Its because you have nothing in these
CODE
customStats.init({
html: ""
});
customProfile.init({
html: ""
});
customTopics.init({
html: ""
});


Email
syddiecat.
 Posted: February 4th, 2014, 05:14 PM
Quote
Newbie
Posts:2Group:New MemberJoined:February 4th, 2014
Send Message


QUOTE (Pierrot @ February 4th, 2014, 03:54 PM)
Its because you have nothing in these
CODE
customStats.init({
html: ""
});
customProfile.init({
html: ""
});
customTopics.init({
html: ""
});



Even if I take them out though, say I don't want them, it still does not work.
Black
 Posted: February 4th, 2014, 08:03 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


That's right, Pierrot. Blank html properties in the other scripts won't do anything but insert a message saying that part of the script has been invoked, but not configured, and include a link here for help.

Your real problem is the style of quotes you use in the Custom Index module:

CODE
html: "<center><div class="board1"><div class="board2"></div><div class="board3">{%link}</div><table><tr><td><div class="board4"><table cellspacing="0" style="padding: 10px;"><tr><td><div class="board5">{%replies}</div></td><td><div class="board6">POSTS</div></td></tr><tr><td><div class="board6">TOPICS</div></td><td><div class="board5" style="background: #a9dbd3">{%topics}</div></td></tr></table></div></center></div></td><td><div class="board7"><center>{%description}</center></div></td><td><div class="board8"><center><div class="board9"><div class="board10">LAST POST BY:</div><div class="board11">{%lp-author}</div><div class="board12">IN {%lp-title}</div><div class="board13">{%lp-date}</div></div></center></div></td></tr></table><div class="board14">{%subforumlist}</div><div class="board15"></div></div></center>",

The script gets as far as

CODE
html: "<center><div class="

before it breaks down because JavaScript interprets that first double-quote as the end of the string. The solution is to either escape every single double-quote in html (a pain in the rear), or to use single quotes around the outside of the property like this:

CODE
html: '<center><div class="board1"><div class="board2"></div><div class="board3">{%link}</div><table><tr><td><div class="board4"><table cellspacing="0" style="padding: 10px;"><tr><td><div class="board5">{%replies}</div></td><td><div class="board6">POSTS</div></td></tr><tr><td><div class="board6">TOPICS</div></td><td><div class="board5" style="background: #a9dbd3">{%topics}</div></td></tr></table></div></center></div></td><td><div class="board7"><center>{%description}</center></div></td><td><div class="board8"><center><div class="board9"><div class="board10">LAST POST BY:</div><div class="board11">{%lp-author}</div><div class="board12">IN {%lp-title}</div><div class="board13">{%lp-date}</div></div></center></div></td></tr></table><div class="board14">{%subforumlist}</div><div class="board15"></div></div></center>',

Topic OptionsPages: (9) 1 2 3 4 ... Last » Add ReplyNew Thread


 


 

Latest Shouts In The Shoutbox -- View The Shoutbox · Rules   


's reputation