Customized Menu buttons

[dut]

Hello!

So I had this wild idea about round buttons in the menu bar. Some of them would have icons displayed, but one of them - which would be the "profile" button, would instead be a little avatar picture (still round!) with that users group colour in a round frame around it. I want it set up in a way, so that the button shifts to the current user.

I think it would look cool. A little fun thing. But how, if possible, can I achieve it?


I Already have the Classic proboards menu plugin.

[Kami]

Nov 22, 2023 21:25:24 GMT -8 dut said:

Hello!

So I had this wild idea about round buttons in the menu bar. Some of them would have icons displayed, but one of them - which would be the "profile" button, would instead be a little avatar picture (still round!) with that users group colour in a round frame around it. I want it set up in a way, so that the button shifts to the current user.

I think it would look cool. A little fun thing. But how, if possible, can I achieve it?


I Already have the Classic proboards menu plugin.

Do you have a link to your forum? :) It sounds like you've modified it at least a little, so that can impact the answer you get for a template change

[dut]

Ofc:

[dut]

I am no Code-master of any sort. At all. But regardless, I thought that I perhaps needed some code, that could get these variables:

$[current_user.avatar_small]

$[current_user.group.color]

Inserted in the plugin code? and ofc. styled somehow, so it would look like described... Now that I think about it; perhaps this is actually a thread for plugins instead of templates?

[Kami]

Nov 22, 2023 22:35:56 GMT -8 dut said:

Ofc:

sydlandet.proboards.com/

Nov 22, 2023 22:43:15 GMT -8 dut said:

I am no Code-master of any sort. At all. But regardless, I thought that I perhaps needed some code, that could get these variables:

$[current_user.avatar_small]

$[current_user.group.color]

Inserted in the plugin code? and ofc. styled somehow, so it would look like described... Now that I think about it; perhaps this is actually a thread for plugins instead of templates?

TBH it's probably simpler than that. I'm just off to bed since it's nearly 1AM. If someone doesn't get to this while I'm asleep, I'll be back in the AM and will help ya & I'm fairly confident you don't need a plugin to do this.

[dut]

Thats a relief to hear!

[Kami]

Nov 22, 2023 22:55:58 GMT -8 dut said:

Thats a relief to hear!

So I figured it out with one slight caveat: for some reason that I don't super have the time to figure out, the profile button gets added to the end of the menu list, even after the logout button (see below, click for big):



If that works for you, then I'll go ahead and provide the code. If you want it smack dab in the "usual" order, then that'll take me a bit more time (and it might look weird).

[dut]

Oh, thank you! Its perfect!

Would it be a lot of trouble to have the avatar in the middle, with some other buttons on each side of it? If it is, then I am perfectly happy with the current!

[Kami]

Nov 23, 2023 10:01:38 GMT -8 dut said:

Oh, thank you! Its perfect!

Would it be a lot of trouble to have the avatar in the middle, with some other buttons on each side of it? If it is, then I am perfectly happy with the current!

Yeah, I wanted to do that personally (just because I like symmetry), but because you're using the plugin (which, by the way, you could actually just do a template change which would be a little more time-consuming, but easier to arrange) the way this is accomplished is by using the templates to call out a *specific* menu item that hasn't been added to the plugin's images list and changing that to appear this way, while leaving the rest of the menu untouched.

If you want to keep using the plugin for ease of the plug-and-play UI, that's totally fine, but it will take me a bit of time to figure out how to shift the icon to the middle.

Alternatively, you can just modify the templates directly to show the images you want and then have more granular control over how things are arranged or how they look.

Up to you! Your choices are:
- Go with the icon at the end of the row, ezpz, 5min tops.
- Wait an indeterminate amount of time for me to figure out how to order them
- Scrap the plugin and modify the templates directly, moderately easy, but time consuming. maybe an hour or so.

Let me know what you decide

[dut]

I'd like some help to modify the template directly then, would you tell me how to do it?

[Kami]

Nov 23, 2023 10:19:13 GMT -8 dut said:

I'd like some help to modify the template directly then, would you tell me how to do it?

Yeah, sure! Give me a few minutes, it's gonna take a bit to write up.

[Kami]

Modifying a Theme's Menu

⚠️Important Notes⚠️

• Be very, very careful when modifying the templates. Don't be scared of them, because you can always reset the template and start over, but being careful will save you a headache in the long run.
  
  
• If you have more than one theme that you would like to style in the same manner, you will have to repeat this process. If you're changing anything, like images, see point #1.
  
  
• Because of the way some of this is structured, you may see some "error" colours in the HTML — it won't prevent you from saving, and it's not actually broken, it's just that template variables aren't valid HTML until the software processes them when loading the page; that said, don't ignore all error warnings. Just double check the HTML.
  
  
• ProTip: If you haven't already uploaded your menu images to the theme's image section, I definitely recommend it because they will be useable as variables, which is (imo) a lot easier than trying to make sure that your image URLs are correct. However, if you would prefer to use URLs, just replace any instance of a theme image variable with the URL.

1. Navigate to Admin > Structure > Layout Templates. This will display a page that is titled "Layout Templates" and has a small table of various templates that you can edit, and what each template contains.
   
   
2. Check that you are editing the correct theme, if you have more than one. You can confirm that the correct theme is selected in the menu bar under the "Layout Templates" title, next to "Current Theme".
   
   
3. Select the Forum Wrapper template.
   
   
4.  Approximately on Line 24 you will see some HTML that reads: <ul role="navigation">, followed by a {foreach} tag on the next line. This is where we will be making the edits. The line numbers are to the left of the text box; depending on your settings, they may not reflect a new line visually (if you have the template set to wrap text), but the numbers will reflect the spacing. I also used the phrase "approximately" as if you have made any other edits to this template in the past, you may have moved the location. If you can find the UL tag followed by the {foreach} tag, you're set.
   
   
5. The menu is just this ordered list; if you look at the structure, the statement in prose reads: "For each navigation menu", and it shows a list item structure. This is what we will be editing, and basically just breaking this out into individual components.
   
   
6. Remove all the variables and HTML starting at the {foreach $[navigation.menu]} line, and all the way down to the closing {/foreach} tag for this statement. Keep the <ul role="navigation"> tag.
   
   
7. For each menu item you want, structure the HTML in the following way; remember that if you upload your images to the theme, they will turn into variables for the template for that theme. On the right-hand side is the variable tree; scroll all the way down to "theme" and expand it until you see "images". Expand that, and you'll see the file name of all the images you uploaded. Place your cursor in the text box where you'd like the image to appear, then click on the image name in the tree and press the "insert" button at the bottom of the tree. If this is a hassle for you, replace the variable with <img src="URL HERE" alt="Menu Item Name to Display if the Image Doesn't Load"> — obviously, replace the placeholder text with the relevant information. Please note there will be a few things you may want to consider when creating these; please see the footnotes!
   <li>
 <a href="URL HERE"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
   $[theme.image.Image_Name]
 </a>
</li>
8. Repeat as necessary until you reach however many menu items it takes to get to the middle, and bear in mind you'll need to change the href="URL HERE" portion to actually have a URL. I recommend using a shortcut URL, that doesn't have the forum URL in it: eg: (/ for home, /search for search, etc) as by default the HTML will assume that you want to look for these pages on the current domain, and will fill in the blank, as it were. It's a time & space saver.
   
   
9. Once you get to the middle, where you want the user icon to be, use this:
   <li>
 <a class="menu_profile_icon" style="line-height: normal!important; border:1px solid #$[current_user.group.color];" href="/user/$[current_user.id]">
   $[current_user.avatar_quote]
 </a>
</li>
10. Repeat steps 7 and 8 until you get to the end. Be sure to save, and double check your work to make sure that everything has the appropriate opening & closing tags, quotations, etc.
    
    
11. Once you're all done with the HTML portion of things, including saving the template, navigate to Admin > Themes > Advanced Styles & CSS. Select the "Stylesheet" tab, and scroll all the way to the bottom. Create a few new lines in the text box, and add the following CSS; you may need to adjust the padding-top amount depending on your tastes and the size of your images to get it vertically centred:/* Custom Menu Adjustments */
a.menu_profile_icon {
 border-radius:50%;
 margin-left: 0.75em;
 margin-right: 0.75em;
 margin-top: 10px;
 padding: 0!important;
}
.menu_profile_icon img {
 border-radius:50%;
}
12. Save your CSS! Note that if there are any syntax errors here, the stylesheet will display the error and where it's located just above the save button.

You should now be finished and have things the way you want them. If you have any further questions that aren't answered in the footnotes below, please let me know!

--

FOOTNOTES:
^1. Depending on the menu item, you may benefit from using additional conditional statements. For example, the Login and Registration list items should be wrapped in {if $[current_user.is_guest]}<li>code here</li>{/if}, while the Logout list item should be wrapped in {if $[current_user.is_member]}<li>code here</li>{/if}. You will probably want to use the guest / member if statements on several of the menu items that you don't want to appear while people are logged in, or the things that only members can access like messages or bookmarks.
^2. Similarly, don't forget the link to the admin panel! You'll want {if $[current_user.can_admin]}<li>code here</li>{/if}. This might throw off the symmetry of the available options for admins.
^3. Very important!! If your "Messages" and "Bookmarks" menu items still show a little bubble for the number of unread items, this set up does NOT show that. It's fairly easy to add back in, but since I'm not a member on your forum I can't see how you have it set up.

[Kami]

There might be a more optimal way to do this BUT I ​​​​would have to take some time to double check; if I can figure it out in a timely manner, I'll let you know :)

[dut]

Thank very much!

The code itself works perfectly! Though I've encountrede a small problem with the setup of the menu afterwards.



The menu appeared far out on the left, but I've managed to move it to the center using;

#navigation-menu { padding: 0 660px; .....

In style sheets. But, as showed on the picture, a button jumps down, under the menu bar and I cant figure out how to keep the other buttons at their positions, while having the rest of the menu displayed properly. Do you know what I may be doing wrong?

[Kami]

Since you seem to be using a fixed-width forum, it looks like your images are just too big for the space provided. I would definitely advise smaller menu images (and a more legible font tbh). Alternatively, make your forum wider.

I would also undo the padding changes you made.