HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options
How to edit HTML so you can change the pages layout
I know that there is already (very limiting) layout options available in the Dashboard but I would like to go much further with the layout changes.
I suppose I would need to change the HTML structure for that, where or how would I go about doing that?
1
Comments
@xDrac
Welcome to the community.
See here: https://docs.vanillaforums.com/developer/addons/theme-quickstart/
xDrac: I would advice to take a look at the Bootstrap theme to see how far you can come with only minimal changes to the html. Whatever you change on the html side might break forum functionality or create issues with third party plugins and therefore you should be careful
I understand, I was told that https://en-forum.guildwars2.com/ uses Vanilla Forums which is how I got curious about it.
I was planning on rebuilding their layout structure, in order to do that I believe I would need to edit the HTML parts, correct?
Maybe for the header, but not for the rest. That changes in the header would be made in the default.master.tpl
of your custom theme, but nowhere else.
If you do not want to create a custom theme try the CSSEdit and HtmlEdit plugins from bleistivt. They allow you to change the default.master.tpl "on the fly" and to add whatever CSS you need to your forum.
Table Layout
Go to the dashboard and choose the "Table Layout" for the discussions, that is already the biggest visual change. After doing that you will see that most of the rest is a color/font thing
The Panel
The side bar is called "Panel" in Vanilla and to hide it you need a simple
.PanelColumn {display:none}.It is hidden on some pages, like the on the recent discussions page and on single discussions. Use the web inspector tool of your browser and you will find that this pages have classes and ids that are helpful:
#vanilla_discussions_index .PanelColumn, #vanilla_discussion_index .PanelColumn { display: none; }On other pages it appears on the right side. Just recently that question came up before.
.Dashboard.Profile .ContentColumn { margin: 0 230px 0 0; } .Dashboard.Profile #Panel { float: right; }If you just want to copy the layout of that forum (without speaking about the header), the changes above should be all you need.
@R_J Wow have already been such a help, thank you so much!
I started by following: https://docs.vanillaforums.com/developer/addons/theme-quickstart/
to create my "own custom theme". Then I followed your instruction to remove the sidebar known as Panel.
I then moved the MeModule under the SiteTitle into the header area. So far so good.
However I cannot quite figure out how to make the avatar, name and icons all appear on the same line next to each other as opposed to them being under each other. Image for clarity:
Any ideas?
Nope, sorry.But just inspect the CSS on this forum here where the MeBox is in one row. You can duplicate what have been done to achieve the same result.
To do that you must copy the me.php file If I remember correctly and add it to the views folder in your theme in a folder called modules.
Once you do that you will be able to safely move stuff around. I did that on my themes. You could download them and see what I did.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
Try this:
.UserBox .PhotoWrap, .MeBox .PhotoWrap { float: none; margin-right: 8px; display: inline-block; vertical-align: middle; } .UserBox .WhoIs, .MeBox .WhoIs { display: inline-block; } .UserBox .Username, .MeBox .Username { vertical-align: middle; font-size: 16px; display: inline-block; margin-right:8px; } .MeMenu { line-height: 24px; display: inline-block; } .PhotoWrap .ProfilePhotoMedium { height: 30px; width: auto; }Thank you so much for all the amazing help up until now. Is there any way to setup the boards like this? (to mainly show avatar + recent topic title on the right in-line?)
Try the index photo plugin and the table layout for categories.
Thanks that worked wonderfully!
However, I do not see a link to create a new discussion when I am inside a category, do you have any idea why not?
The "New Discussion" button is inside the panel and you have hidden it, correct?
Edit the default.master.tpl and add the NewDiscussionModule:
{module name="NewDiscussionModule"}Hm, so I added
<div class="Column ContentColumn" id="Content" role="main">{module name="NewDiscussionModule"}{asset name="Content"}</div>But it only shows:
Delete the files in the /cache/Smarty sub folder
So in other words, delete the "cache" and "compile" folders inside /chache/Smarty?
EDIT: I just did that and it didn't change anything
It might not be visible because of some other css rules. Search the html source of the page that is displayed. I'm quite optimistic that you will find the div.BoxNewDiscussion there
It's visible now, thank you!
Onto my next question, if you don't mind
I edit things in default.master.tpl which I suppose is written in Smarty, right?
I often put in things such as {discussion_link} which then pastes in a module (I guess in reality it pastes in a code snippet).
Where do I find said code snippet that defines what {} functions look like?
Also can I just add multiple HTML divs and such to the default.master.tpl as I like? Or will I run into problems if I encumber the default elements in too many custom divs and whatnot?
Look in the Smarty Plugin files. Smarty is just a package for php. It is supposed to simplify the code on a page. Instead of a bunch of php, you simply add the smarty instead.
You can add multiple dives and columns and sections. You can even convert it into a paralax design.
However you will also need to write the CSS for the sections you add.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
you can get help from the w3school .and use bootstrap .