Hello
Welcome to Slightly Insane! You are currently not logged in, so some parts of the forum are partially hidden. Join us to get access to the community and all of our members-only content, including ProBoards themes, codes, graphic design resources, and more!
Smangii's Theme Guide for ProBoards v5
May 7, 2013 14:27:01 GMT -5
Using this guide, you will learn:
[/b][li]How to use the Visual Editor[/li]
[li]Remove rounded corners[/li]
[li]How to use Layout Templates[/li]
[li]Adding a Border Around Forum (second background)[/li]
[li]Changing notification bubbles[/li]
[li]Changing banner / logo to be fluid or fixed[/li]
[li]Adding Side Tables (with a plugin)[/li]
[/ul]
If you are VERY new to ProBoards, I would recommend reading the following first:
Wait... what are themes?
A ProBoards v5 theme is pretty much the same thing as a ProBoards v4 skin. The overall look and feel to your forum which involves changing colors and graphics to get a specific style that you want.
A ProBoards v5 layout template is more like a ProBoards v4 code mod. It changes the structure/look of boards, threads, mini-profiles, and the main page. Layout templates still appear like codes (you copy and paste them into your forum) but they are now integrated into themes, and can be saved and customized for any theme on your forum. We'll get into this more later, but that's the general idea.
How do I install a theme?
ProBoards v5 has introduced an official Theme Library which makes it VERY easy for any user to preview and install some themes. To the bottom right of every theme listed you can see this:
Free
and you might see this too: 
If you click the right arrow with the folded paper icon, the theme will automatically be installed on your forum's admin panel. ProBoards can detect which forum you are logged in on, and as long as you are an admin of that forum it will do steps 1- 4 for you, so you can skip down to Part 2!
If you click the downward arrow, you will be promoted to download a ProBoards theme file, known as a .pbt
Not every theme ever made is listed in this library!
Some creators who do NOT submit their theme to the library will still have a download link for a .pbt
Wherever you download the file from, save the file to your computer, and you can import this file into your admin panel.
Here are the instructions on how to do so:
Step 1
Go to your admin panel and click on Themes > Theme Manager
Step 2
Click the button "Create New/Import Theme"
Step 3
Click this button!
Step 4
Follow the instructions, find the saved file, and then you're done!
Now if you repeat step 1, you will see your newly imported theme in the list
First and foremost, we need to actually make a new theme. So scroll up and follow steps 1 and 2 of installing a theme, but instead, click this button:
Then, give your theme a name. We will use the default theme to customize, so you can now click "Save and Continue".
You should now be looking at a Settings page, where you can edit the theme name, description, Forum title, theme version, etc. This settings page also contains tabs: Images, Groups & Ranks, and Export. The Images tab is where you upload/replace the default icons for a theme. The Export tab is where you can submit your theme into the Theme Library, or save it as a .pbt file for others to install on their forums.
You can either change the settings and images to your liking, or continue with me on the next step.
In the admin panel, click on Themes > Colors & Theme Creator. We will start with ProBoard's Easy Theme Creator to introduce you to the terms, admin panel, and because it's handy. Here's a visual:
In the Easy Theme Creator, you will find different color schemes to already choose from, settings for your forum banner (this is where you can change the background of your banner, not your logo), you can adjust your forum width, gradients to use on title bars, and your forum's overall background.
First, I'm going to edit my forum's colors by clicking this button:
The Forum and Title Bars sections of this window are pretty easy to understand, but Buttons, Containers, and Pagination are all new areas to customize in v5. The best way to know what each section refers to is to change the colors!
As in v4, ProBoards lets you input Hex codes as colors, which are 6 digit numbers that represent a color.
Some great sites that give hex codes and color ideas:
kuler.adobe.com
www.colorschemer.com/online.html
colorschemedesigner.com/
I decided to use this color scheme, something I made very quickly and simply:
From left to right the codes are: #414141 ; #5a5a5a ; #b9b9b9 ; #db9225 ; #db9225
One thing very hand to note is the live preview that is now embedded into ProBoards v5. When you make changes (and before you save) you can preview how your forum looks. This preview will either be on the very right of your page, or at the bottom of the page. If you can fullscreen your window, it is best to do so in order to avoid scrolling up and down a lot.
So using the above colors as a general guideline, I came up with this skin layout.
Also don't forget the few options below colors, where you can add a banner background, adjust gradients, and add a forum background.
I chose a simple, subtle background pattern from subtlepatterns.com/ They are fabulous!
So, here is what my screen looks like so far after some tinkering with just these settings:
After you get a satisfying color scheme, remember to hit Apply Color Scheme and then Save Changes.
Technically, you can be finished! That's the easiest way to make a theme fast, but if you want a little more customization to your theme, continue with me to the next step...
Once you've saved your theme, head over to Admin Panel > Themes > Advanced Styles & CSS. Here's the visual:
Right now, you are looking at the Visual Editor. The Visual Editor is like a separate admin panel for JUST your forum's CSS, or stylesheet. It works just like the "Modify Skins" admin panel did in v4.
This editor makes it easy to FURTHER customize your forum beyond colors. This includes fonts, font sizes, backgrounds, borders, rounded corners, and nearly anything you see on the preview pane, you can edit here! Make sure you know where your Live Preview is (either at the bottom of the page or to the right) and be sure to use it! It becomes extremely helpful while using the Visual Editor.
The Visual Editor is set up like using an outline, you click on the title sections (like Background or Body (Content) or Categories (Board Lists)) and they will expand into further, sub-sections such as Containers or Column Alignments. Even those sub-sections can have sub-sections, and so on. I'd recommend just clicking around and opening up sections to see how deep they can go, it's important to make sure you know where you are because some sections are named the same thing. For example, there are multiple "Text" sub-sections that edit different text parts.
Try expanding Background section and looking at the options. The color and background image (if you selected one) should already be there. And, you can choose the position and attachment settings that suit your needs, just like you could in v4. You can also use the visual editor to change the forum's width by clicking on Width and adding a number in % or in pixels (px). The customization you made in the Easy Theme Creator carries over to the visual editor, and vice versa.
Just to practice using it, let's try changing the forum's font!
Go under Text Styles > Default Forum Text > Font Family. You can either type in your own font, or select from the drop-down list that ProBoards provides you. I changed my font to "Tahoma, Geneva, sans-serif". You can also adjust the Font Size and Text Color to your liking.
Here's a visual of expanded vs closed section and the font selection:
A quick note about fonts: If the viewer of your forum doesn't have the font on their computer, they won't be able to see what you chose. So it's always good to provide a "Backup" font, by typing in 2 or 3 fonts separated with commas.
Now, if you have a good eye, you'll notice that doing that change doesn't change ALL the fonts on the forum. The title, menu/navigation bar, and button text still stayed the same. So let's go and edit those sections!
For the main title, go to Header (Top) > Forum Banner > Banner Text. Find Font Family, and change it!
For the menu/navigation bar, it's a little trickier! In Header (Top) expand the Navigation Bar, then expand Welcome Text and Button, then in Button, expand Text. Whew! I told you it was easy to get lost. Now edit the Font Family under Welcome Text, and then Text (under Button).
Got that? Now feeling confident? Go edit the fonts for the Buttons to match!
After you're finished, remember to save your changes! A handy way ProBoards lets you know if you've saved (or need to save) is this orange button:
If you see this orange button, it means you haven't saved your changes. Remember to preview your changes first (using the Live Preview) and check your actual forum to see the changes in full light.
As you can see, there is a lot less coding involved than in v4. You can have a LOT of control with the Visual Editor to continue modifying and customizing your forum, without the use of codes. Many of this editing could only be done with codes in v4, and you still have that option. If you know what CSS is and are good with it, feel free to make the same types of changes and edit the CSS directly. Here is where that option is located:
Heed the warning, of course! Advanced users implies that you are skilled with CSS. BUT, even if you are not 100% skilled and know some basics, you still can use this type of editing method. Just remember to use comments, such as: /* comment */ that blocks out parts of code to save, without affecting the forum. Always make a copy of the default code, and save a backup on your computer or even on another theme.
You can also use comments to help yourself by keeping notes in your CSS, here is just an example to help you understand:
As far as including layout templates with your themes, you may be asked to input CSS, so it is handy to know and use. BUT, this is not where you put the Layout Template codes. I will cover layout templates in section 3, so if you are done with learning about the Visual Editor and what it can do, feel free to skip!
Find your way back to the Visual Editor tab. Something different you may or may not have noticed about v5 is it's default rounded edges, or rounded corners. If you like these, feel free to leave them the way they are. But, they can make a lot of difference if changed or removed. The Visual Editor makes it easy to do this! Also, you can change the column alignment for the main page (boards) and thread columns, something that was commonly changed with codes in v4.
First we'll edit the rounded edges of the categories and main containers. Expand to: Body (Content) > Containers > Content Areas. Find Border Radius and adjust that to be smaller (less than 5px), no roundedness (0px) or larger (more than 5px). I'm going to give only a slight softness to the corner by using 2px.
Next, we have to fix the rounded edges of the title bars. Under Containers, find Title Bars and edit the Border Radius to your liking. Again, I'll use 2px to be consistent.
Finally, you can adjust the rest of the rounded edges that exist on the default Content Area Containers, and then in the Header (Top): Navigation Bar, and Navigation Tree Container. I'm sure there are more places, too, but you can explore them for yourself!
Here is the before and after of 10px border-radius to 2px border-radius:
First, we'll edit the main page/board alignments. Let's say you want the main boards to be justified and the last post column to be left align, instead of right? Expand Categories (Board Lists) > Column Alignments. Change Main to "justify" and Last Post to "Left". That was easy!
The same can be done for the threads listing within a board. Just click on Boards (Thread Lists) > Column Alignment ... having trouble finding it? It's grayed out, because it's probably not visible in your Live Preview. This doesn't effect whether or not you can customize it, though. Just click on a board and show some threads in your Live Preview, and the title will turn Black!
That's pretty much it ... now go explore some more!
In order to best explain how a layout template works, we are going to implement one. For this tutorial, I will show how to change the default info center:
Into this info center, with all the icons on the left and the title is now "Info Center". This may not be the best looking layout template (and there are some very neat ones out there, especially for the info center) but it'll teach you the basics so you can add them yourself.
First, go to Admin > Themes > Layout Templates, or Admin > Structure > Layout Templates, as shown:
First thing you may see is the warning, but don't be deterred by it. It is not hard to learn best practices when installing layout templates, but it can cause some confusion and chaos. In the event that something goes awfully wrong, you can still reset your layout templates to the ProBoards default. BUT, to avoid doing that, it is best to learn how to comment and hide sections, similar with editing CSS.
So here is the layout templates section! (Sorry I scribbled all over it).
Some important things you want to know, though. The "Description" column/rows aren't exactly descriptions in the common sense, but they are sections of other layout templates that relate to the same feature. If you have a layout template that changes the boards, you will place that in "Board List" not Board. Same with thread templates, they belong in "Thread List" under Board, and not in Thread. Thread is meant for posting layout templates, like a splitting posts mod. Kind of confusing, I know.
Once you click on a template that has a description, you will see the tabs of sections at the top to place codes in their proper place. Also, each layout template has its own reset button, just in case. Here's a visual of the tabs, if you clicked on Board.
As I scribbled onto the image above last, the Info Center is on the Home template, since it is only seen on the homepage. So go ahead and click that, and take a look.
The Info Center template starts on Line 25, at this:
and it ends all the way at the bottom on line 122 (the last one) with a closing statement:
You will see a lot of these, and it is quite difficult to explain what they are--but they are important! Make sure you do not accidentally make a spelling error or delete a closing {/if} or the layout template (and your forum) won't function properly.
So now that we found where our layout template goes, we are going to first "comment out" and hide the old Info Center, as well as its code. In order to make a comment here, use <!-- this is my comment-->
We will use comments to save old code for safety and reference, as well as keep things organized. So here's my commenting, the grayed out darker text:
Be sure to get that last comment line in at the bottom!
Now that we have a place for our code to go, we must copy our Layout Template code. Here is the code for the info center layout template I am adding in this tutorial:
Copy the above, and paste it into your layout template for Home, exactly where the original info center belonged. You should place it right where you set a comment for the info, for example I will place it directly below this:
<!-- My new info center will go below
================================================ -->
Pasted it? Great!
Remember to hit the "Preview Changes" at the bottom to make sure everything is in order, and then save (if you want).
But let's say I want to change the name of the Info Center to "Forum Name's Info Center", where Forum Name would be your forum. For me, it would say "Smangii's Theme Guide Test Forum's Info Center". Sure, I guess I could type it all out, but we're going to use an easy method of grabbing the name of your forum.
Take a look at this:
First, off find the line of code that has your Info Center title. It should look something like this:
You can actually change it, just like this:
I've also scribbled over two other parts of the code for you to notice: $[image.stats] and "Threads and Posts". The Threads and Posts works similarly to the Info center title. BUT you can visibly tell that it looks differently in the preview. That's because the code "surrounding" the text is different. Compare "Threads and Posts" to the info center line above:
Because you don't see anything about "title-bar" or <h2> (which means heading, or title), the font and overall text looks different. This doesn't mean you can't edit it! Try changing it to this:
Finally, what is that weird $[image.stats] thing? Well, it's ProBoards way of making things easier, for you. If you scroll through the code, you will see a lot of things with $ and [ ]. They are called Variables, but I like to think of them as placeholders. They contain stuff that you can edit elsewhere in the admin panel. The $[image.stats] is actually the first info center image (icon with the bars and graph). Because you can edit this image in the Theme Settings > Images, this little bit of code is just a placeholder for that image. It already adds the code in for you!
So let's try adding a different placeholder: our forum's name! Go back up to the Info Center text/title, and place your cursor right after the <h2>, but before Info Center. This is where we will add our placeholder. If you look to the far right, you will see a table/list with the heading Loops and Variables. This works similarly to the Visual Editor, where you can expand sections and see sub-sections.
Click on the arrow next to Forum to expand it, DO NOT DOUBLE CLICK ON THE ITEM! Double clicking actually adds the placeholder/variable into your code. When you see "name", double click on that! It will automatically add the placeholder into your code, exactly where your cursor/mouse pointer last was. Here's a visual:
Now, your info center line should look like this:
All we have to do is add some simple possession and spacing...
And we did it! Preview or save your changes and check out your new info center. Here is what my theme looks like so far:
This was in my original skin guide for v4, so I decided to include it in the v5 guide too. Plus, it adds a nice touch to any theme and can be very useful! I will use some of the same methods as in v4, so I'm going to copy and paste what I wrote since I think I explained it nicely.
Just like adding a border around forum in v4, this can be done with CSS...but easier!
Head over to your stylesheet by going to Admin > Themes > Advanced Styles & CSS. The click on the Stylesheet tab, and scroll down to find this line of code:
For me, it was on line 128. Do you remember how to comment? We are going to first hide/comment this section out, and label it as "old default code". Then we will make a new comment to where we will input our new, editing code. Here's what I have so far:
Here is the code I am going to add to the CSS. It is just edits and additions to the "wrapper" class, the old code that we hid/commented out.
Let's dissect this code a little bit.
width: @wrapper_width;
Remember that placeholder/variable stuff we were talking about in layout templates? ProBoards has them in CSS too, and this is what they look like. Instead of $[name] it looks like @name. This number is the width of your forum that you set in either the Easy Theme Creator or Visual Editor.
overflow-x: hidden;
This is inherited from the old ProBoards default code. Doesn't effect us with our second background, so it's good to leave it.
margin: 20px auto 20px auto;
padding: 15px 20px 5px 20px;
These two properties share something in common, they both (can) have 4 values, in a very specific order. Top, Right, Bottom, Left. (I have a trick to remember this order, think TROUBLE... TRBL. )
For margin, the top and bottom are set to 20px so that there is some space between the very top or very bottom of the forum/banner and the window. The sides (left and right) are set to auto so that the forum centers itself on the page/window.
For padding, the top is set to 15px to give more room between the start of the second background/border and the banner. The bottom is set to 5px because it doesn't need as much room, and the sides are equal.
background: rgba(255,255,255,1);
border: 5px solid #3C9CB4;
These two share something in common, too. They both have color values. You can either use a Hex color, such as the border does, or using rgb(a) such as the background does.
RGB is a value of three numbers, ranging from 0 to 255. The first number is the "R" value, the second is the "G" value and the third is the "B" value. The optional fourth number, in this case it is 1, is the opacity. How transparent do you want the color to be? 0 Is completely invisible, and 1 is 100% visible. How do you find these RGB numbers? You can use a tool like Photoshop or Paint, or even an online color site such as ColorSchemer Online that will give you RGB values for any Hex color you enter.
For background, it doesn't have to be a color. You can input an image in here too, by doing this: background: url(imageurl.png);
For border, this is also optional depending on your taste. You can adjust 5px to any size, and even use rgba to give a transparent border. You can also use border-bottom: 5px; or border-top: 20px; to give just the top, right, bottom, or left sides a border!
border-radius: 2px;
Just like in the visual editor, this adds roundness to your second background/border around forum.
Using the exact code from above, here is what my forum looks like. It's not pretty, but it's to show you what I explained above:
To fit with my theme more, I adjusted some values. Here is my new code:
And here is the result!
Of course, I have my own idea of what good design is so I'm going to run through some quick changes that are easy enough to make just to add that extra "umph" to your theme. These are totally optional, too... and editable!
One thing I don't like about the default ProBoards theme is its design for the notifications bubble, as shown:
Instead, I want to change it to be a circle, not a message bubble, and have it to the right of the menu button, like this:
To do this, we will have to edit some simple CSS. Admin > Themes > Advanced Styles & CSS
In your code, find these lines:
Now comment/hide them! Use /* and */ and make sure to label it "Old code for notifications", or something along those lines.
Next, add a comment to where your new code is going to go, and paste this code:
You can adjust the size of your bubble by adjusting the padding here: padding: 4px 6px 4px 6px; The more padding, the bigger the bubble. Remember TROUBLE/TRBL (Top, Right, Bottom, Left)
You're almost there! If you see more of a square than a circle, all you have to do is edit the border radius of the notification bubble. There are 2 ways to do this. Either scroll up a tiny bit and find this bit of css:
And change that to 20px or greater, depending on how it looks on your forum.
Way #2 would be to edit it with the Visual Editor. Save your changes, and switch over to the Visual Editor tab. Expand to this section:
Header (Top) > Navigation Bar > Notification Bubbles
Now just edit the border-radius! Something very neat (and if you haven't already noticed) is the small icon next to border radius. Click the small arrow to show more options, and mess with the choices. They can produce very cool effects.
Something that a lot of people like is to make their banner and navigation fluid by having it stretch all the way across the forum, from right to left. So we are going to edit the layout template from this:
To this:
Head over to Admin > Themes > Layout Templates. Then click on the Forum Wrapper template.
Find this piece of code (mine is on line 14).
Copy it to your clipboard (ctrl or command + c) and then comment/hide it by using <!-- and -->. Type something like "this is where wrapper originally was", like so:
Then scroll down to find this part:
And paste (ctrl + v) the copied code directly above it. Feel free to add a comment to tell yourself and others what you moved the code for!
Now you can either save or preview your changes.
Looks great, now we just need to add a logo.
Head over to Admin > Themes > Theme Manager.
When you hover over your theme name, you will see a button for "Images". Click it!
The very top section, you should see something like this. Either link or upload your logo image, and it should automatically save and appear on your forum if you refresh.
If it doesn't appear, then you'll have to go to the Settings Tab and change Forum Title to Display Logo.
Here's what my forum design looks like now!
Everybody's favorite, right? Well this has been made SUPER easy in v5! Instead of layout templates, though, we are going to add a plugin to your forum. Plugins are like admin-editable codes back in v4, they have their own control panels and settings that you can edit, customize, and add content to. IMPORTANT! You can only have 40 plugins per forum, and will have to purchase (With real $$$) the ability to have more plugins.
Back in the admin panel, go to the top and hit Plugins > Plugin Library
Right away you are taken to the Plugin Library page, and you should see a format similar to the Theme Library. Well, it also works the same way! The only difference is that a plugin is a .pbp file, whereas a theme is a .pbt file. The easiest way, however, is to install the plugin by clicking the Install button to the far right:
You should see the Sidebar plugin on the first page, but if you don't, have a search for this:
Sidebar Redux By Brian Ordonez
Once you install it, you are directly taken to the plugin settings. Make sure to read all instructions, and then you will have your side tables!
© Smangii.ProBoards.com -- Please, do NOT post this on other forums, but feel free to copy the link/image and share with your members and friends!
[url="http://bit.ly/13fVJuh"][img src="http://i.imgur.com/h0h0ENx.png"][/url]
Lots of people requested that I remake my previous skin guide (link to it here) for users to learn v5, and I accepted
So here it is! A beginner's guide to ProBoards v5 themes, I will (hopefully) teach you how to make a good looking theme!
So here it is! A beginner's guide to ProBoards v5 themes, I will (hopefully) teach you how to make a good looking theme!
Using this guide, you will learn:
[/b][li]How to use the Visual Editor[/li]
[li]Remove rounded corners[/li]
[li]How to use Layout Templates[/li]
[li]Adding a Border Around Forum (second background)[/li]
[li]Changing notification bubbles[/li]
[li]Changing banner / logo to be fluid or fixed[/li]
[li]Adding Side Tables (with a plugin)[/li]
[/ul]
If you are VERY new to ProBoards, I would recommend reading the following first:
Wait... what are themes?
A ProBoards v5 theme is pretty much the same thing as a ProBoards v4 skin. The overall look and feel to your forum which involves changing colors and graphics to get a specific style that you want.
A ProBoards v5 layout template is more like a ProBoards v4 code mod. It changes the structure/look of boards, threads, mini-profiles, and the main page. Layout templates still appear like codes (you copy and paste them into your forum) but they are now integrated into themes, and can be saved and customized for any theme on your forum. We'll get into this more later, but that's the general idea.
How do I install a theme?
ProBoards v5 has introduced an official Theme Library which makes it VERY easy for any user to preview and install some themes. To the bottom right of every theme listed you can see this:
Free
and you might see this too: If you click the right arrow with the folded paper icon, the theme will automatically be installed on your forum's admin panel. ProBoards can detect which forum you are logged in on, and as long as you are an admin of that forum it will do steps 1- 4 for you, so you can skip down to Part 2!
If you click the downward arrow, you will be promoted to download a ProBoards theme file, known as a .pbt
Not every theme ever made is listed in this library!
Some creators who do NOT submit their theme to the library will still have a download link for a .pbt
Wherever you download the file from, save the file to your computer, and you can import this file into your admin panel.
Here are the instructions on how to do so:
Step 1
Go to your admin panel and click on Themes > Theme Manager
Step 2
Click the button "Create New/Import Theme"
Step 3
Click this button!
Step 4
Follow the instructions, find the saved file, and then you're done!
Now if you repeat step 1, you will see your newly imported theme in the list
Smangii's Theme Guide for
ProBoards V5
ProBoards V5
Step 1 - Creating a new theme
First and foremost, we need to actually make a new theme. So scroll up and follow steps 1 and 2 of installing a theme, but instead, click this button:
Then, give your theme a name. We will use the default theme to customize, so you can now click "Save and Continue".
You should now be looking at a Settings page, where you can edit the theme name, description, Forum title, theme version, etc. This settings page also contains tabs: Images, Groups & Ranks, and Export. The Images tab is where you upload/replace the default icons for a theme. The Export tab is where you can submit your theme into the Theme Library, or save it as a .pbt file for others to install on their forums.
You can either change the settings and images to your liking, or continue with me on the next step.
Step 2 - Coloring with the Easy Theme Creator
In the admin panel, click on Themes > Colors & Theme Creator. We will start with ProBoard's Easy Theme Creator to introduce you to the terms, admin panel, and because it's handy. Here's a visual:
In the Easy Theme Creator, you will find different color schemes to already choose from, settings for your forum banner (this is where you can change the background of your banner, not your logo), you can adjust your forum width, gradients to use on title bars, and your forum's overall background.
First, I'm going to edit my forum's colors by clicking this button:
The Forum and Title Bars sections of this window are pretty easy to understand, but Buttons, Containers, and Pagination are all new areas to customize in v5. The best way to know what each section refers to is to change the colors!
As in v4, ProBoards lets you input Hex codes as colors, which are 6 digit numbers that represent a color.
Some great sites that give hex codes and color ideas:
kuler.adobe.com
www.colorschemer.com/online.html
colorschemedesigner.com/
I decided to use this color scheme, something I made very quickly and simply:
From left to right the codes are: #414141 ; #5a5a5a ; #b9b9b9 ; #db9225 ; #db9225
One thing very hand to note is the live preview that is now embedded into ProBoards v5. When you make changes (and before you save) you can preview how your forum looks. This preview will either be on the very right of your page, or at the bottom of the page. If you can fullscreen your window, it is best to do so in order to avoid scrolling up and down a lot.
So using the above colors as a general guideline, I came up with this skin layout.
Also don't forget the few options below colors, where you can add a banner background, adjust gradients, and add a forum background.
I chose a simple, subtle background pattern from subtlepatterns.com/ They are fabulous!
So, here is what my screen looks like so far after some tinkering with just these settings:
After you get a satisfying color scheme, remember to hit Apply Color Scheme and then Save Changes.
Technically, you can be finished! That's the easiest way to make a theme fast, but if you want a little more customization to your theme, continue with me to the next step...
Step 3 - Using the Visual Editor
Once you've saved your theme, head over to Admin Panel > Themes > Advanced Styles & CSS. Here's the visual:
Right now, you are looking at the Visual Editor. The Visual Editor is like a separate admin panel for JUST your forum's CSS, or stylesheet. It works just like the "Modify Skins" admin panel did in v4.
This editor makes it easy to FURTHER customize your forum beyond colors. This includes fonts, font sizes, backgrounds, borders, rounded corners, and nearly anything you see on the preview pane, you can edit here! Make sure you know where your Live Preview is (either at the bottom of the page or to the right) and be sure to use it! It becomes extremely helpful while using the Visual Editor.
The Visual Editor is set up like using an outline, you click on the title sections (like Background or Body (Content) or Categories (Board Lists)) and they will expand into further, sub-sections such as Containers or Column Alignments. Even those sub-sections can have sub-sections, and so on. I'd recommend just clicking around and opening up sections to see how deep they can go, it's important to make sure you know where you are because some sections are named the same thing. For example, there are multiple "Text" sub-sections that edit different text parts.
Try expanding Background section and looking at the options. The color and background image (if you selected one) should already be there. And, you can choose the position and attachment settings that suit your needs, just like you could in v4. You can also use the visual editor to change the forum's width by clicking on Width and adding a number in % or in pixels (px). The customization you made in the Easy Theme Creator carries over to the visual editor, and vice versa.
Just to practice using it, let's try changing the forum's font!
Go under Text Styles > Default Forum Text > Font Family. You can either type in your own font, or select from the drop-down list that ProBoards provides you. I changed my font to "Tahoma, Geneva, sans-serif". You can also adjust the Font Size and Text Color to your liking.
Here's a visual of expanded vs closed section and the font selection:
A quick note about fonts: If the viewer of your forum doesn't have the font on their computer, they won't be able to see what you chose. So it's always good to provide a "Backup" font, by typing in 2 or 3 fonts separated with commas.
Now, if you have a good eye, you'll notice that doing that change doesn't change ALL the fonts on the forum. The title, menu/navigation bar, and button text still stayed the same. So let's go and edit those sections!
For the main title, go to Header (Top) > Forum Banner > Banner Text. Find Font Family, and change it!
For the menu/navigation bar, it's a little trickier! In Header (Top) expand the Navigation Bar, then expand Welcome Text and Button, then in Button, expand Text. Whew! I told you it was easy to get lost. Now edit the Font Family under Welcome Text, and then Text (under Button).
Got that? Now feeling confident? Go edit the fonts for the Buttons to match!
After you're finished, remember to save your changes! A handy way ProBoards lets you know if you've saved (or need to save) is this orange button:
If you see this orange button, it means you haven't saved your changes. Remember to preview your changes first (using the Live Preview) and check your actual forum to see the changes in full light.
Step 4 - CSS and Stylesheets
As you can see, there is a lot less coding involved than in v4. You can have a LOT of control with the Visual Editor to continue modifying and customizing your forum, without the use of codes. Many of this editing could only be done with codes in v4, and you still have that option. If you know what CSS is and are good with it, feel free to make the same types of changes and edit the CSS directly. Here is where that option is located:
Heed the warning, of course! Advanced users implies that you are skilled with CSS. BUT, even if you are not 100% skilled and know some basics, you still can use this type of editing method. Just remember to use comments, such as: /* comment */ that blocks out parts of code to save, without affecting the forum. Always make a copy of the default code, and save a backup on your computer or even on another theme.
You can also use comments to help yourself by keeping notes in your CSS, here is just an example to help you understand:
As far as including layout templates with your themes, you may be asked to input CSS, so it is handy to know and use. BUT, this is not where you put the Layout Template codes. I will cover layout templates in section 3, so if you are done with learning about the Visual Editor and what it can do, feel free to skip!
Step 5 - Mastering the Visual Editor!
Find your way back to the Visual Editor tab. Something different you may or may not have noticed about v5 is it's default rounded edges, or rounded corners. If you like these, feel free to leave them the way they are. But, they can make a lot of difference if changed or removed. The Visual Editor makes it easy to do this! Also, you can change the column alignment for the main page (boards) and thread columns, something that was commonly changed with codes in v4.
Removing or Editing Rounded Edges
First we'll edit the rounded edges of the categories and main containers. Expand to: Body (Content) > Containers > Content Areas. Find Border Radius and adjust that to be smaller (less than 5px), no roundedness (0px) or larger (more than 5px). I'm going to give only a slight softness to the corner by using 2px.
Next, we have to fix the rounded edges of the title bars. Under Containers, find Title Bars and edit the Border Radius to your liking. Again, I'll use 2px to be consistent.
Finally, you can adjust the rest of the rounded edges that exist on the default Content Area Containers, and then in the Header (Top): Navigation Bar, and Navigation Tree Container. I'm sure there are more places, too, but you can explore them for yourself!
Here is the before and after of 10px border-radius to 2px border-radius:
Adjusting Text Alignments
First, we'll edit the main page/board alignments. Let's say you want the main boards to be justified and the last post column to be left align, instead of right? Expand Categories (Board Lists) > Column Alignments. Change Main to "justify" and Last Post to "Left". That was easy!
The same can be done for the threads listing within a board. Just click on Boards (Thread Lists) > Column Alignment ... having trouble finding it? It's grayed out, because it's probably not visible in your Live Preview. This doesn't effect whether or not you can customize it, though. Just click on a board and show some threads in your Live Preview, and the title will turn Black!
That's pretty much it ... now go explore some more!
EDITING LAYOUT TEMPLATES
Step 1 - Adding a Layout Template
In order to best explain how a layout template works, we are going to implement one. For this tutorial, I will show how to change the default info center:
Into this info center, with all the icons on the left and the title is now "Info Center". This may not be the best looking layout template (and there are some very neat ones out there, especially for the info center) but it'll teach you the basics so you can add them yourself.
First, go to Admin > Themes > Layout Templates, or Admin > Structure > Layout Templates, as shown:
First thing you may see is the warning, but don't be deterred by it. It is not hard to learn best practices when installing layout templates, but it can cause some confusion and chaos. In the event that something goes awfully wrong, you can still reset your layout templates to the ProBoards default. BUT, to avoid doing that, it is best to learn how to comment and hide sections, similar with editing CSS.
So here is the layout templates section! (Sorry I scribbled all over it).
Some important things you want to know, though. The "Description" column/rows aren't exactly descriptions in the common sense, but they are sections of other layout templates that relate to the same feature. If you have a layout template that changes the boards, you will place that in "Board List" not Board. Same with thread templates, they belong in "Thread List" under Board, and not in Thread. Thread is meant for posting layout templates, like a splitting posts mod. Kind of confusing, I know.
Once you click on a template that has a description, you will see the tabs of sections at the top to place codes in their proper place. Also, each layout template has its own reset button, just in case. Here's a visual of the tabs, if you clicked on Board.
As I scribbled onto the image above last, the Info Center is on the Home template, since it is only seen on the homepage. So go ahead and click that, and take a look.
The Info Center template starts on Line 25, at this:
{if $[show_stats]}and it ends all the way at the bottom on line 122 (the last one) with a closing statement:
{/if}You will see a lot of these, and it is quite difficult to explain what they are--but they are important! Make sure you do not accidentally make a spelling error or delete a closing {/if} or the layout template (and your forum) won't function properly.
Step 2 - Using Comments and Hiding Stuff
So now that we found where our layout template goes, we are going to first "comment out" and hide the old Info Center, as well as its code. In order to make a comment here, use <!-- this is my comment-->
We will use comments to save old code for safety and reference, as well as keep things organized. So here's my commenting, the grayed out darker text:
Be sure to get that last comment line in at the bottom!
Step 3 - Copy, Paste, Edit
Now that we have a place for our code to go, we must copy our Layout Template code. Here is the code for the info center layout template I am adding in this tutorial:
{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Info Center</h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td>
<table>
<tr>
<td class="icon">$[image.stats]</td>
<td class="info">
<table>
<tbody>
<tr><th>Threads and Posts</th></tr>
<tr><td>Total Threads: $[total_threads] Total Posts: $[total_posts]</td></tr>
{if $[last_updated_thread]}<tr><td>Last Updated: $[last_updated_thread.recent_link] by $[last_updated_thread.last_post.created_by_user] ($[last_updated_thread.last_post.date])</td></tr>{/if}
<tr><td>$[recent_threads_link] - $[recent_posts_link] - $[rss_feed_link]{if $[mark_boards_read_link]} - $[mark_boards_read_link]{/if}</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="icon">$[image.members]</td>
<td class="info">
<table>
<tbody>
<tr><th>Members</th></tr>
<tr><td>Total Members: $[total_members] Newest Member: $[newest_user]</td></tr>
<tr><td>Most Users Online: $[most_users_online] <span class="small">($[most_users_online_date])</span></td></tr>
<tr><td>$[birthdays_today_link]</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.online]</td>
<td class="info last">
<table>
<tbody>
<tr><th>Users Online</th></tr>
<tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, $[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}.</td></tr>
<tr><td>
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{/foreach}
{if $[total_online_not_shown]} , and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>
{/if}
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr class="last">
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.online_24]</td>
<td class="info last">
<table>
<tbody>
<tr><th>Users Online in the Last 24 Hours</th></tr>
<tr><td>$[total_staff_online_24] Staff, <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}</a>, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}.</td></tr>
<tr><td>
{foreach $[online_user_24]}
$[online_user_24]{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}$[online_user_24.comma]
{/foreach}
{if $[total_online_not_shown_24]} , and <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>
{/if}
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}
Copy the above, and paste it into your layout template for Home, exactly where the original info center belonged. You should place it right where you set a comment for the info, for example I will place it directly below this:
<!-- My new info center will go below
================================================ -->
Pasted it? Great!
Remember to hit the "Preview Changes" at the bottom to make sure everything is in order, and then save (if you want).
But let's say I want to change the name of the Info Center to "Forum Name's Info Center", where Forum Name would be your forum. For me, it would say "Smangii's Theme Guide Test Forum's Info Center". Sure, I guess I could type it all out, but we're going to use an easy method of grabbing the name of your forum.
Take a look at this:
First, off find the line of code that has your Info Center title. It should look something like this:
<div class="title-bar"><h2>Info Center</h2></div>You can actually change it, just like this:
<div class="title-bar"><h2>Smangii's Awesome Info Center</h2></div>I've also scribbled over two other parts of the code for you to notice: $[image.stats] and "Threads and Posts". The Threads and Posts works similarly to the Info center title. BUT you can visibly tell that it looks differently in the preview. That's because the code "surrounding" the text is different. Compare "Threads and Posts" to the info center line above:
<tr><th>Threads and Posts</th></tr>Because you don't see anything about "title-bar" or <h2> (which means heading, or title), the font and overall text looks different. This doesn't mean you can't edit it! Try changing it to this:
<tr><th>Posts and Topics</th></tr>Finally, what is that weird $[image.stats] thing? Well, it's ProBoards way of making things easier, for you. If you scroll through the code, you will see a lot of things with $ and [ ]. They are called Variables, but I like to think of them as placeholders. They contain stuff that you can edit elsewhere in the admin panel. The $[image.stats] is actually the first info center image (icon with the bars and graph). Because you can edit this image in the Theme Settings > Images, this little bit of code is just a placeholder for that image. It already adds the code in for you!
So let's try adding a different placeholder: our forum's name! Go back up to the Info Center text/title, and place your cursor right after the <h2>, but before Info Center. This is where we will add our placeholder. If you look to the far right, you will see a table/list with the heading Loops and Variables. This works similarly to the Visual Editor, where you can expand sections and see sub-sections.
Click on the arrow next to Forum to expand it, DO NOT DOUBLE CLICK ON THE ITEM! Double clicking actually adds the placeholder/variable into your code. When you see "name", double click on that! It will automatically add the placeholder into your code, exactly where your cursor/mouse pointer last was. Here's a visual:
Now, your info center line should look like this:
<div class="title-bar"><h2>$[forum.name]Info Center</h2></div>All we have to do is add some simple possession and spacing...
<div class="title-bar"><h2>$[forum.name]'s Info Center</h2></div>And we did it! Preview or save your changes and check out your new info center. Here is what my theme looks like so far:
BORDER AROUND FORUM
This was in my original skin guide for v4, so I decided to include it in the v5 guide too. Plus, it adds a nice touch to any theme and can be very useful! I will use some of the same methods as in v4, so I'm going to copy and paste what I wrote since I think I explained it nicely.
Just like adding a border around forum in v4, this can be done with CSS...but easier!
Head over to your stylesheet by going to Admin > Themes > Advanced Styles & CSS. The click on the Stylesheet tab, and scroll down to find this line of code:
#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }For me, it was on line 128. Do you remember how to comment? We are going to first hide/comment this section out, and label it as "old default code". Then we will make a new comment to where we will input our new, editing code. Here's what I have so far:
Here is the code I am going to add to the CSS. It is just edits and additions to the "wrapper" class, the old code that we hid/commented out.
#wrapper {
width: @wrapper_width;
overflow-x: hidden;
margin: 20px auto 20px auto;
padding: 15px 20px 5px 20px;
background: rgba(255,255,255,1);
border: 5px solid #3C9CB4;
border-radius: 2px;
}Let's dissect this code a little bit.
width: @wrapper_width;
Remember that placeholder/variable stuff we were talking about in layout templates? ProBoards has them in CSS too, and this is what they look like. Instead of $[name] it looks like @name. This number is the width of your forum that you set in either the Easy Theme Creator or Visual Editor.
overflow-x: hidden;
This is inherited from the old ProBoards default code. Doesn't effect us with our second background, so it's good to leave it.
margin: 20px auto 20px auto;
padding: 15px 20px 5px 20px;
These two properties share something in common, they both (can) have 4 values, in a very specific order. Top, Right, Bottom, Left. (I have a trick to remember this order, think TROUBLE... TRBL.
)For margin, the top and bottom are set to 20px so that there is some space between the very top or very bottom of the forum/banner and the window. The sides (left and right) are set to auto so that the forum centers itself on the page/window.
For padding, the top is set to 15px to give more room between the start of the second background/border and the banner. The bottom is set to 5px because it doesn't need as much room, and the sides are equal.
background: rgba(255,255,255,1);
border: 5px solid #3C9CB4;
These two share something in common, too. They both have color values. You can either use a Hex color, such as the border does, or using rgb(a) such as the background does.
RGB is a value of three numbers, ranging from 0 to 255. The first number is the "R" value, the second is the "G" value and the third is the "B" value. The optional fourth number, in this case it is 1, is the opacity. How transparent do you want the color to be? 0 Is completely invisible, and 1 is 100% visible. How do you find these RGB numbers? You can use a tool like Photoshop or Paint, or even an online color site such as ColorSchemer Online that will give you RGB values for any Hex color you enter.
For background, it doesn't have to be a color. You can input an image in here too, by doing this: background: url(imageurl.png);
For border, this is also optional depending on your taste. You can adjust 5px to any size, and even use rgba to give a transparent border. You can also use border-bottom: 5px; or border-top: 20px; to give just the top, right, bottom, or left sides a border!
border-radius: 2px;
Just like in the visual editor, this adds roundness to your second background/border around forum.
Using the exact code from above, here is what my forum looks like. It's not pretty, but it's to show you what I explained above:
To fit with my theme more, I adjusted some values. Here is my new code:
#wrapper {
width: @wrapper_width;
margin: 20px auto 10px auto;
overflow-x: hidden;
padding: 15px 20px 5px 20px;
background: rgba(60,156,180,0.2);
border-top: 5px solid #3c9cb4;
border-bottom: 5px solid #3c9cb4;
border-radius: 10px;
}And here is the result!
DESIGN TOUCH-UPS
Of course, I have my own idea of what good design is so I'm going to run through some quick changes that are easy enough to make just to add that extra "umph" to your theme. These are totally optional, too... and editable!
Changing the Notifications Bubble
One thing I don't like about the default ProBoards theme is its design for the notifications bubble, as shown:
Instead, I want to change it to be a circle, not a message bubble, and have it to the right of the menu button, like this:
To do this, we will have to edit some simple CSS. Admin > Themes > Advanced Styles & CSS
In your code, find these lines:
#navigation-menu div.tip-holder { position: absolute; top: -8px; right: 3px; display: inline-block; }
#navigation-menu div.tip-holder div.tip-number { padding: 3px 7px 2px 7px; background-color: @nav_bar_bubble_background; .rounded-corners(@nav_bar_bubble_border_radius); font: @nav_bar_bubble_font; line-height: .8em; text-shadow: none; .box-shadow(2px, 2px, 2px, @shadow_color); height: .8em; color: @nav_bar_bubble_text_color; }
#navigation-menu div.tip-holder span.tip { border-top: 4px solid @nav_bar_bubble_background; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; left: 6px; }
Now comment/hide them! Use /* and */ and make sure to label it "Old code for notifications", or something along those lines.
Next, add a comment to where your new code is going to go, and paste this code:
#navigation-menu div.tip-holder { position: relative; top: 0; right: 0; display: inline-block; }
#navigation-menu div.tip-holder div.tip-number { padding: 4px 6px 4px 6px; background-color: @nav_bar_bubble_background; .rounded-corners(@nav_bar_bubble_border_radius); font: @nav_bar_bubble_font; line-height: .8em; text-shadow: none; .box-shadow(0px, 0px, 2px, @shadow_color); height: .8em; color: @nav_bar_bubble_text_color; }
#navigation-menu div.tip-holder span.tip { border-top: 0px solid @nav_bar_bubble_background; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; left: 6px; }
You can adjust the size of your bubble by adjusting the padding here: padding: 4px 6px 4px 6px; The more padding, the bigger the bubble. Remember TROUBLE/TRBL (Top, Right, Bottom, Left)
You're almost there! If you see more of a square than a circle, all you have to do is edit the border radius of the notification bubble. There are 2 ways to do this. Either scroll up a tiny bit and find this bit of css:
@nav_bar_bubble_border_radius: 5px;And change that to 20px or greater, depending on how it looks on your forum.
Way #2 would be to edit it with the Visual Editor. Save your changes, and switch over to the Visual Editor tab. Expand to this section:
Header (Top) > Navigation Bar > Notification Bubbles
Now just edit the border-radius! Something very neat (and if you haven't already noticed) is the small icon next to border radius. Click the small arrow to show more options, and mess with the choices. They can produce very cool effects.
Changing the Logo and Banner Width
Something that a lot of people like is to make their banner and navigation fluid by having it stretch all the way across the forum, from right to left. So we are going to edit the layout template from this:
To this:
Head over to Admin > Themes > Layout Templates. Then click on the Forum Wrapper template.
Find this piece of code (mine is on line 14).
<div id="wrapper">Copy it to your clipboard (ctrl or command + c) and then comment/hide it by using <!-- and -->. Type something like "this is where wrapper originally was", like so:
Then scroll down to find this part:
$[participated_threads_link]And paste (ctrl + v) the copied code directly above it. Feel free to add a comment to tell yourself and others what you moved the code for!
Now you can either save or preview your changes.
Looks great, now we just need to add a logo.
Head over to Admin > Themes > Theme Manager.
When you hover over your theme name, you will see a button for "Images". Click it!
The very top section, you should see something like this. Either link or upload your logo image, and it should automatically save and appear on your forum if you refresh.
If it doesn't appear, then you'll have to go to the Settings Tab and change Forum Title to Display Logo.
Here's what my forum design looks like now!
Adding Side Tables
Everybody's favorite, right? Well this has been made SUPER easy in v5! Instead of layout templates, though, we are going to add a plugin to your forum. Plugins are like admin-editable codes back in v4, they have their own control panels and settings that you can edit, customize, and add content to. IMPORTANT! You can only have 40 plugins per forum, and will have to purchase (With real $$$) the ability to have more plugins.
Back in the admin panel, go to the top and hit Plugins > Plugin Library
Right away you are taken to the Plugin Library page, and you should see a format similar to the Theme Library. Well, it also works the same way! The only difference is that a plugin is a .pbp file, whereas a theme is a .pbt file. The easiest way, however, is to install the plugin by clicking the Install button to the far right:
You should see the Sidebar plugin on the first page, but if you don't, have a search for this:
Sidebar Redux By Brian Ordonez
Once you install it, you are directly taken to the plugin settings. Make sure to read all instructions, and then you will have your side tables!
That's all, Folks!
That's the end of my Theme Guide!
Thank you SO MUCH for reading, I hope you learned something along the way and will continue to enjoy v5 as much as I do. If you have any questions, suggestions, or comments feel free to create a new topic or reply to the separate discussion thread, PLEASE! I love (and need) feedback, so tell me if anything confused you or didn't make sense, because it probably did the same to others and will only help this guide improve. Again, thanks for reading!
PS. Thanks to the awesome guys at ProBoards for making v5 finally happen!
Best regards and good luck to all! =D-Smangii
That's the end of my Theme Guide!
Thank you SO MUCH for reading, I hope you learned something along the way and will continue to enjoy v5 as much as I do.
If you have any questions, suggestions, or comments feel free to create a new topic or reply to the separate discussion thread, PLEASE! I love (and need) feedback, so tell me if anything confused you or didn't make sense, because it probably did the same to others and will only help this guide improve. Again, thanks for reading!PS. Thanks to the awesome guys at ProBoards for making v5 finally happen!
Best regards and good luck to all! =D-Smangii
Deleted
Deleted
Deleted
Deleted
May 30, 2013 16:57:35 GMT -5
This has most definitely been useful for me! I got so used to the V4 way the V5 took me completely off guard.
Now here's a question, when you install plugins to a forum, can you choose which Theme to apply them to or are they applied to all Themes no matter what?
BY default they are applied to ALL themes, but in the "Plugins > Manage" section, where it lists all plugins on your forum, on the right side you should see it says "Permissions" and it has a "Edit" button next to each plugin. Click that Edit button and then you can select/unselect which themes to apply that plugin to.
It's also handy for if you want to use the same plugin for multiple themes, but it doesn't offer the option to have different settings per theme. Then you can upload the same plugin multiple times, using different settings.
Now here's a question, when you install plugins to a forum, can you choose which Theme to apply them to or are they applied to all Themes no matter what?
BY default they are applied to ALL themes, but in the "Plugins > Manage" section, where it lists all plugins on your forum, on the right side you should see it says "Permissions" and it has a "Edit" button next to each plugin. Click that Edit button and then you can select/unselect which themes to apply that plugin to.
It's also handy for if you want to use the same plugin for multiple themes, but it doesn't offer the option to have different settings per theme. Then you can upload the same plugin multiple times, using different settings.
May 30, 2013 17:06:46 GMT -5
This has most definitely been useful for me! I got so used to the V4 way the V5 took me completely off guard.
Now here's a question, when you install plugins to a forum, can you choose which Theme to apply them to or are they applied to all Themes no matter what?
BY default they are applied to ALL themes, but in the "Plugins > Manage" section, where it lists all plugins on your forum, on the right side you should see it says "Permissions" and it has a "Edit" button next to each plugin. Click that Edit button and then you can select/unselect which themes to apply that plugin to.
It's also handy for if you want to use the same plugin for multiple themes, but it doesn't offer the option to have different settings per theme. Then you can upload the same plugin multiple times, using different settings.
Well that doesn't sound too bad a'tall!
Sneaky little tricksies
May 30, 2013 16:57:35 GMT -5 @stinky666 said:
Now here's a question, when you install plugins to a forum, can you choose which Theme to apply them to or are they applied to all Themes no matter what?
BY default they are applied to ALL themes, but in the "Plugins > Manage" section, where it lists all plugins on your forum, on the right side you should see it says "Permissions" and it has a "Edit" button next to each plugin. Click that Edit button and then you can select/unselect which themes to apply that plugin to.
It's also handy for if you want to use the same plugin for multiple themes, but it doesn't offer the option to have different settings per theme. Then you can upload the same plugin multiple times, using different settings.
Well that doesn't sound too bad a'tall!
Sneaky little tricksies
Feb 4, 2014 3:22:18 GMT -5
Great tutorial, Smangii...You write just as I imagine you would speak if we were in a classroom. You are friendly, clear and thorough. It's obvious you are very knowledgeable and comfortable with your subject. You also have the ability to anticipate a reader's question then answer it at the appropriate time in the tutorial. I agree, you would be an asset to proboards' staff.. or a teriffic ninth grade teacher.
Tiger the one and only
Apr 27, 2014 15:44:38 GMT -5
Thank you so much for posting this! I had been looking for pointers on designing and customizing my website and how to do sidebars for awhile now, so please believe me when I say YOU ARE AMAZING MY FRIEND
Feathertryingtofigureoutthis
May 14, 2014 8:47:34 GMT -5
HEY
im soon owning a site. and im trying to see if i can fiddle with the sign up and login page. make it my own instead of this just change colors nonsense proboards 5 has got going?. got anything on that?. love this page it has helped so much wit ha our site upgrades. also our pictures keep repeating itself in the background and in the main site picture was wondering what code i could use to use it to not repeat it self?
Thankyou kindly feather..
[please keep it simple like you have in your directions above
]
im soon owning a site. and im trying to see if i can fiddle with the sign up and login page. make it my own instead of this just change colors nonsense proboards 5 has got going?. got anything on that?. love this page it has helped so much wit ha our site upgrades. also our pictures keep repeating itself in the background and in the main site picture was wondering what code i could use to use it to not repeat it self?
Thankyou kindly feather..
[please keep it simple like you have in your directions above
]
May 15, 2014 10:31:31 GMT -5
im soon owning a site. and im trying to see if i can fiddle with the sign up and login page. make it my own instead of this just change colors nonsense proboards 5 has got going?. got anything on that?. love this page it has helped so much wit ha our site upgrades. also our pictures keep repeating itself in the background and in the main site picture was wondering what code i could use to use it to not repeat it self?
Thankyou kindly feather..
[please keep it simple like you have in your directions above]
Unfortunately I do not think ProBoards lets you customize that part beyond the colors.
As part of security (and the new global system) the sign-in part must be kept separate (as far as I know... but I have not seen anything yet that lets you do this!)
May 14, 2014 8:47:34 GMT -5 Feathertryingtofigureoutthis said:
HEYim soon owning a site. and im trying to see if i can fiddle with the sign up and login page. make it my own instead of this just change colors nonsense proboards 5 has got going?. got anything on that?. love this page it has helped so much wit ha our site upgrades. also our pictures keep repeating itself in the background and in the main site picture was wondering what code i could use to use it to not repeat it self?
Thankyou kindly feather..
[please keep it simple like you have in your directions above
] Unfortunately I do not think ProBoards lets you customize that part beyond the colors.
As part of security (and the new global system) the sign-in part must be kept separate (as far as I know... but I have not seen anything yet that lets you do this!)
Sharon K
Sept 11, 2014 20:18:12 GMT -5
Admin Panel > Themes > Theme Manager, as you put your cursor/mouse over the themes you will see a small "Make Default" button appear next to the Theme's name. Click that
Sept 11, 2014 13:32:02 GMT -5 Sharon K said:
Thank you for this informative reference guide. I created a theme, but don't know how to make it the default theme from the basic blue and white theme. Can you help me with this? Many thanks! Admin Panel > Themes > Theme Manager, as you put your cursor/mouse over the themes you will see a small "Make Default" button appear next to the Theme's name. Click that
Feathertryingtofigurethingsout
Feathertryingtofigurethingsout
Deleted
Deleted
Dezhoni
Dezhoni
Deleted
Deleted
Mar 28, 2016 9:33:51 GMT -5
Really useful. If this is the right place... How can you not get rounded edges in the banner area? When you show how to have the banner stretch the entire page, the corners are rounded.
I think I added that on purpose... (I forgot, been a while since I made this!)
The rounded corners comes from something called "Border Radius", which in the Visual Editor has to be set to 0px to get square edges. The higher the number, the more round.
In the Stylesheet/CSS it looks like this (10px can be any number).
I think I added that on purpose... (I forgot, been a while since I made this!)
The rounded corners comes from something called "Border Radius", which in the Visual Editor has to be set to 0px to get square edges. The higher the number, the more round.
In the Stylesheet/CSS it looks like this (10px can be any number).
border-radius: 10px;
