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

 Custom Forum Structure, Jcink
Black
 Posted: September 29th, 2013, 07:00 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Custom Forum Structure is outdated. Use the new Custom Structure script instead!


Description: Provides a convenient method of rearranging a forum's HTML structure. Includes components for the board index, board statistics, user profile(both personal portal style and IPB1.3.1 default), and topic view. Very fast, no library or plugin dependencies. This is the third revision of the index component and the second revision of the others.
Requires: N/A
Target Platform: Jcink
Demonstration: This script is being used here on Code.
Installation Instructions:
Step 1: Add the following script to the document header.

CODE
<script src="http://elegantexpressions.us/black/cfs.min.js"></script>



Step 2: Wrap the <% BOARD %> wrapper tag with a <div> element with an id of #board. This id may be changed in configuration options later, if an additional #board element causes conflict within the skin. However, the <div> should contain nothing else.

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>



Step 3: Initialize the components you want to use immediately after Step 2.

Code (Click to highlight)
<script>
customIndex.init({
page: "<!-- |input_act| -->",
html: ""
});
customStats.init({
html: ""
});
customProfile.init({
html: ""
});
customTopics.init({
html: ""
});
</script>



Step 4: Construct your own replacement HTML structure. Information about configuration and output values may be found in this documentation.
Black
 Posted: October 30th, 2013, 09:22 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Update: The script suite has had welcome messages added to each of the components linking to Code and the script documentation. The Custom Stats module has been revised slightly so that it behaves more consistently. It was also exporting the text "[Expand][Collapse]" as part of the number of users online today, which has now been fixed.

The member legend in the board stats is on my to-do list.
AMB Tanz
 Posted: November 6th, 2013, 12:41 PM
Quote
Newbie
Posts:6Group:New MemberJoined:November 6th, 2013
Send Message


Am I supposed to see immediate results when I install this? I'm not yet at the part where I'm customizing. Trying to make it work first but so far, no luck. The notice did pop up but when I tried making changes, nothing happens.

CODE
<!DOCTYPE html>
<html>
   <head>
<title><% TITLE %></title>
<% CSS %>
<% JAVASCRIPT %>
<script src="http://elegantexpressions.us/black/cfs.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
<% code-format %>
<% code-format2 %>

 </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: "<h1>{%link}</h1>",
conf: {
 target:   "board",
 subforumSeperator: ", ",
 subforumNone:  "This forum has no subforums.",
 addBefore:  false,
 addAfter:  false,
 dateDefault:  "yo",
 titleDefault:  "----",
 authorDefault:  ""
}

});</script>
     <% COPYRIGHT %>
    </div>
</div>
   </body>
</html>


EDIT: AM I NOT SUPPOSED TO POST HERE IDK. FEEL FREE TO MOVE MY POST TO THE RIGHT FORUM.

This post has been edited by AMB Tanz: November 6th, 2013, 12:43 PM
Black
 Posted: November 6th, 2013, 02:49 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Sorry! Didn't see your reply here until later today. No, support for a script is welcome in the script's topic, though you'd have been equally welcome to post it over in Help Me! if you had preferred. Whatever's easiest for you is what you should do. ^_^

Yes, any changes you make should be immediately reflected in your board's appearance. The notices should also only appear if the html property is blank.

Regrettably, I was unable to reproduce whatever problem you were having. I swapped out the script we're using here on Code for your call to customIndex.init() and it behaved exactly as expected- all that was visible in each forum row on our index was the forum's link in a heading tag.

What internet browser were you using when you encountered difficulties? What are the contents of <% code-format %> and <% code-format2 %>?
AMB Tanz
 Posted: November 7th, 2013, 10:43 PM
Quote
Newbie
Posts:6Group:New MemberJoined:November 6th, 2013
Send Message


Oh, those are your Code/Quote format script, one that holds the script and the other that loads it. I decided to use webpages to load them since I thought it would be easier to remember/navigate through the scripts when I slap them in the board wrappers as I intend to make the site for multiple skin display. But I'm glad you asked, because the code worked when I got rid of them xD And it also works when I put the custom forum structure's script first. I guess the two codes just sort of conflicts?

This post has been edited by AMB Tanz: November 7th, 2013, 10:45 PM
Black
 Posted: November 8th, 2013, 07:19 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


That's an interesting find. As far as I know, it shouldn't happen- at least, no changes happened on Code when I moved the script reference to the very bottom of our head element just now. But thanks for pointing it out! I'll definitely look into possible reasons for that, and post up a warning on those two scripts if it can't be resolved.

Edit: I don't suppose you accidentally forgot to close a script tag in the second one there, did you? I reviewed the source of my two scripts and can't find any reason why there should be any conflict at all, especially since the quote/code reformat script only executes when you look at a topic, and that's one of the few times the custom forum structure script doesn't do anything at all(other than check to see if it should do something and realize that no, no it shouldn't).

This post has been edited by Black: November 8th, 2013, 08:40 AM
northwest
 Posted: November 12th, 2013, 12:18 PM
Quote
Member
Posts:10Group:MemberJoined:November 6th, 2013
Send Message


I had a very similar problem earlier this week--installed, took out, and put back in several times and it just never showed up. I have two other bits of jquery in the code, and I assume it was conflicting with that? I am a horribly messy coder, but I know I didn't have any script tags left open.

I've used your old code in the past w/ great success and I'll definitely try this one again going forward--I ended up taking it out just 'cuz I got lazy and it was probably too much on one page anyway, but it was very strange. It just wasn't affecting the forums at all.
Black
 Posted: November 12th, 2013, 05:38 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Well then! Thanks for the post, northwest. This is apparently an issue, though I can't imagine why. The only other thing I can possibly imagine could be causing conflict is the presence of the $ character, which is an alias with a special meaning in jQuery(and several other JavaScript libraries). The thing is, my script doesn't use it at all.

If anyone else is experiencing this problem please don't take it down- come here and report it! For this problem, I think I need to see things in action to understand why it could be misbehaving.
nancy
 Posted: November 15th, 2013, 05:39 PM
Quote
Newbie
Posts:4Group:New MemberJoined:November 15th, 2013
Send Message


I'm also having the same problem as Tanz, I think. I believe I have everything set up right? But I'm not even sure about that nwn. The notifications popped up for me when I first put the code in because I didn't do anything, and they disappeared when I started playing around with the code and started? doing the correct stuff with it? I think? Anyway, even after I started playing with it nothing seemed to be happening to the boards? There seemed to be no changes to anything, and I don't know if it's just me, or if it's the code?

CODE
<!DOCTYPE html>
<html>
   <head>
<title><% TITLE %></title>
<% CSS %>
<% JAVASCRIPT %>
<script src="http://elegantexpressions.us/black/cfs.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic,400' rel='stylesheet' type='text/css'>
   </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}<br />{%description}"
conf: {
 target:   "board",
 subforumSeperator: ", ",
 subforumNone:  "no subforums",
 addBefore:  false,
 addAfter:  false,
 dateDefault:  "--",
 titleDefault:  "----",
 authorDefault:  ""
}
});
customStats.init({
html: ""
});
customProfile.init({
html: ""
});
customTopics.init({
html: ""
});
</script>
 <div id="skin_selector">
         <% SKIN_SELECTOR %>
     </div>
     <% COPYRIGHT %>
     <script>$('#logo a img[src="style_images/1/spacer.gif"]').replaceWith('<!-- |board_name| -->');</script>
    </div>
</div>
   </body>
</html>
Black
 Posted: November 15th, 2013, 06:03 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Here we go, something to work with!

There's actually a minor syntax error in the wrapper set that you provided just now. In JavaScript, an object (and this is a rough definition, mind you) is a set of values, properties, and related functions, methods, denoted by property: value (or method: function() { ... }), in a comma-separated list. Because html is a property of the object being passed to customIndex.init() but not the last property of that object, it must have a comma after it. Otherwise, JavaScript doesn't know what to do with the next property in the set, which in this case is conf. In lieu of a viable workaround, JavaScript goes into a tailspin and enters full-on fail mode, stopping all script progression (until the next <script> tag, at least).

Because it's the first module invoked and it results in a fatal error, everything after it will cease to function, too. This explains why the help messages for the other three modules have stopped appearing.

In brief: add a comma after "{%link}<br />{%description}".

Fixing this tiny mistake results in a working script, as near as I can see. It's not the greatest of previews but you can see the fix in action over here.

@AMB Tanz & northwest: if you'd be kind enough to check that this isn't also the problem you were encountering, I would be very appreciative. I'm really certain what you've experienced isn't due to a conflict with anything else, but I can't say I'm 100% certain. Thanks, nancy!
nancy
 Posted: November 16th, 2013, 08:18 AM
Quote
Newbie
Posts:4Group:New MemberJoined:November 15th, 2013
Send Message


haha!! I kinda feel like an idiot now nwn, oh well. I did what you told me to and the code does now work! Magical uwu, thanks a lot Black!
Black
 Posted: November 16th, 2013, 08:21 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


No problem! If you ever have any other troubles, feel free to come ask again. ^_^
nancy
 Posted: November 16th, 2013, 10:11 AM
Quote
Newbie
Posts:4Group:New MemberJoined:November 15th, 2013
Send Message


Ahh, okay so I'm having some trouble again!

I don't know what I'm doing wrong, but I can't seem to get the subforumlist to work for me! I'm pretty sure I've got it right, but idk, am I missing something again?

CODE
<!DOCTYPE html>
<html>
   <head>
<title><% TITLE %></title>
<% CSS %>
<% JAVASCRIPT %>
<script src="http://elegantexpressions.us/black/cfs.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,300' rel='stylesheet' type='text/css'>
   </head>
   <body>
<div id="site-name">zhōngjiā <a href="/">忠家</a></div>
<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: "<div class='theboard'> <div class='boardlink'>{%link} • <div class='subboards'>{%subforumlist}</div></div> <div class='description'>{%description}</div></div>",
conf: {
 target:   "board",
 subforumSeperator: ", ",
 subforumNone:  "no subforums",
 addBefore:  false,
 addAfter:  false,
 dateDefault:  "--",
 titleDefault:  "----",
 authorDefault:  ""
}
});
customStats.init({
html: ""
});
customProfile.init({
html: ""
});
customTopics.init({
html: ""
});
</script>
 <div id="skin_selector">
         <% SKIN_SELECTOR %>
     </div>
     <% COPYRIGHT %>
     <script>$('#logo a img[src="style_images/1/spacer.gif"]').replaceWith('<!-- |board_name| -->');</script>
    </div>
</div>
   </body>
</html>
Black
 Posted: November 16th, 2013, 10:36 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


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."
nancy
 Posted: November 16th, 2013, 10:51 AM
Quote
Newbie
Posts:4Group:New MemberJoined:November 15th, 2013
Send Message


I'm not having a problem with the output, at least I don't think that's what's wrong. It's more along the lines I get this when I have {%subforums} in the code? Because even if the board didn't have subboards it should just show up "false" right? nwn I'm sorry, I know little to nothing about Javascript and I really have no clue what I'm doing.
Black
 Posted: November 16th, 2013, 11:09 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Oh, hey. I apparently typo'd that variable name within the script by mistake. It ought to be {%subforumlinks}, not {%subforumlist}. The documentation isn't complete yet and I rushed what's already up there. Try swapping the two and see if it helps any.

I can't change this at the moment but I'll work on it later when I can. Whoops!

Edit: Alright, changes committed. If nothing on your end changes, try clearing your browser's cache and see if that helps.

This post has been edited by Black: November 16th, 2013, 02:05 PM
northwest
 Posted: November 16th, 2013, 09:54 PM
Quote
Member
Posts:10Group:MemberJoined:November 6th, 2013
Send Message


just added it now and got the message! so, there's progress, at least xD I'll update this when I get it set up!

edit added the comma in and it works!!! thank you so much, Black!

This post has been edited by northwest: November 16th, 2013, 10:04 PM
Black
 Posted: November 17th, 2013, 01:28 PM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


Excellent! I'm glad to hear that resolved the issue. I was really, really worried for a second there, the idea of having a script conflict with jQuery of all things made me want to pass out. It's just too popular a library to cause problems with, you know? Hopefully AMB Tanz will confirm this was also the problem she was having and put all my fears to rest.



This is slightly unrelated but last night ElusiveMe discovered a glitch with the script in regards to custom profile fields on the IPB1.3.1 default user profile(this shouldn't be an issue on the personal portal-style profile): if the number of a user's awards is set to display in their profile, the custom field variables are all offset by one- {%field#1} becomes {%field#2}, and so on. I can't adjust the script to account for this behavior right now but I think by going under System Settings -> User Profiles and changing some of the award display settings at the bottom you can get things to behave more predictably.

Just a public service announcement. Thanks for using my script, everybody!
Kenz
 Posted: November 20th, 2013, 05:25 PM
Quote
Newbie
Posts:2Group:New MemberJoined:November 20th, 2013
Send Message


I've seen someone use this and their subforums end up having the same formatting as their main forums on the board. When I try to implement this handy restructuring my subforums don't take on the structuring and still have the old structure. Is there something I am somehow missing? this is the current coding for the index.

CODE

customIndex.init({
page: "idx",
page: "idx",
html: "<div style='width: 440px; height: 150px; padding: 25px 0px 0px 0px; background-color: #e5ddcb; border-bottom: 1px solid #e5ddcb; border-top: 1px solid #e5ddcb; float: left;'><center><div style='text-align: center; font-family: libre baskerville, serif; font-size: 15px; font-weight: lighter; letter-spacing: -1px; margin-bottom: 4px;'>{%link}</div>{%description}<div style='font-family: monda; margin-top: 4px; font-size: 8px; width: 250px; padding: 15px; background-color: #524656; text-align: justify; line-height: 9px; text-transform: uppercase; color: #fff;'>post by {%lp-author} ({%lp-date}) <br> latest thread: {%lp-title}</div></center></div>",
conf: {
 target:   "board",
 subforumSeperator: ", ",
 subforumNone:  "This forum has no subforums.",
 addBefore:  false,
 addAfter:  "<div style='clear: both;'></div>",
}
});
Email
Black
 Posted: November 21st, 2013, 07:31 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


The page property should be <!-- |input_act| -->, and not idx. You're also defining it twice, when it only needs to appear in the source once. Try this:

CODE
customIndex.init({
page: "<!-- |input_act| -->",
html: "<div style='width: 440px; height: 150px; padding: 25px 0px 0px 0px; background-color: #e5ddcb; border-bottom: 1px solid #e5ddcb; border-top: 1px solid #e5ddcb; float: left;'><center><div style='text-align: center; font-family: libre baskerville, serif; font-size: 15px; font-weight: lighter; letter-spacing: -1px; margin-bottom: 4px;'>{%link}</div>{%description}<div style='font-family: monda; margin-top: 4px; font-size: 8px; width: 250px; padding: 15px; background-color: #524656; text-align: justify; line-height: 9px; text-transform: uppercase; color: #fff;'>post by {%lp-author} ({%lp-date}) <br> latest thread: {%lp-title}</div></center></div>",
conf: {
 target:   "board",
 subforumSeperator: ", ",
 subforumNone:  "This forum has no subforums.",
 addBefore:  false,
 addAfter:  "<div style='clear: both;'></div>",
}
});


That wrapper variable in particular has been known to spontaneously change to idx in the actual wrappers for no foreseeable reason. It's been a problem for my script since the first edition. Try switching it and see if it helps!

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


 


 

   Chatbox
's reputation