V5 INFO CENTERS, guide
POST CREATED Dec 22, 2014 22:51:38 GMT -8
redox-kun, minnie, and 5 more like this
Post by SEADRA on Dec 22, 2014 22:51:38 GMT -8
info centers for dummies
Alright alright alriiiighttttt Imma try this real quick cause I just attempted this feat and am pretty confident with it. I struggled with this originally because I absolutely hate anything proboards default, but with my new skin on FITC I feel like I have mastered the basics enough to teach you all so you can take it and ~*~*~soar~*~*~ so come, young Padawans, it's time to party. Also forgive, I have currently been up for eighteen hours lmao. This is going to be very rough and more of a guide than a tutorial, since it can't be very specific since designs vary. There is no coding direction at all in this I am sorry, I am kind of assuming the reader knows basic HTML. If you want something more specific, please respond to this thread and I'll type something up! ;D Also, if you have questions on anything please do PM me or respond to this thread and I'll try to explain it the best I can
1. Where do you find your info center template?
2. Getting Started
Finally, click save and see what you did! This is a learning process and in my opinion, can't REALLY be taught since you do have to learn to read the attributes and just diving in is the best way to do it If you have some attributes left over, delete them, Now you know you don't need them. (: It will take lots of tweaking to get just right, but if you take a deep breath, step back and look at it in pieces it helps. Or, if you get fed up, walk away for a while. You've probably been staring at the computer for too long anyway. Have fun kiddos, and good luck out there.
1. Where do you find your info center template?
To get to your info center template, you simply go to Admin > Themes > Layout Templates > Home. Around line 25 is where you'll find the attribute (idk what they're called, the {if things, I call them attributes so just fyi) {if $[show_stats]}. This is where your Info Center template starts.
2. Getting Started
Now, the first thing that I do before I start ripping this template apart, because it is literally awful-looking, is come up with a design. I usually design everything as a Photoshop image before I start coding, but you can use Paint or any other program, or you can just have something in your head. Whatever the case, before you start coding this you should have a general idea of what you want to do.3. Which attributes do I need?
Next, open up Notepad, Word, Google Docs, or any program that you can copy and paste things into. We will be copying and pasting the different attributes and storing them in our document so we can easily paste them into the template as well as isolate and identify what each one is.
This may seem daunting but there are roughly 34 individual attributes in this template. Because of that number, I am not going to list every single one and tell you what they are. A lot of them go together or are inside another attribute so it may look confusing at first. Take a deep breath and identify where the {if 's start and {/if}'s end, as well as recognize anything that starts with a $[ as these are the individual attributes, and these are followed by names which make them easy to identify what's what. Pick them apart and organize them how you need to in your Notepad documents in a way that makes sense to you.
The only truly confusing one, in my opinion, is the Users Online list & Users in the Last 24 Hrs List. Jsyk, the Users Online list goes from {foreach $[online_user]} to {/if}, on the default coding this is line 80 to 85. The last 24hrs list goes from {foreach $[online_user_24]} to {/if}, or line 105 to 110.
Well, the fun fact is that you don't need any of them, really. You could completely take out your info center codes and your site would still be fine. The info center is a simple table (<table><tr><td>INFO!</td></tr></table>) with all of the different pieces in it. I, personally, would keep all of them in your document and not take out any until I was absolutely certain that I didn't need them.4. Coding?
Now, this may sound crazy but I want you to go from line 25 to the end of the template and press delete. Yep. Delete all of it, we're starting from scratch. If you feel uncomfortable doing that, just make a new document and paste it there - but remember there is always the Reset to Default button at the top, which will bring back the original default CSS coding if you screw up. Easy peasy.5. Placement
I do not recommend the above technique for all of the templates. Lololol.
Ok, remember that design you drew up, or had in your head, or whatever? It's time to bring that to life. Code it however you normally would and simply leave a space or a word or whatever for the different attributes that we will be putting in later (such as total members, last updated post, users online, etc.). This makes it less overwhelming for you to code, rather than staring at a bunch of symbols and letters and absolute ridiculousness and not even knowing where to start.
The cool thing about v5 is that you can delete and edit literally every aspect of the template. You can delete the info center title and come up with something completely different and out of this world, you can call your members losers, and so much more.
You can use divs, styles, css, tables, html, anything in your coding! If you don't know how to use these things or are unfamiliar with them, there are so many tutorials out there - simply Google what you're looking for and you'll get approximately 8 billion hits.The coding that you learn on those websites will mostly translate into v5, with some slight changes but not many (none that I know of)
After you are done coding your template SAVE IT and refresh your home page. Check to see that the codes are working and everything is in place. If they aren't, you can edit it or get someone else to help you out. Now, you can start adding in your attributes. This may take some adjusting and styling to get perfect, but they should all fit nicely into place. You can move around whatever attributes you want and put divs around them and layer them and whatever you need to do.6. Changing Fonts & Links & Stuff
The fonts may look a bit wonky, since PB has this annoying default font override (especially for links), but no worries, the next point will tell you exactly how to fix that.
This is really simple, honestly. To change the fonts in your template, you must add a class. Now, I personally like everything in the template with me and make tiny adjustments as I go, so I can't stand using the master CSS page while trying to edit my templates so I just write my styles right into the template. In order to do this, go either above or below your template (whichever you prefer, it doesn't matter) and make this:<style>This is a stylesheet, if you were unfamiliar with it. Next, you can type up something like this:
TEXT WILL GO HERE
</style><style>I just made a CSS Class named "dummy" and edited the regular link, and the visited link, aspect of the class. Now, you can add that class to whatever portion of your info center that you want to have that specific style, or add it to everything. Just remember that when you add another class (<div class="dummy">text here</div>) it will move your text to another line. You may have to make adjustments.
.dummy a:link, .dummy a:visited {
color: #fff;
font-family: comic sans;
font-size: 12pt;
text-transform: uppercase; }
</style>
Finally, click save and see what you did! This is a learning process and in my opinion, can't REALLY be taught since you do have to learn to read the attributes and just diving in is the best way to do it If you have some attributes left over, delete them, Now you know you don't need them. (: It will take lots of tweaking to get just right, but if you take a deep breath, step back and look at it in pieces it helps. Or, if you get fed up, walk away for a while. You've probably been staring at the computer for too long anyway. Have fun kiddos, and good luck out there.