Forgot Password link broken after changing Login Page

okhawaja

I don't know what changed and whether it's a plugin breaking this or a new change, but I have added '\entry\signin.php' that's inside my bittersweet folder. I added this signin page to account for the new sign in page look on my login page, but it seems to have somehow broken the password reset button.

Any tips on how to fix this? I'm really struggling with putting in the proper urls in relative referencing for Vanilla.

Clicking Forgot? does this:

Also, how can I edit the menu header to remove Activity tab and add Market Place tab?

vrijvlinder

Cloning an entry view is not a good idea if you are doing it just for style… These are the typical problems that can arise when cloning certain views into your theme.

R_J

Do you know what happens when the next Vanilla version is available? All your changes will be lost. If you think it is to much work to learn "the right way" to change things in Vanilla, you will find out that it is even more work to "fix" your manual changes again and again and again.

Do it properly and you only have to do it one time.

You want to have a custom "\entry\signin.php"? This is all you need to do:

1) Create following file (and the subfolder): /themes/okhawajas-theme/about.php (change name if you like):

<?php
$ThemeInfo['okhawajas-theme'] = [
    'Name' => 'Okhawajas Theme',
    'Description' => 'Your first and very simple theme',
    'Version' => '0.1',
    'Author' => 'okhawaja',
    'License' => 'MIT'
];

2) Copy the file /applications/dashboard/views/entry/signin.php to '/themes/okhawajas-theme/views/entry/signin.php`
Do all your changes in this copy of the file.

That's it. This way you are able to change whatever you want without losing your changes when Vanilla is updated. This is better way to do changes, but not the best.

The next step would be to find out how to change things without changing the view. Look for fireEvent(...) in the snippets you change. Whenever you see something like this, you will be able to change the behavior/look&feel.

Tell us what you try to achieve and we might be able to show you elegant ways to do so. You have asked for documentation and we will provide it

If you like to change anything, this is the preferred order to do so:
1. Custom CSS
2. Hook into events
3. Custom view

Edit core files is not in the list.

whu606

If you wanted to use a specific theme, just add the folder/file RJ mentioned to that theme.

You edit CSS via your theme's custom. CSS file. You can use the CSSEdit plugin to make changes via the dashboard.

I made an annotated theme to show what common elements could be affected by CSS:

https://vanillaforums.org/addon/annotatedcss2.1-theme

Getting to grips with a web inspector will speed things up no end.

hgtonight

@okhawaja Did you read the theming documentation?

The quickstart is aimed at people familiar with html/css/php/js: http://docs.vanillaforums.com/theming/quickstart/

R_J

@okhawaja said:
@R_J I created the Signin.php under the new view folder in my new themes folder, but now I can't get the bittersweet theme I had before, so to counter that I took files from bittersweet and put them into my theme's folder and it works. Kind of merged my signin.php with the bittersweet theme...

Congratulations! That's how it is done

The best thing for the beginning is cherry picking and changing small things. Download a number of themes and plugins and use them as a resource for examples.

Vanilla uses a master template ("default.master.tpl") for the overall layout: header, footer, panel, content. This one uses Smarty. There are several Smarty functions available (see /library/vendors/SmartyPlugins). There are some discussions on how to create custom Smarty functions for a theme.

Then you have css. If you put a style.css in your custom themes design folder, it will override Vanillas style.css, which holds the standard theme styling.
If you create a custom.css, it will be added automatically to your theme.
If you want some "fancy.css" to be loaded on every page, you can either use a) a normal html tag in the default.master.tpl b) some Smarty function to add the css as an asset (at least I would assume that) or c) use a themehooks file and add it with a function base_render_before. I would recommend using a css preprocessor and always use custom.css as the name.

Customizing is in many ways programming. If you activate the plugin "eventi", you get an idea where you can change output with code. Find out the name of the event and look for examples in the existing plugins. You create a function in the themehooks file and change something/add something there.

Understandig where a view comes from is a big step forward. If you know where to find the view that you like to influence helps you finding out the events fired. At the beginning a full text search over the complete folder is what you need most to navigate to where you find useful information (to be honest: fulltext search is what I still use very often!)

R_J

Concerning your "menu questions":

Right click on "Activity", inspect element and you find it is in ul.SiteMenu

If you do a full text search for "SiteMenu", you'll find that it is in "default.master.tpl" and you either already have a copy in your custom theme folder or now have a reason to create a copy! The code I'm speaking of looks like that:

<ul class="SiteMenu">
    <!-- {dashboard_link} -->
    {discussions_link}
    {activity_link}
    <!-- {inbox_link} -->
    {custom_menu}
    <!-- {profile_link}
   {signinout_link}  -->
</ul>

Just by looking at that, I would try commenting out {activity_link} and if it works, even delete this line.

Furthermore you wanted to add a custom link to the menu. There are at least four options:
a) Hard cord the link in the template => very ugly since you would tie your theme to a plugin.
b) Use the custom Smarty "link" function. Although it might look better than a), it is not.
c) Create a custom Smarty function. Actually quite easy. Search the forum for ways to achieve this. You should enclose a check if the Marketplace plugin is enabled.
d) Use the {custom_menu} which is already there. Not easy at first sight but a good example for the power of Vanilla.

{custom_menu} is a Smarty function. You find it in /library/vendors/SmartyPlugins:

(...)
function smarty_function_custom_menu($Params, &$Smarty) {
   $Controller = $Smarty->Controller;
   if (is_object($Menu = GetValue('Menu', $Controller))) {
(...)
      foreach ($Menu->Items as $Group) {
         foreach ($Group as $Item) {
(...)

Verbosely spoken this means: check if there is "Menu" object in the controller.
Loop through this menu. The first level is a group.
Loop through each group. Each entry is a menu item.

Now, If you want to learn how to use this, you would have to dive into the code. It is not very easy at first, but if you have done this a few times, you'll see that reading the source code becomes more and more easy and thus the source becomes a replacement for documentation.

The "controller" in the above case is any Vanilla controller. To be precise: Vanilla is just an application in a framework called Garden and the controller mentioned before is in fact any Garden controller.
We can find the source code of this controller class in /library/core/class.controller.php. If you open up this file, you find the following lines:

/** @var object A Menu module for rendering the main menu on each page. */
public $Menu;

Great, the object "Menu" that was mentioned in the Smarty "custom_menu" function is a module with the name "Menu".
What you do not know by now is the naming convention and the location of modules. You can find a module named "Whatever" here /applications/[dasboard|conversations|vanilla]/modules/class.whatevermodule.php
The Menu is not conversations specific or forum specific. Therefore it will most probably be in the dashboard.

And BINGO! /applications/dashboard/modules/class.menumodule.php exists. Look at the method this module provides. I see two wich look promising addLink() and addItem(). What do both do? Well, the documentation this time sucks. You cannot see which does what, but since addItem doesn't allow to add a url and we really want to add a link, we do not really need more explanation: addLink() is what we need. But what would you do with that information?

addLink() is a method of the Menu object of a controller, so we can expect to find examples if we search for Menu->addLink( (but you better search case insensitive). Remember that I said that Vanilla is just a forum application on top of Garden? So Vanilla would have to insert the "Discussions" link, wouldnt't it? Well in fact it does so in /applications/vanilla/settings/class.hooks.php:

    /**
     * Adds 'Discussion' item to menu.
     *
     * 'Base_Render_Before' will trigger before every pageload across apps.
     * If you abuse this hook, Tim with throw a Coke can at your head.
     *
     * @since 2.0.0
     * @package Vanilla
     *
     * @param object $Sender DashboardController.
     */
    public function base_Render_Before($Sender) {
        $Session = Gdn::session();
        if ($Sender->Menu) {
            $Sender->Menu->addLink('Discussions', t('Discussions'), '/discussions', false, array('Standard' => true));
        }
    }

So what do we see here?
At first I see a superfluous $Session = Gdn::session();. You don't need that here.
Second thing I get aware of is a warning what @Tim will do to you if you don't use that function wisely.
Third thing, which is relevant for you, is a nice and lean example of how to add a link to the menu.
Combine that with what you have read about the needed parameters in the MenuModule and you should be able to add a method to your themehooks file which will display the link to the market place. Try it for yourself. Use the below code if you do not succeed:

public function base_render_before($sender) {
    // Check if there is a menu and if the plugin is activated.
    if ($sender->Menu && c('EnabledPlugins.Marketplace') === true)  {
        $sender->Menu->addLink(
            'MyCustomLinks', // Items in Menu can be grouped. Not relevant for this use case, I guess
            t('Market Place'), // The link text (enclosing it with t() makes the text translatable)
            '/plugin/marketplace', // I don't know the link. This is just a guess!
            false, // You can add any permission here. e.g. 'Garden.SignIn.Allow' would make this link only display if the current user is logged in.
            ['class' => 'Blurp'], // Generally not needed, but you can add any html attribute you like to the <li> tag here.
            ['target' => 'blank'] // The same as above but this time it is used for the <a> tag.
        );
    }
}

vrijvlinder

Cloning an entry view is not a good idea if you are doing it just for style… These are the typical problems that can arise when cloning certain views into your theme.

okhawaja

I just ended up editing signin.php inside of dashboard views/entry and that was a MUCH simpler fix than trying to edit themes.......I think I am starting to get the hang of Vanilla editing.......Now if I can just figure out where the header menu is for purpose of editing then that's my next step.

vrijvlinder

You should never edit the core files. That is not the way either

The way to edit your theme is by editing the default.master.tpl or php template and the custom.css files in your custom theme.

Editing core files will also give you problems when there is an update your changes will be overwritten and you will need to do that editing again.

There really is no need to edit the view of the core files, most everything can be done with css .

okhawaja

I needed to change my login/sign in page and I couldn't figure out where except the entry/signin.php file, so that's where I edited it......I wish there was a document for documenting how to change different parts of vanilla....

The one big difficulty I am having is I see and all these tags, but how do I figure out how to edit them? I think I read about them being Smarty, but I have no clue what that is or how to edit "Smarty".

vrijvlinder

Anything that has to do with style and how things look , you change using CSS

Anything that has to do with functionality you change using Plugins or Applications

You need to be specific as to what you want to change and provide a link to the site sand any pertinent plugins you might have enabled.

We really can't guess very well without this information.

I needed to change my login/sign

How did you need to change it ?

I wish there was a document for documenting how to change different parts of vanilla….

There actually is, and there also is a Tutorial Category with all the info

The one big difficulty I am having is I see and all these tags, but how do I figure out how to edit them?

What Tags? As I said , if it's about how something looks you need to edit the CSS file of the theme you are using.

If it's the html then you need to create a plugin or add theme hooks. All this is explained one million five hundred times on this forum at least. So you should be able to find the info.

I think I read about them being Smarty, but I have no clue what that is or how to edit "Smarty".

Then I recommend you go to the http://www.smarty.net website and get acquainted .

It could not hurt.

R_J

Do you know what happens when the next Vanilla version is available? All your changes will be lost. If you think it is to much work to learn "the right way" to change things in Vanilla, you will find out that it is even more work to "fix" your manual changes again and again and again.

Do it properly and you only have to do it one time.

You want to have a custom "\entry\signin.php"? This is all you need to do:

1) Create following file (and the subfolder): /themes/okhawajas-theme/about.php (change name if you like):

<?php
$ThemeInfo['okhawajas-theme'] = [
    'Name' => 'Okhawajas Theme',
    'Description' => 'Your first and very simple theme',
    'Version' => '0.1',
    'Author' => 'okhawaja',
    'License' => 'MIT'
];

2) Copy the file /applications/dashboard/views/entry/signin.php to '/themes/okhawajas-theme/views/entry/signin.php`
Do all your changes in this copy of the file.

That's it. This way you are able to change whatever you want without losing your changes when Vanilla is updated. This is better way to do changes, but not the best.

The next step would be to find out how to change things without changing the view. Look for fireEvent(...) in the snippets you change. Whenever you see something like this, you will be able to change the behavior/look&feel.

Tell us what you try to achieve and we might be able to show you elegant ways to do so. You have asked for documentation and we will provide it

If you like to change anything, this is the preferred order to do so:
1. Custom CSS
2. Hook into events
3. Custom view

Edit core files is not in the list.

okhawaja

@R_J I created the Signin.php under the new view folder in my new themes folder, but now I can't get the bittersweet theme I had before, so to counter that I took files from bittersweet and put them into my theme's folder and it works. Kind of merged my signin.php with the bittersweet theme.....I've developed so many websites and portals, but it's so confusing how Vanilla works....Entry? Views? Themes? the way these things hook into each other and how they work is what's confusing. I'll check out the Smarty site that @vrijvlinder shared because I suspect that's what I need to edit the head/foot tags of the default template files.....

I don't really understand how you add custom css to Vanilla. I do know there is a file called custom.css that has a bunch of css for different parts of the Vanilla site and that's what I try to edit when I can.

I did read through a couple of the tutorials such as how to edit Vanilla, but guess what? That particular tutorial points you to 10 web development tutorials on how to create html/css/php/js etc., and I've said it before and I'll say it again-- I know how to build websites front-end and back-end, but Vanilla is a completely different thing...The simple fact it uses php to generate html is what makes everything x10 more difficult because you can't edit Vanilla the way you edit traditional html/php files. So constantly pointing people to html/css/php tutorials is going to do no good if your true intention is to help them learn Vanilla because Vanilla's structure is what makes it difficult for newbies. I've built nice javascript/html/css/php websites, but to make the equivalent on Vanilla for me is like ?!?!?!?!?!?!?!??!

If I can figure out Vanilla then I intend to make a tutorial for beginners on how to actually edit Vanilla when you're coming from a web developer background because that's what I think most new people like myself struggle with. There is a long article about how Vanilla is MVC and that changes how it's edited. Until then I'll read up on the Smarty templates and see how to add hooks/plugins.

whu606

If you wanted to use a specific theme, just add the folder/file RJ mentioned to that theme.

You edit CSS via your theme's custom. CSS file. You can use the CSSEdit plugin to make changes via the dashboard.

I made an annotated theme to show what common elements could be affected by CSS:

https://vanillaforums.org/addon/annotatedcss2.1-theme

Getting to grips with a web inspector will speed things up no end.

hgtonight

@okhawaja Did you read the theming documentation?

The quickstart is aimed at people familiar with html/css/php/js: http://docs.vanillaforums.com/theming/quickstart/

vrijvlinder

@okhawaja said:
I don't really understand how you add custom css to Vanilla. I do know there is a file called >custom.css that has a bunch of css for different parts of the Vanilla site and that's what I >try to edit when I can.

It used be more complicated but now there is the CSSEDIT plugin and the HTMLEDIT plugin

I know how to build websites front-end and back-end, but Vanilla is a completely >different thing...The simple fact it uses php to generate html is what makes everything x10 >more difficult because you can't edit Vanilla the way you edit traditional html/php files.

It is meant to make building websites more functional instead of having to write 200 html lines. PHP is very important to learn now days. Everything runs on it.

So constantly pointing people to html/css/php tutorials is going to do no good if your true >intention is to help them learn Vanilla because Vanilla's structure is what makes it difficult >for newbies.

We try as best as we can to give the information needed but we can't guess what you already know and understand, if you say you have no coding experience, you need to start from the bottom, this is not a school, you kind of have to either already know something or make the effort to understand it yourself by reading the info. Vanilla is the easiest to work with and edit and develop and extend even for a new person. I thought I knew how to make websites and had to learn a whole bunch of things I am still in learning mode 4 years later. You can't expect to know everything overnight or that it is explained to you in one discussion. That is why we give links to the information. That is why we took the time to write the tutorials.
There is much to learn, but it is very straightforward.

If I can figure out Vanilla then I intend to make a tutorial for beginners on how to actually >edit Vanilla when you're coming from a web developer background because that's what I >think most new people like myself struggle with. There is a long article about how Vanilla is >MVC and that changes how it's edited. Until then I'll read up on the Smarty templates and >see how to add hooks/plugins.

I recommend you study plugins and themes and that is how you will figure it out.

R_J

@okhawaja said:
@R_J I created the Signin.php under the new view folder in my new themes folder, but now I can't get the bittersweet theme I had before, so to counter that I took files from bittersweet and put them into my theme's folder and it works. Kind of merged my signin.php with the bittersweet theme...

Congratulations! That's how it is done

The best thing for the beginning is cherry picking and changing small things. Download a number of themes and plugins and use them as a resource for examples.

Vanilla uses a master template ("default.master.tpl") for the overall layout: header, footer, panel, content. This one uses Smarty. There are several Smarty functions available (see /library/vendors/SmartyPlugins). There are some discussions on how to create custom Smarty functions for a theme.

Then you have css. If you put a style.css in your custom themes design folder, it will override Vanillas style.css, which holds the standard theme styling.
If you create a custom.css, it will be added automatically to your theme.
If you want some "fancy.css" to be loaded on every page, you can either use a) a normal html tag in the default.master.tpl b) some Smarty function to add the css as an asset (at least I would assume that) or c) use a themehooks file and add it with a function base_render_before. I would recommend using a css preprocessor and always use custom.css as the name.

Customizing is in many ways programming. If you activate the plugin "eventi", you get an idea where you can change output with code. Find out the name of the event and look for examples in the existing plugins. You create a function in the themehooks file and change something/add something there.

Understandig where a view comes from is a big step forward. If you know where to find the view that you like to influence helps you finding out the events fired. At the beginning a full text search over the complete folder is what you need most to navigate to where you find useful information (to be honest: fulltext search is what I still use very often!)

R_J

Concerning your "menu questions":

Right click on "Activity", inspect element and you find it is in ul.SiteMenu

If you do a full text search for "SiteMenu", you'll find that it is in "default.master.tpl" and you either already have a copy in your custom theme folder or now have a reason to create a copy! The code I'm speaking of looks like that:

<ul class="SiteMenu">
    <!-- {dashboard_link} -->
    {discussions_link}
    {activity_link}
    <!-- {inbox_link} -->
    {custom_menu}
    <!-- {profile_link}
   {signinout_link}  -->
</ul>

Just by looking at that, I would try commenting out {activity_link} and if it works, even delete this line.

Furthermore you wanted to add a custom link to the menu. There are at least four options:
a) Hard cord the link in the template => very ugly since you would tie your theme to a plugin.
b) Use the custom Smarty "link" function. Although it might look better than a), it is not.
c) Create a custom Smarty function. Actually quite easy. Search the forum for ways to achieve this. You should enclose a check if the Marketplace plugin is enabled.
d) Use the {custom_menu} which is already there. Not easy at first sight but a good example for the power of Vanilla.

{custom_menu} is a Smarty function. You find it in /library/vendors/SmartyPlugins:

(...)
function smarty_function_custom_menu($Params, &$Smarty) {
   $Controller = $Smarty->Controller;
   if (is_object($Menu = GetValue('Menu', $Controller))) {
(...)
      foreach ($Menu->Items as $Group) {
         foreach ($Group as $Item) {
(...)

Verbosely spoken this means: check if there is "Menu" object in the controller.
Loop through this menu. The first level is a group.
Loop through each group. Each entry is a menu item.

Now, If you want to learn how to use this, you would have to dive into the code. It is not very easy at first, but if you have done this a few times, you'll see that reading the source code becomes more and more easy and thus the source becomes a replacement for documentation.

The "controller" in the above case is any Vanilla controller. To be precise: Vanilla is just an application in a framework called Garden and the controller mentioned before is in fact any Garden controller.
We can find the source code of this controller class in /library/core/class.controller.php. If you open up this file, you find the following lines:

/** @var object A Menu module for rendering the main menu on each page. */
public $Menu;

Great, the object "Menu" that was mentioned in the Smarty "custom_menu" function is a module with the name "Menu".
What you do not know by now is the naming convention and the location of modules. You can find a module named "Whatever" here /applications/[dasboard|conversations|vanilla]/modules/class.whatevermodule.php
The Menu is not conversations specific or forum specific. Therefore it will most probably be in the dashboard.

And BINGO! /applications/dashboard/modules/class.menumodule.php exists. Look at the method this module provides. I see two wich look promising addLink() and addItem(). What do both do? Well, the documentation this time sucks. You cannot see which does what, but since addItem doesn't allow to add a url and we really want to add a link, we do not really need more explanation: addLink() is what we need. But what would you do with that information?

addLink() is a method of the Menu object of a controller, so we can expect to find examples if we search for Menu->addLink( (but you better search case insensitive). Remember that I said that Vanilla is just a forum application on top of Garden? So Vanilla would have to insert the "Discussions" link, wouldnt't it? Well in fact it does so in /applications/vanilla/settings/class.hooks.php:

    /**
     * Adds 'Discussion' item to menu.
     *
     * 'Base_Render_Before' will trigger before every pageload across apps.
     * If you abuse this hook, Tim with throw a Coke can at your head.
     *
     * @since 2.0.0
     * @package Vanilla
     *
     * @param object $Sender DashboardController.
     */
    public function base_Render_Before($Sender) {
        $Session = Gdn::session();
        if ($Sender->Menu) {
            $Sender->Menu->addLink('Discussions', t('Discussions'), '/discussions', false, array('Standard' => true));
        }
    }

So what do we see here?
At first I see a superfluous $Session = Gdn::session();. You don't need that here.
Second thing I get aware of is a warning what @Tim will do to you if you don't use that function wisely.
Third thing, which is relevant for you, is a nice and lean example of how to add a link to the menu.
Combine that with what you have read about the needed parameters in the MenuModule and you should be able to add a method to your themehooks file which will display the link to the market place. Try it for yourself. Use the below code if you do not succeed:

public function base_render_before($sender) {
    // Check if there is a menu and if the plugin is activated.
    if ($sender->Menu && c('EnabledPlugins.Marketplace') === true)  {
        $sender->Menu->addLink(
            'MyCustomLinks', // Items in Menu can be grouped. Not relevant for this use case, I guess
            t('Market Place'), // The link text (enclosing it with t() makes the text translatable)
            '/plugin/marketplace', // I don't know the link. This is just a guess!
            false, // You can add any permission here. e.g. 'Garden.SignIn.Allow' would make this link only display if the current user is logged in.
            ['class' => 'Blurp'], // Generally not needed, but you can add any html attribute you like to the <li> tag here.
            ['target' => 'blank'] // The same as above but this time it is used for the <a> tag.
        );
    }
}

okhawaja

@vrijvlinder said:
Cloning an entry view is not a good idea if you are doing it just for style… These are the typical problems that can arise when cloning certain views into your theme.

The code looks exactly the same, so I don't understand how cloning entry/signin.php into my themes lets everything including login work, but the Forgot password link doesn't work.....The enter username/email box doesn't appear after I click Forgot.

Here is what I mean:

I clicked Forgot at entry/signin and then I get this instead of the enter username/email: