Coding-Spot

You are not connected. Please login or register

 
 

Menu Like Mostone's Widget?

Message (Page 1 of 1)


 
Advance Member

Posted on Fri May 24, 2013 10:07 am

 
Hello How Do I Make A Widget Like This Help Please? ScreenShot:


Thanks In Advance



View user profile



 
Senior Member

Posted on Fri May 24, 2013 10:23 am

 
ok, try this one :):

put in your widget html
Code:
<tr><td class="row1" align="left">

<style type="text/css">

.arrowgreen{
  width: 100%; /*width of menu*/
  border-style: solid solid solid solid;
  border-color: #141414;
  border-size: 1px;
  border-width: 1px;
}

.arrowgreen ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
.arrowgreen li a{
  font: bold 12px Verdana, Arial, Helvetica, sans-serif;
  display: block;
  background: transparent url(image-URL) 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: #7175b0;
text-decoration:none !important;
}

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

 
.arrowgreen li a.selected{
  color: #fafafa;
  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 href="#" title="A">A</a></li>
      <li><a href="#" title="B">B</a></li>


  </ul>
</div>
</td></tr>

tadaaaa :D:



View user profile



 
Advance Member

Posted on Fri May 24, 2013 10:42 am

 
But How About The CSS? Like Yours When You Hover The Background Will CHange Please Help Mostone Thanks Before :)



View user profile



 
Senior Member

Posted on Fri May 24, 2013 11:14 am

 
hmm, in this code
Code:
.arrowgreen li a{
  font: bold 12px Verdana, Arial, Helvetica, sans-serif;
  display: block;
  background: transparent url(image-URL) 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;

you look
Code:
background: transparent url(image-URL) 100% 0;

add "image-URL"
try this
https://i42.servimg.com/u/f42/17/32/93/44/menu3114.png

tadaaa ^_^



View user profile



 
Advance Member

Posted on Fri May 24, 2013 11:22 am

 
Not Working Mostone Why Is That?



View user profile



 
Advance Member

Posted on Fri May 24, 2013 12:03 pm

 
It Works Now But Very Little I Want Like Yours Very Wide Here Is Screen SHot.

I Want Like Yours Very Wide



View user profile



 
Senior Member

Posted on Fri May 24, 2013 12:47 pm

 
try this one

Code:
<tr><td class="row1" align="left">

<style type="text/css">

.arrowgreen{
  width: 100%; /*width of menu*/
  border-style: solid solid solid solid;
  border-color: #141414;
  border-size: 1px;
  border-width: 1px;
}

.arrowgreen ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
.arrowgreen li a{
  font: bold 12px Verdana, Arial, Helvetica, sans-serif;
  display: block;
  background: transparent url("http://i42.servimg.com/u/f42/17/32/93/44/menu3114.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: #7175b0;
text-decoration:none !important;
}

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

 
.arrowgreen li a.selected{
  color: #fafafa;
  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 href="#" title="A">A</a></li>
      <li><a href="#" title="B">B</a></li>


  </ul>
</div>
</td></tr>

before you must add " " in your code for image url

so
Code:
background: transparent url("http://i42.servimg.com/u/f42/17/32/93/44/menu3114.png")

for width 100% auto :D:



View user profile



 
Advance Member

Posted on Fri May 24, 2013 12:57 pm

 
Not Working :( Still Short I Want Wide Like Yours :'(



View user profile



 
Senior Member

Posted on Fri May 24, 2013 1:05 pm

 
please url your forum :):



View user profile



 
Advance Member

Posted on Fri May 24, 2013 1:05 pm

 
http://animefans.realbb.net/ Here :D



View user profile



 
Senior Member

Posted on Fri May 24, 2013 4:38 pm

 
yeah i done try in punBB with my same code

you can see this, cant auto resize :(



View user profile



 
Administrator
Administrator

Posted on Fri May 24, 2013 8:27 pm

 
Try this one:
Code:
<div id="navigation">
    <ul class="top-level">
        <li><a href="http://coding-spot.darkbb.com/">A</a></li>
        <li><a href="http://coding-spot.darkbb.com/">B</a></li>
        <li><a href="http://coding-spot.darkbb.com/">C</a></li>
        <li><a href="http://coding-spot.darkbb.com/">D</a></li>
        <li><a href="http://coding-spot.darkbb.com/">E</a></li>
        <li><a href="http://coding-spot.darkbb.com/">F</a></li>
        <li><a href="http://coding-spot.darkbb.com/">G</a></li>
    </ul>
</div>

<style>#navigation {font-size:0.75em; width:100%; font-weight:bold;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;}

ul.top-level {background:#141414;}
ul.top-level li {
 border-bottom: #0d0d0d solid;
 border-top: #0d0d0d solid;
 border-width: 1px;
}

#navigation a {
 color: #2cab58;
 cursor: pointer;
 display:block;
 height:30px;
 line-height: 30px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
#navigation a:hover{
 text-decoration:underline;
 
}

#navigation li:hover {
 background: #00341d;
 position: relative;

}
</style>



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Sat May 25, 2013 12:50 am

 
Not Work Sir :(

Didnt See There Many Codes Now WOrks But When Hover Green I Want When Hover Like Mostone?



View user profile



 
Administrator
Administrator

Posted on Sat May 25, 2013 1:31 am

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

.arrowgreen{
  width: 100%; /*width of menu*/
  border-style: solid solid solid solid;
  border-color: #141414;
  border-size: 1px;
  border-width: 1px;
}

.arrowgreen ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
.arrowgreen li a{
  font: bold 12px Verdana, Arial, Helvetica, sans-serif;
  display: block;
  background: transparent url(http://i46.servimg.com/u/f46/12/16/55/86/menu310.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: #7175b0;
text-decoration:none !important;
}

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

 
.arrowgreen li a.selected{
  color: #fafafa;
  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 href="http://worldgenerationda.forumotion.com/f2-announcements" title="A">A</a></li>
      <li><a href="http://worldgenerationda.forumotion.com/t3-forum-rules-must-read" title="B">B</a></li>
<li><a href="http://worldgenerationda.forumotion.com/f4-introductions" title="C">C
</a></li>
<li><a href="http://worldgenerationda.forumotion.com/f5-questions" title="D">D
</a></li>
<li><a href="http://worldgenerationda.forumotion.com/f8-test-requests" title="E
">E
</a></li>
 <li><a href="http://worldgenerationda.forumotion.com/f11-battle-arena" title=" F
"> F
</a></li>   

     

  </ul>
</div>



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Sat May 25, 2013 3:47 am

 
Sir Instead It Will Stretch :(: It Just Became Small :(: Thanks Before Mr.Mark :):



View user profile



 
Administrator
Administrator

Posted on Sat May 25, 2013 5:03 am

 
Add this to your CSS:
Code:
.module .main-content ul {
margin: 0 !important;
}



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Sun May 26, 2013 7:43 am

 
Solved Now Works :)



View user profile



 
Administrator
Administrator

Posted on Sun May 26, 2013 7:47 am

 
Since the problem is now solved i will locked this and move to archive section. ~Locked and Moved Happy



View user profile http://coding-spot.darkbb.com


#19

Sponsored content


 

Posted Today at 2:26 pm

 





Message (Page 1 of 1)

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

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None