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.

Widget Help

View previous topic View next topic Go down

Solved Widget Help

Post by CrystalSoul on March 3rd 2014, 3:05 am

Hey guys , I was having a problem here ..

http://prntscr.com/2yod8p , no matter what I do , these texts don't want to seperate , I want to have them each in one line ( Starter Guide in a line , Forum Rules in another , etc.......

http://prntscr.com/2yod8p

URL :http://divineduelacademy.lolbb.com/forum

Thanks


Last edited by CrystalSoul on March 7th 2014, 11:08 pm; edited 3 times in total

CrystalSoul
Forumember

Male Posts : 149
Reputation : 1
Language : English
Location : Egypt

http://yugiohduelacademy.makeforum.co.uk/forum

Back to top Go down

Solved Re: Widget Help

Post by erchima on March 3rd 2014, 1:35 pm

@CrystalSoul wrote:Hey guys , I was wondering how can I make menus like these?

http://prntscr.com/2xe074
http://prntscr.com/2xe0bw
http://prntscr.com/2xe0df

URL : http://divineduelacademy.lolbb.com/

Thanks for your time Smile
you can create new widget
ex:
Code:

[url="/login"][img(50px,50px)]http://i.imgur.com/BuT6s8C.png[/img][/url]

.


Last edited by erchima on March 3rd 2014, 1:40 pm; edited 2 times in total

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: Widget Help

Post by Pizza Boi on March 3rd 2014, 1:37 pm

Hi Very Happy

Please modify this code to your liking Smile.

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

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

.pizza ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
}
 
.pizza li a{
 font: bold 12px 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). Recommended size is 248 by 96*/
 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;
}
 
.pizza li a:link, pizza li a:visited {
 color: #CF2929;
text-decoration:none !important;
}

.pizza li a:hover{
 color: #FFFFFF !important;
 background-position: 100% -32px;
text-decoration:none !important;
}
 
.pizza li a.selected{
 color: #ffffff !imporant;
 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="pizza">
 
<ul>
 
<li>
 <a href="URL">WORD</a>
</li>
 
<li>
 <a href="URL" title="Any title you want">WORD</a>
</li>
 
<li>
 <a href="" title=""></a>
</li>
 
<li>
 <a href="" title=""></a>
</li>
 
<li>
 <a href="" title=""></a>
</li>
 
<li>
 <a href="" title="s"></a>
</li>
 
<li>
 <a href="" title=""></a>
</li>
 
<li>
 <a href="" title=""></a>
</li>
 
</ul>
</div>

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: Widget Help

Post by CrystalSoul on March 7th 2014, 3:40 pm

Bump and updated.

CrystalSoul
Forumember

Male Posts : 149
Reputation : 1
Language : English
Location : Egypt

http://yugiohduelacademy.makeforum.co.uk/forum

Back to top Go down

Solved Re: Widget Help

Post by Ange Tuteur on March 7th 2014, 7:44 pm

Hello CrystalSoul,

If you want to have an element on a new line add a line break.

ex :
Code:
<a href="/myurl">Link</a><br/><a href="/myurl">Link 2</a>

Additionally you could display the links in your widgets as block level elements.

Code:
<a class="blockLevel" href="/myurl">Link</a><a class="blockLevel" href="/myurl">Link 2</a>

Above we added the class blockLevel to our links, now we add our CSS to turn them into block level elements.
Code:
.blockLevel { display:block; }

To keep it simple : a block level element basically takes up an entire line; spans from left to right of it's parent element.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Widget Help

Post by CrystalSoul on March 7th 2014, 11:07 pm

Can't thank you enough , Ange Very Happy

This can be solved xD

CrystalSoul
Forumember

Male Posts : 149
Reputation : 1
Language : English
Location : Egypt

http://yugiohduelacademy.makeforum.co.uk/forum

Back to top Go down

Solved Re: Widget Help

Post by Ange Tuteur on March 7th 2014, 11:11 pm

You're welcome Smile

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
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