2018-12-12, 08:50 AM
Pages: 1 2
2018-12-12, 07:16 PM
(2018-12-12, 08:50 AM)AskTalk.it Wrote: [ -> ]...Work?
https://i.imgur.com/eMexSev.jpg
replace with
.memberlistname {
font-family: 'Pacifico', cursive;
font-size: 14px;
text-transform: normal;
text-align: center;
margin-top: -10px;
cursor: pointer;
word-wrap: break-word;
}2018-12-16, 09:35 PM
This doesn't make it a horizontal list. Think its missing some css.
2020-10-04, 10:58 AM
Bumping this thread. Is there any way to make an horizontal list? It seems to be missing some crucial CSS.
2020-10-06, 06:34 AM
(2020-10-04, 10:58 AM)ShineCero Wrote: [ -> ]Bumping this thread. Is there any way to make an horizontal list? It seems to be missing some crucial CSS.
Hey buddy op did some minor stuff wrong so let me help. The reason that the members list is not horizontal is because he has a <br> at the end of Memberlist_user
<tr>
<div class="memberlistprofile"><center><div class="memberlist_avatar">{$user['avatar']}</div>
{$user['userstars']}<h4 class="memberlistname">{$user['profilelink']}</h4>
<div class="memberlistbio"><i class="infothead fas fa-calendar-alt" title="Joined"></i>
{$user['regdate']}</div><div class="infothead"><center><i class="fas fa-user-edit"></i> Threads:{$user['threadnum']} <li class="fas fa-comment"></li> Comments: {$user['postnum']}
</center></div>
</div>
</tr>
<br />Simply change that ^ which he presented in the main thread to this.
<tr>
<div class="memberlistprofile"><center><div class="memberlist_avatar">{$user['avatar']}</div>
{$user['userstars']}<h4 class="memberlistname">{$user['profilelink']}</h4>
<div class="memberlistbio"><i class="infothead fas fa-calendar-alt" title="Joined"></i>
{$user['regdate']}</div><div class="infothead"><center><i class="fas fa-user-edit"></i> Threads:{$user['threadnum']} <li class="fas fa-comment"></li> Comments: {$user['postnum']}
</center></div>
</div>
</tr>Now about his css well it is not bad at all but not the best so here is my css from my board.
1 - Create memberlst.css (Admin CP > Templates & Style > Themes > Add Stylesheet) and add:
.memberlistprofile {
display: inline-table;
box-sizing: border-box;
width: 15rem;
border: 1px solid #282d35;
text-align: center;
color: #444;
border-radius: .5rem;
height: 6rem;
background: #181824;
margin-bottom: 35px;
margin-left: 35px
}
.memberlistname {
font-size: 25px;
text-align: center;
margin-top: -10px;
cursor: pointer;
text-shadow: 0px 1px 0px #bd9bff
}
.memberlistbio {
margin-bottom: 1rem;
font-size: 14px;
font-family: Georgia,serif;
background: #0e1013;
margin-top: -15px;
color: #c7c7c7
}
.memberlistbio i {
margin-top: -2px
}
.memberlist_avatar {
height: 100px;
width: 100px;
padding: 4px;
margin-top: -15px;
border-radius: 50% 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%
}
.memberlist_avatar img {
width: 100px;
height: 100px;
border-radius: 50% 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-top: -6px;
margin-left: -2px;
border: 3px solid #33274a
}
.memberlist_avatar img:hover {
-moz-transition: all 1.0s ease-in-out;
-webkit-transition: all 1.0s ease-in-out;
-o-transition: all 1.0s ease-in-out;
-ms-transition: all 1.0s ease-in-out;
transition: all 1.0s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
h4 {
font-family: source-sans-pro,sans-serif;
color: #6EE6E8;
font-weight: 100;
font: 2rem/4.5rem "Kite One";
padding: 0 1.5rem;
opacity: .5
}
.infothead {
border-top: 2px solid #181824;
;padding: 4px;
background: #33274a;
color: #c7c7c7;
border-radius: .4rem;
border-top-right-radius: .0rem;
border-top-left-radius: .0rem;
height: 25px
}
.float-left {
display: inline-block;
float: left
}
.float-right {
display: inline-block;
float: right
}
@media only screen and (max-width: 728px) {
.memberlistprofile {
float:left;
width: 100%;
text-align: center;
margin-top: 10px
}
And for memberlist templet I made some minor changes as well (I think) so here is that if needed.
2 - Open Memberlist template and replace all content with:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->member_list}</title>
{$headerinclude}
</head>
<body>
{$header}
{$multipage}
<br />{$users}
<br class="clear" />
<br />
<form method="post" action="memberlist.php">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="3">
<div class="float_right">
<strong><a href="memberlist.php?action=search">{$lang->advanced_search}</a></strong>
</div>
<div><strong>{$lang->search_members}</strong></div>
</td>
</tr>
<tr>
<td class="tcat"><strong><label for="username">{$lang->username}</label></strong></td>
<td class="tcat"><strong><label for="website">{$lang->website}</label></strong></td>
<td class="tcat"><strong><label for="sort">{$lang->sort_by}</label></strong></td>
</tr>
<tr>
<td class="trow1" width="33%" style="vertical-align: top;">
{$lang->contains}<br />
<input type="text" class="textbox" name="username" id="username" style="width: 99%; margin-top: 4px;" value="{$search_username}" />
</td>
<td class="trow1" width="33%" style="vertical-align: top;">
{$lang->contains}<br />
<input type="text" class="textbox" name="website" id="website" style="width: 99%; margin-top: 4px;" value="{$search_website}" />
</td>
<td class="trow1" width="33%">
<div class="smalltext" style="margin-bottom: 3px;">
<input type="radio" class="radio" name="order" id="order_asc" value="ascending"{$order_check['ascending']} /> <label for="order_asc">{$lang->order_asc}</label>
<input type="radio" class="radio" name="order" id="order_desc" value="descending"{$order_check['descending']} /> <label for="order_desc">{$lang->order_desc}</label>
</div>
<select name="sort" id="sort" style="width: 99%;">
<option value="username"{$sort_selected['username']}>{$lang->sort_by_username}</option>
<option value="regdate"{$sort_selected['regdate']}>{$lang->sort_by_regdate}</option>
<option value="lastvisit"{$sort_selected['lastvisit']}>{$lang->sort_by_lastvisit}</option>
<option value="postnum"{$sort_selected['postnum']}>{$lang->sort_by_posts}</option>
<option value="threadnum"{$sort_selected['threadnum']}>{$lang->sort_by_threads}</option>
<option value="referrals"{$sort_selected['referrals']}>{$lang->sort_by_referrals}</option>
</select>
</td>
</tr>
</table>
<div align="center"><br /><input type="submit" class="button" name="submit" value="{$lang->search}" /></div>
</form>
{$footer}
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/select2/select2.css?ver=1806">
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/select2/select2.min.js?ver=1806"></script>
<script type="text/javascript">
<!--
if(use_xmlhttprequest == "1")
{
MyBB.select2();
$("#username").select2({
placeholder: "{$lang->search_user}",
minimumInputLength: 3,
maximumSelectionSize: 3,
multiple: false,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "xmlhttp.php?action=get_users",
dataType: 'json',
data: function (term, page) {
return {
query: term, // search term
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data};
}
},
initSelection: function(element, callback) {
var value = $(element).val();
if (value !== "") {
callback({
id: value,
text: value
});
}
},
// Allow the user entered text to be selected as well
createSearchChoice:function(term, data) {
if ( $(data).filter( function() {
return this.text.localeCompare(term)===0;
}).length===0) {
return {id:term, text:term};
}
},
});
$('[for=username]').click(function(){
$("#username").select2('open');
return false;
});
}
// -->
</script>
</body>
</html>But keep in mind that your going to need to change some of the css to match you're forum.
If you like my help feel free to send me a PM anytime with your contact info (Discord/Telegram or Keybase)
2020-10-08, 05:31 PM
Ahhh, so that's the case. I didn't even realized the <br /> tag haha. Got everything working tho! Thanks for the help. Much appreciated 
Pages: 1 2