MyBB Community Forums

Hey all,

Currently working on launching my forum again after the upgrade to 1.8. Have decided to stay with the default theme for now.

On 1.6 it was easy to modify the toplinks, however on 1.8 a few things seemed to have changed.

I have followed this tutorial, but can't seem to get the picture icon to change:





I have added the extra sections in global.lang.php:

$l['search_button'] = 'Search';
$l['toplinks_memberlist'] = "Member List";
$l['toplinks_search'] = "Search";
$l['toplinks_calendar'] = "Calendar";
$l['toplinks_help'] = "Help";
$l['toplinks_portal'] = "Portal";
$l['toplinks_game_library'] = "Game Library";
$l['toplinks_Index'] = "Index";
$l['toplinks_Reviews'] = "Reviews";
$l['bottomlinks_contactus'] = "Contact Us";
$l['bottomlinks_returntop'] = "Return to Top";
$l['bottomlinks_syndication'] = "RSS Syndication";
$l['bottomlinks_litemode'] = "Lite (Archive) Mode";

And this is what my header template for the default theme currently looks like:

<ul class="menu top_links">
 {$menu_portal}
                        <li><a href="{$mybb->settings['bburl']}/usercp.php?action=gamelibrary"> <img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/gamelibrary.gif" alt="" title="Game Library" /> {$lang->toplinks_game_library}</a></li>
 {$menu_search}
 {$menu_memberlist}
 {$menu_calendar}
 <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
 </ul>

I am just trying to get it to work for the gamelibrary link atm. I have the game library icon in my toplinks folder (previously used by 1.6) but I keeps showing the search bar icon, which is just a small section of a picture full of all the icons.


Any help greatly appreciated!

Try this code instead:

<ul class="menu top_links">
{$menu_portal}
                       <li><a href="{$mybb->settings['bburl']}/usercp.php?action=gamelibrary"> <img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/gamelibrary.gif" alt="" title="Game Library" /> {$lang->toplinks_game_library}</a></li>
{$menu_search}
{$menu_memberlist}
{$menu_calendar}
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
<li><a href="{$mybb->settings['bburl']}/YOUR LINK HERE">YOUR PAGE NAME HERE</a><img src="www.YOURDOMAIN.com/YOUR LINK TO IMAGE"></li>
</ul>

You'll obviously need to change the links to suit your site but this should work.

Hey thank you for the help! Following your instructions I produced:

<li><a href="{$mybb->settings['bburl']}/usercp.php?action=gamelibrary"> Game Library</a> <img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/gamelibrary.gif"></li>

However it is resulting in:



Sorry, any Ideas? I swear this used to be alot easier in 1.6

Please try:

<li><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/gamelibrary.gif" /><a href="{$mybb->settings['bburl']}/usercp.php?action=gamelibrary"> Game Library</a> </li> 

(2015-02-17, 02:39 AM)Ben_Conway Wrote: [ -> ]Please try:

<li><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/gamelibrary.gif" /><a href="{$mybb->settings['bburl']}/usercp.php?action=gamelibrary"> Game Library</a> </li> 

Sorry man, same result but the broken image is on the other side.

My code:

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<div id="logo">
				<div class="wrapper">
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
					<ul class="menu top_links">
						{$menu_portal}
                        <li><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/gamelibrary.gif" /><a href="{$mybb->settings['bburl']}/usercp.php?action=gamelibrary"> Game Library</a> </li>
						{$menu_search}
						{$menu_memberlist}
						{$menu_calendar}
						<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
					</ul>
				</div>
			</div>
			<div id="panel">
				<div class="upper">
					<div class="wrapper">
						{$quicksearch}
						{$welcomeblock}
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
			</div>
		</div>
		<div id="content">
			<div class="wrapper">
				{$pm_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}
				{$pending_joinrequests}
				{$awaitingusers} <!-- BAM -->{$bam_announcements}<!-- /BAM -->
				<navigation>
				<br />

---

Ok so this half worked:

<li><img src="{$theme['imgdir']}/toplinks/gamelibrary.gif" /><a href="{$mybb->settings['bburl']}/usercp.php?action=gamelibrary"> Game Library</a> </li>

Results in:


Where the hell is it pulling the search icon from?

Since these icons now use sprites, you cannot do it that way. You are going to have to do it like this.
You can also add your image to the sprite sheet if you wanted to have less scattered icons.

<li>
	<a class="games" href="{$mybb->settings['bburl']}/usercp.php?action=gamelibrary">Game Library</a>
</li>

CSS

.games {
    background-image: url("http://thevideogameforum.com/images/toplinks/gamelibrary.gif") !important;
}

Note: You may not need the !important on the end, but I put it there just in case (no test forum).

(2015-02-17, 06:32 AM)thexshadow Wrote: [ -> ]Since these icons now use sprites, you cannot do it that way. You are going to have to do it like this.
You can also add your image to the sprite sheet if you wanted to have less scattered icons.

<li>
	<a class="games" href="{$mybb->settings['bburl']}/usercp.php?action=gamelibrary">Game Library</a>
</li>

CSS

.games {
    background-image: url("http://thevideogameforum.com/images/toplinks/gamelibrary.gif") !important;
}

Note: You may not need the !important on the end, but I put it there just in case (no test forum).

I knew there was another component I was missing. I didn't look close enough at the Global CSS though.

Thank you that worked a charm!

(2015-02-17, 06:32 AM)Boonie Wrote: [ -> ]Since these icons now use sprites, you cannot do it that way. You are going to have to do it like this.
You can also add your image to the sprite sheet if you wanted to have less scattered icons.

<li>
	<a class="games" href="{$mybb->settings['bburl']}/usercp.php?action=gamelibrary">Game Library</a>
</li>

CSS

.games {
    background-image: url("http://thevideogameforum.com/images/toplinks/gamelibrary.gif") !important;
}

Note: You may not need the !important on the end, but I put it there just in case (no test forum).

hello i have tried this but i can not change the image from the search icon to what i want

i have

<li><a href="{$mybb->settings['bburl']}/index.php" class="forum">{$lang->toplinks_forum}</a></li>

added to header template

and

$l['toplinks_forum'] = "Forum";

added to global.lang.php

and 

.forum {
    background-image: url("images/icons/lightbulb.png") !important;
}

to global.css

this is with mybb 1.8.12 and default theme

nvm its working i had to hard refresh or something...