The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Solved]Custom Menu with image

View previous topic View next topic Go down

Solved [Solved]Custom Menu with image

Post by BayuDwinata on May 5th 2014, 6:35 pm


Is add something like this will need coding ? Nah i dunno. Thats why i'm asking here.
Can anyone help me to to create almost like that one ?
I'm not really understand about that tho'
Oh yeah. I'm using PHPBB2 right now


Last edited by BayuDwinata on May 7th 2014, 1:02 am; edited 1 time in total

BayuDwinata
New Member

Male Posts : 9
Reputation : 1
Language : Bahasa Indonesia,English

http://infiduelacademy.forumid.net

Back to top Go down

Solved Re: [Solved]Custom Menu with image

Post by erchima on May 5th 2014, 11:30 pm

nama forum ene apaan gan?

erchima
Forumember

Female Posts : 629
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: [Solved]Custom Menu with image

Post by SLGray on May 6th 2014, 3:43 am

@erchima wrote:nama forum ene apaan gan?
Please post in English as this is the English support forum.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36648
Reputation : 2443
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: [Solved]Custom Menu with image

Post by BayuDwinata on May 6th 2014, 12:22 pm

Bump, i think?

BayuDwinata
New Member

Male Posts : 9
Reputation : 1
Language : Bahasa Indonesia,English

http://infiduelacademy.forumid.net

Back to top Go down

Solved Re: [Solved]Custom Menu with image

Post by erchima on May 6th 2014, 12:29 pm

what your forum address?

erchima
Forumember

Female Posts : 629
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: [Solved]Custom Menu with image

Post by BayuDwinata on May 6th 2014, 12:57 pm

@erchima wrote:what your forum address?
its here.

BayuDwinata
New Member

Male Posts : 9
Reputation : 1
Language : Bahasa Indonesia,English

http://infiduelacademy.forumid.net

Back to top Go down

Solved Re: [Solved]Custom Menu with image

Post by erchima on May 6th 2014, 1:09 pm

where is the location of the existing forums in screenshots?

erchima
Forumember

Female Posts : 629
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: [Solved]Custom Menu with image

Post by Pizza Boi on May 6th 2014, 2:02 pm

Hi Very Happy

That's a custom menu. Use this code:

Code:
 <style type="text/css">

.arrowgreen{
  border-style: solid solid solid solid;
  border-color: #141414;
  border-size: 1px;
  border-width: 1px;
  text-align: left;
  width: 210px !Important;
  position: relative;
  right: 49px;
}

.arrowgreen ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
.arrowgreen li a{
  font: bold 10px Verdana, Arial, Helvetica, sans-serif;
  color: white;
  display: block;
  background: transparent url(IMG LINK) 100% 0;
  height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/
  padding: 4px 0 4px 10px;
  line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
  text-decoration: none !important;

 
.arrowgreen li a:link, .arrowgreen li a:visited {
  color: #CF2929;
  text-decoration:none !important;
}

.arrowgreen li a:hover{
  color: #FFFFFF;
  background-position: 100% -32px;
  text-decoration:none !important;
}

 
.arrowgreen li a.selected{
  color: #ffffff;
  background-position: 100% -64px;
}

</style><script type="text/javascript">
<!--
function popup(url)
{
 var width  = 500;
 var height = 600;
 var left  = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;
 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=no';
 params += ', scrollbars=no';
 params += ', status=no';
 params += ', toolbar=no';
 newwin=window.open(url,'windowname5', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>
<div class="arrowgreen">
   
   <ul>
      
      <li>
          <a title="YGODA Guide" href="http://ygoda.forumtl.com/t14-ygoda-guide">YGODA Guide</a>
      </li>
      
      <li>
          <a title="YGODA Version I Available Features" href="http://ygoda.forumtl.com/t24-ygoda-version-i-available-features">Ver I Features</a>
      </li>
      
      <li>
          <a title="General Rules" href="http://ygoda.forumtl.com/t25-general-rules">General Rules</a>
      </li>
      
      <li>
          <a title="Règles Générales" href="http://ygoda.forumtl.com/t70-regles-generales">Règles Générales</a>
      </li>
      
      <li>
          <a title="Test Requests" href="http://ygoda.forumtl.com/f42-test-requests">Test Requests </a>
      </li>
      
      <li>
          <a title="Tournaments" href="http://ygoda.forumtl.com/f8-tournaments">Tournaments</a>
      </li>
      
      <li>
          <a title="Introductions :: Farewell" href="http://ygoda.forumtl.com/f1-introductions-farewells">Intro :: Byes</a>
      </li>
      
      <li>
          <a title="Gaming Area" href="http://ygoda.forumtl.com/f19-gaming-area">Gaming Area</a>
      </li>
      
   </ul>
</div>

Change the links, and what not to the ones you need and this portion as well:

Code:
  display: block;
  background: transparent url(IMG LINK) 100% 0;

The IMG LINK represents the appearance and in hover, create one. If you want a radius, you should add in border-radius into the code.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: [Solved]Custom Menu with image

Post by BayuDwinata on May 6th 2014, 3:37 pm


It become like this sir..
The code i'm using :
Code:
<style type="text/css">

.arrowgreen{
  border-style: solid solid solid solid;
  border-color: #141414;
  border-size: 1px;
  border-width: 1px;
  text-align: left;
  width: 210px !Important;
  position: relative;
  right: 10px;
}

.arrowgreen ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
.arrowgreen li a{
  font: bold 10px Verdana, Arial, Helvetica, sans-serif;
  color: white;
  display: block;
  background: transparent url(http://i57.servimg.com/u/f57/18/82/60/38/nav_me10.png) 100% 0;
  height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/
  padding: 4px 0 4px 10px;
  line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
  text-decoration: none !important;
}

.arrowgreen li a:link, .arrowgreen li a:visited {
  color: #CF2929;
  text-decoration:none !important;
}

.arrowgreen li a:hover{
  color: #FFFFFF;
  background-position: 100% -32px;
  text-decoration:none !important;
}

 
.arrowgreen li a.selected{
  color: #ffffff;
  background-position: 100% -64px;
}

</style><script type="text/javascript">
<!--
function popup(url)
{
 var width  = 500;
 var height = 600;
 var left  = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;
 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=no';
 params += ', scrollbars=no';
 params += ', status=no';
 params += ', toolbar=no';
 newwin=window.open(url,'windowname5', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>
<div class="arrowgreen">
 
<ul>
 
<li>
 <a title="Infida Forum Rules" href="http://firstacademy.forumid.net/t1-infida-rules">Forum Rules</a>
</li>
 
<li>
 <a title="Infida Forum Shops" href="http://firstacademy.forumid.net/t5-infida-official-shop">Forum Shops</a>
</li>
 
<li>
 <a title="Perkenalan/Pamitan" href="http://firstacademy.forumid.net/f3-introduction-farewell">Perkenalan/Pamitan</a>
</li>
 
<li>
 <a title="Test System" href="http://firstacademy.forumid.net/t4-testing-system#4">Testing System</a>
</li>
 
<li>
 <a title="Duel Arena Info" href="http://firstacademy.forumid.net/t6-duel-arena-rules-and-rewards">Duel Arena Rules&Awards</a>
</li>
 
</ul>
</div>

BayuDwinata
New Member

Male Posts : 9
Reputation : 1
Language : Bahasa Indonesia,English

http://infiduelacademy.forumid.net

Back to top Go down

Solved Re: [Solved]Custom Menu with image

Post by BayuDwinata on May 7th 2014, 1:01 am

Sorry to double post, but
SOLVED .
I'm edit the code you given to set the image size

BayuDwinata
New Member

Male Posts : 9
Reputation : 1
Language : Bahasa Indonesia,English

http://infiduelacademy.forumid.net

Back to top Go down

Solved Re: [Solved]Custom Menu with image

Post by Ange Tuteur on May 7th 2014, 2:17 am

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum