How to edit HTML so you can change the pages layout

xDrac

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?

whu606

@xDrac

Welcome to the community.

See here: https://docs.vanillaforums.com/developer/addons/theme-quickstart/

R_J

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

xDrac

@R_J said:
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?

R_J

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.

xDrac

@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?

R_J

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.

vrijvlinder

However I cannot quite figure out how to make the avatar, name and icons all appear on the same line next to each other

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.

donovanb

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;
}

xDrac

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?)

R_J

Try the index photo plugin and the table layout for categories.

xDrac

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?

R_J

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"}

xDrac

@R_J said:
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:

R_J

Delete the files in the /cache/Smarty sub folder

xDrac

@R_J said:
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

R_J

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

xDrac

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?

vrijvlinder

@xDrac said:
Where do I find said code snippet that defines what {} functions look like?

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.

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?

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.

spyshop1989

you can get help from the w3school .and use bootstrap .