Hello!
I was changing the post-profile section from my Forum, following this manual:
http://www.smfpersonal.net/tutoriales/celdas-en-perfil-t3256.0.html
Now i was installing the Arcade-Trophies-Mod and set it to show the small icons from the game.
My post-profile looks like this now (see first picture).
When i add the <li> Element (for to show the icons in a box, like the other post-profile-elements), every single icon from the game appear in a new row.
How can i do this, that all the trophy-icons are in one row and boxed, like the IM-icons for example?
Thank you in advance!
D.
not sure how much hand control you have here..
Add style ='float:left;' or style='display:inline-block;' in the html (or css)
you may need to set a width as well
At first: Thank you!
I try to add directly
echo '
<li><style="display:inline-block"><a href="', $scripturl . '?action=arcade;sa=play;game=' . $trophy['id'], '">', '<img src="' , $modSettings['gamesUrl'].'/', ($trophy['directory'] ? $trophy['directory'] . '/' : ''), $trophy['thumbnail'], '" alt="' . $trophy['name'] . '" title="' . $trophy['name'] . '" border="0" height="15" width="15"/>', '</a></style></li>';
and
echo '
<li><style="float:left"><a href="', $scripturl . '?action=arcade;sa=play;game=' . $trophy['id'], '">', '<img src="' , $modSettings['gamesUrl'].'/', ($trophy['directory'] ? $trophy['directory'] . '/' : ''), $trophy['thumbnail'], '" alt="' . $trophy['name'] . '" title="' . $trophy['name'] . '" border="0" height="15" width="15"/>', '</a></style></li>';
into display.template.php, but both are not working.... :'(
Try:
<div style="text-align: left;">whatever</div> instead of align float left.
thank you so much...
didnt work either.
This is the result (see Picture)
Well lets steal the default CSS here...
<ul class="reset">
<li>whatever</li>
</ul>
Sorry man, being on mobile sucks as I'm typing this off my head.
I will be home shortly and if u don't mind waiting a bit, I can fix this issue for you then.
That would be nice. Here (berlin, germany) it is late, but i prefer to wait & to fix this.
tell me what you need (PM)
Thank you!
Just for giggles,... You want them icons in a row right? I mean, one line?
exactly. in a row, surrounded from a box, created from the <li> tag....
you need to add it like this:
<li style="display:inline-block">
or
<li style="float:left">
or edit the css preferably
Not working, too...
When i add this to the index.css, all my other icons are no longer centerd.
can i create a new class? or a new div id? or something like "postbox li" for example....?
What i need to do for this?
actually, the part for this in the index.css, looks like this:
/* poster details and list of items */
.poster h4, .poster ul li
{
background: #fff;
color: #546C7E;
border: solid 1px #B0C4D2;
margin-bottom: 1px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
width: 90%;
}
.poster h4, .poster h4 a
{
color: #c06002;
}
.poster ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li
{
display: inline;
}
.poster li.stars, .poster li.avatar, .poster li.blurb, li.postcount, li.im_icons ul
{
margin-bottom: 2px;
}
li.im_icons ul li, .poster li.profile ul li
{
margin-top: 0.5em;
border: none; padding: 0;
}
.poster li.avatar
{
overflow: hidden;
}
.poster li.warning
{
line-height: 1.2em;
padding-top: 1em;
}
.poster li.warning a img
{
vertical-align: bottom;
padding: 0 0.2em;
}
.messageicon
{
float: left;
margin: 0 0.5em 0 0;
}
.messageicon img
{
padding: 6px 3px;
}
.keyinfo
{
float: left;
width: 50%;
}
.modifybutton
{
clear: right;
float: right;
margin: 6px 20px 10px 0;
text-align: right;
font: bold 0.85em arial, sans-serif;
color: #334466;
}
do they have space to go in a line?
maybe the container object above has a specified width that is not allowing them to go in a line?
or maybe the css style for the list items is conflicting in some way