Loading...

Forum Index > Support - English > Customizing your Group's Menu

Chidi and Chika Nwaogu 5 years ago
ActivityRank: 108

Have you ever wished to have a customized menu with icons right beside your links? Have you ever wished for a menu like that below?:


If yes, then replace {include file="../menu.tpl"} in your Template HTML with the HTML code below (Remember to replace the <yourgroupname>.grou.ps with the actual subdomain of your group):


<div id="menu"><span class="MyMenuTitle"><b>GETTING STARTED</b></span><br><ul class="level1" id="nav">

                        <li><img src="http://grou.ps/images/fugue/balloon-quotation.png"><a href="http://<yourgroupname>.grou.ps/601110"><span>Take a Tour</span></a></li></ul><br><span class="MyMenuTitle"><b>FAVORITES</b></span><br>

              

                    <ul class="level1" id="nav">

                        <li><img src="http://grou.ps/includes/file.php?group_name=lagbook&function=editor&id=373292"><ahref="http://<yourgroupname>.grou.ps/home"><span>News 


Feeds</span></a></li>

                        <li><img src="http://grou.ps/includes/file.php?group_name=lagbook&function=editor&id=373293"><


href="http://<yourgroupname>.grou.ps/dashboard/messages"><span>Messages</span></a></li>

                        <li><img src="http://grou.ps/images/fugue/light-bulb.png"><


href="http://<yourgroupname>.grou.ps/ideas"><span>Ideas</span></a></li>

                        <li><img src="http://grou.ps/images/fugue/chain.png"><


href="http://<yourgroupname>.grou.ps/links"><span>Advertise</span></a></li>

      <li><img src="http://grou.ps/images/fugue/calendar-day.png"><ahref="http://<yourgroupname>.grou.ps/calendar"><span>Events</span></a></li>

                      <li><img src="http://grou.ps/images/fugue/images.png"><ahref="http://<yourgroupname>.grou.ps/photos/person/{intrapi}viewer_name{/intrapi}"><span>Photos</span></a></li>

                    </ul>

                    <div style="clear:both;"></div>

              <br>            



              <span class="MyMenuTitle"><b>INTERESTS</b></span><br>

               

                    <ul class="level1" id="nav">

                        <li><img src="http://grou.ps/includes/file.php?group_name=lagbook&function=editor&id=373294"><


href="http://<yourgroupname>.grou.ps/groups"><span>Groups</span></a></li>

                        <li><img src="http://grou.ps/images/fugue/ui-tooltip-balloon-bottom.png"><


href="http://<yourgroupname>.grou.ps/talks"><span>Discussion</span></a></li>

                        <li><img src="http://grou.ps/images/fugue/document-music.png"><a href="http://<yourgroupname>.grou.ps/music"><span>Music</span></a></li>

                        <li><img src="http://grou.ps/images/fugue/film.png"><


href="http://<yourgroupname>.grou.ps/videos"><span>Videos</span></a></li>

                      <li><img src="http://grou.ps/images/fugue/blog.png"><ahref="http://<yourgroupname>.grou.ps/blogs"><span>Notes</span></a></li>

      <li><img src="http://grou.ps/images/fugue/document--pencil.png"><ahref="http://<yourgroupname>.grou.ps/wiki"><span>Pages</span></a></li>

                    </ul>

                    <div style="clear:both;"></div>

                <br>

                


                              <span class="MyMenuTitle"><b>APPS</b></span><br>

                

                    <ul class="level1" id="nav">

                       <li><imgsrc="http://cdn1.iconfinder.com/data/icons/CrystalClear/16x16/apps/package_games.png"><ahref="http://<yourgroupname>.grou.ps/621427"><span>Games <sup><spanstyle="color:#b92222;">NEW!</span></sup></span></a></li>

                      <li><img src="http://grou.ps/images/groups_bar/chat.png"><ahref="http://<yourgroupname>.grou.ps/623387"><span>Video Chat <sup><spanstyle="color:#b92222;"> NEW!</span></sup></span></a></li>

                      <li><img src="http://grou.ps/images/fugue/folder-open-document-music.png"><a href="http://<yourgroupname>.grou.ps/616505"><span>Music Player <sup><spanstyle="color:#b92222;"> NEW!</span></sup></span></a></li>

                        <li><img src="http://grou.ps/images/fugue/blue-document-share.png"><a href="http://<yourgroupname>.grou.ps/files"><span>Files</span></a></li>

                      <li><img src="http://grou.ps/images/fugue/book-question.png"><ahref="http://<yourgroupname>.grou.ps/ask"><span>Questions</span></a></li>

                        <li><img src="http://grou.ps/images/fugue/auction-hammer.png"><a href="http://<yourgroupname>.grou.ps/auction"><span>Marketplace</span></a></li>

      <li><img src="http://<yourgroupname>.grou.ps/images/fugue/tick.png"><ahref="http://<yourgroupname>.grou.ps/funds"><span>Causes</span></a></li>

                    </ul>

                    <div style="clear:both;"></div>

                </div>


You will also need to add this CSS code below to your Template CSS:

.MyMenuTitle {
  color#999999!important;
  font-size10px!important;
}


What d'you think of your new menu? Cool, huh?

Yokohama 5 years ago
ActivityRank: 230
great help..tons of likes to you..
Yokohama 5 years ago
ActivityRank: 230
How to customize the chat bar? Please post tips on that.
chat bar
Also tell from where we can customize footer? In the HTML/template we have something called "footer.tpl" but how to customize the contents in the footer?

(100 likes)
jared.p 5 years ago
ActivityRank: 8
when i add this.. it works but returns my network to an old template?
Tahsan Rahman 5 years ago
ActivityRank: 6
how i change my group menu with icon and chat box?
jacky.hood 3 years ago
ActivityRank: 2
This page is unreadable. Change the font to white or lighten the background.

Top Contributors

1366
mephIStO
1171
jimbowales2011
897
asukru.goksu
590
Emre Sokullu
577
netgay