MyBB Community Forums › Resources › Tutorials v
[For 1.8] [Tutorial] Select Style Arrow Font Awesome 5 icons

Threaded Mode
[For 1.8] [Tutorial] Select Style Arrow Font Awesome 5 icons
Anka06 Offline
Posts: 53
Threads: 29
Joined: May 2016
Reputation: 31
#1
2019-02-11, 08:49 PM (This post was last modified: 2019-02-15, 06:25 PM by Anka06.)
[Back up before doing ]Admin Cp - Themes & Styles - Global.css Select Find

replace with 


select {
    padding: 4px;
    margin: 0;
    background: #FFF;
    border: 1px solid #ddd;
    color: #333;
    outline: none;
    font-size: 13px;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    width: 200px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    
}

.select-wrap {
    position: relative;
}

.select-wrap:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f107';
    font-size: 15px;
    position: absolute;
    top: -2px;
    right: 10px;
    color: #c6c4c4;
    pointer-events: none;
}


forumdisplay_threadlist Find -  replace with 

	<td class="tfoot" align="right" colspan="{$colspan}">				
			<form action="forumdisplay.php" method="get">
				<input type="hidden" name="fid" value="{$fid}" />
				<span class="select-wrap">
				<select name="sortby">
					<option value="subject"{$sortsel['subject']}>{$lang->sort_by_subject}</option>
					<option value="lastpost"{$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option>
					<option value="starter"{$sortsel['starter']}>{$lang->sort_by_starter}</option>
					<option value="started"{$sortsel['started']}>{$lang->sort_by_started}</option>
					{$ratingsort}
					<option value="replies"{$sortsel['replies']}>{$lang->sort_by_replies}</option>
					<option value="views"{$sortsel['views']}>{$lang->sort_by_views}</option>
				</select></span>
				<span class="select-wrap">
				<select name="order">
					<option value="asc"{$ordersel['asc']}>{$lang->sort_order_asc}</option>
					<option value="desc"{$ordersel['desc']}>{$lang->sort_order_desc}</option>
				</select></span><span class="select-wrap">
				<select name="datecut">
					<option value="1"{$datecutsel['1']}>{$lang->datelimit_1day}</option>
					<option value="5"{$datecutsel['5']}>{$lang->datelimit_5days}</option>
					<option value="10"{$datecutsel['10']}>{$lang->datelimit_10days}</option>
					<option value="20"{$datecutsel['20']}>{$lang->datelimit_20days}</option>
					<option value="50"{$datecutsel['50']}>{$lang->datelimit_50days}</option>
					<option value="75"{$datecutsel['75']}>{$lang->datelimit_75days}</option>
					<option value="100"{$datecutsel['100']}>{$lang->datelimit_100days}</option>
					<option value="365"{$datecutsel['365']}>{$lang->datelimit_lastyear}</option>
					<option value="9999"{$datecutsel['9999']}>{$lang->datelimit_beginning}</option>
				</select></span>
				{$prefixselect}
				{$gobutton}
			</form>
		</td>


 forumdisplay_inlinemoderation Find -  replace with 

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/inline_moderation.js?ver=1818"></script>
		<form action="moderation.php" method="post">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<input type="hidden" name="fid" value="{$fid}" />
<input type="hidden" name="modtype" value="inlinethread" />
<span class="smalltext"><strong>{$lang->inline_thread_moderation}</strong></span>
<span class="select-wrap">			
<select name="action">
	<option value="delayedmoderation">{$lang->delayed_moderation}</option>
	{$standardthreadtools}
	{$customthreadtools}
</select></span>
<input type="submit" class="button" name="go" value="{$lang->inline_go} ({$inlinecount})" id="inline_go" />&nbsp;
<input type="button" onclick="inlineModeration.clearChecked();" value="{$lang->clear}" class="button" />
</form>
<script type="text/javascript">
<!--
	var go_text = "{$lang->inline_go}";
	var all_text = "{$threadcount}";
	var inlineType = "forum";
	var inlineId = {$fid};
// -->
</script>
<br />

showthread_inlinemoderation Find -  replace with 

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/inline_moderation.js?ver=1818"></script>
<form action="moderation.php" method="post" style="margin-top: 0; margin-bottom: 0;" id="inlinemoderation_options">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<input type="hidden" name="tid" value="{$tid}" />
<input type="hidden" name="modtype" value="inlinepost" />
<span class="smalltext"><strong>{$lang->inline_post_moderation}</strong></span>
<span class="select-wrap">
<select name="action" id="inlinemoderation_options_selector">
{$standardposttools}
{$customposttools}
</select></span>
<input type="submit" class="button" name="go" value="{$lang->go} ({$inlinecount})" id="inline_go" />&nbsp;
<input type="button" class="button" onclick="inlineModeration.clearChecked();" value="{$lang->clear}" />
</form>
<script type="text/javascript">
<!--
	var go_text = "{$lang->inline_go}";
	var all_text = "{$threadcount}";
	var inlineType = "thread";
	var inlineId = {$tid};

	$("#inlinemoderation_options_selector").change(function() {
		$("#inlinemoderation_options").submit();
	})
// -->
</script><br />


showthread_moderationoptions Find -  replace with 

{$inlinemod}
<form action="moderation.php" method="post" style="margin-top: 0; margin-bottom: 0;" id="moderator_options">
	<input type="hidden" name="modtype" value="thread" />
	<input type="hidden" name="tid" value="{$tid}" />
	<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
	<span class="smalltext">
	<strong>{$lang->moderation_options}</strong></span>
	<span class="select-wrap">
	<select name="action" id="moderator_options_selector">
		<option value="delayedmoderation">{$lang->delayed_moderation}</option>
		{$standardthreadtools}
		{$customthreadtools}
	</select></span>
	{$gobutton}
</form>
<br />
<script type="text/javascript">
<!--
	$("#moderator_options_selector").change(function() {
		$("#moderator_options").submit();
	})
//-->
</script>

forumjump_advanced  Find -  replace with 

<form action="forumdisplay.php" method="get">
<span class="smalltext"><strong>{$lang->forumjump}</strong></span>
<span class="select-wrap">
<select name="{$name}" class="forumjump">
<option value="-4">{$lang->forumjump_pms}</option>
<option value="-3">{$lang->forumjump_usercp}</option>
<option value="-5">{$lang->forumjump_wol}</option>
<option value="-2">{$lang->forumjump_search}</option>
<option value="-1">{$lang->forumjump_home}</option>
{$forumjumpbits}
</select></span>
{$gobutton}
</form>
<script type="text/javascript">
$(".forumjump").change(function() {
var option = $(this).val();

if(option < 0)
{
window.location = 'forumdisplay.php?fid='+option;
}
else
{
window.location = {$forum_link};
}
});
</script>


memberlist Find  

<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>
			{$referrals_option}
		</select>

 replace with 

<span class="select-wrap">
		<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>
			{$referrals_option}
		</select></span>

Search Find  

<select name="findthreadst">
<option value="1">{$lang->threads_at_least}</option>
<option value="2">{$lang->threads_at_most}</option>
</select> <input type="text" class="textbox" name="numreplies" size="2" maxlength="4" />&nbsp;{$lang->replies2}<br />
<br />
<select name="postdate">
<option value="0">{$lang->find_anydate}</option>
<option value="1">{$lang->find_yesterday}</option>
<option value="7">{$lang->find_lastweek}</option>
<option value="14">{$lang->find_2weeks}</option>
<option value="30">{$lang->find_month}</option>
<option value="90">{$lang->find_3months}</option>
<option value="180">{$lang->find_6months}</option>
<option value="365">{$lang->find_year}</option>
</select>&nbsp;&nbsp; <input type="radio" class="radio" name="pddir" value="1" checked="checked" />{$lang->and_newer}  <input type="radio" class="radio" name="pddir" value="0" />{$lang->and_older}<br />
<br />
{$prefixselect}
</td>
</tr>
<tr>
<td class="tcat"><strong>{$lang->sorting_options}</strong></td>
</tr>
<tr>
<td class="trow1">
<select name="sortby">
<option value="lastpost">{$lang->sort_lastpost}</option>
<option value="starter">{$lang->sort_author}</option>
<option value="forum">{$lang->sort_forum}</option>
</select> 

replace with 

<span class="select-wrap">	
<select name="findthreadst">
<option value="1">{$lang->threads_at_least}</option>
<option value="2">{$lang->threads_at_most}</option>
</select> </span> <input type="text" class="textbox" name="numreplies" size="2" maxlength="4" />&nbsp;{$lang->replies2}<br />
<br /><span class="select-wrap">
<select name="postdate">
<option value="0">{$lang->find_anydate}</option>
<option value="1">{$lang->find_yesterday}</option>
<option value="7">{$lang->find_lastweek}</option>
<option value="14">{$lang->find_2weeks}</option>
<option value="30">{$lang->find_month}</option>
<option value="90">{$lang->find_3months}</option>
<option value="180">{$lang->find_6months}</option>
<option value="365">{$lang->find_year}</option>
</select></span>&nbsp;&nbsp; <input type="radio" class="radio" name="pddir" value="1" checked="checked" />{$lang->and_newer}  <input type="radio" class="radio" name="pddir" value="0" />{$lang->and_older}<br />
<br />
{$prefixselect}
</td>
</tr>
<tr>
<td class="tcat"><strong>{$lang->sorting_options}</strong></td>
</tr>
<tr>
<td class="trow1">
<span class="select-wrap">	
<select name="sortby">
<option value="lastpost">{$lang->sort_lastpost}</option>
<option value="starter">{$lang->sort_author}</option>
<option value="forum">{$lang->sort_forum}</option>
</select> </span>


search_results_posts_inlinemoderation  Find -  replace with 

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/inline_moderation.js?ver=1818"></script>
<form action="moderation.php" method="post" style="margin-top: 0; margin-bottom: 0;">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<input type="hidden" name="tid" value="0" />
<input type="hidden" name="searchid" value="{$sid}" />
<input type="hidden" name="modtype" value="inlinepost" />
<span class="smalltext"><strong>{$lang->inline_post_moderation}</strong></span>
<span class="select-wrap">	
<select name="action">
<optgroup label="{$lang->standard_mod_tools}">
	<option value="multisoftdeleteposts">{$lang->inline_soft_delete_posts}</option>
	<option value="multirestoreposts">{$lang->inline_restore_posts}</option>
	<option value="multideleteposts">{$lang->inline_delete_posts}</option>
	<option value="multimergeposts">{$lang->inline_merge_posts}</option>
	<option value="multisplitposts">{$lang->inline_split_posts}</option>
	<option value="multimoveposts">{$lang->inline_move_posts}</option>
	<option value="multiapproveposts">{$lang->inline_approve_posts}</option>
	<option value="multiunapproveposts">{$lang->inline_unapprove_posts}</option>
</optgroup>
{$customposttools}
</select></span>
<input type="submit" class="button" name="go" value="{$lang->go} ({$inlinecount})" id="inline_go" />&nbsp;
<input type="button" class="button" onclick="inlineModeration.clearChecked();" value="{$lang->clear}" />
<input type="hidden" name="url" value="{$return_url}" />
<input type="hidden" name="inlinetype" value="search" />
</form>
<script type="text/javascript">
<!--
	var go_text = "{$lang->inline_go}";
	var all_text = "{$postcount}";
	var inlineType = "search";
	var inlineId = "{$sid}";
// -->
</script><br />


search_results_threads_inlinemoderation  Find -  replace with 

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/inline_moderation.js?ver=1818"></script>
		<form action="moderation.php" method="post">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<input type="hidden" name="fid" value="0" />
<input type="hidden" name="searchid" value="{$sid}" />
<input type="hidden" name="modtype" value="inlinethread" />
<span class="smalltext"><strong>{$lang->inline_thread_moderation}</strong></span>
<span class="select-wrap">			
<select name="action">
	<optgroup label="{$lang->standard_mod_tools}">
		<option value="multiclosethreads">{$lang->close_threads}</option>
		<option value="multiopenthreads">{$lang->open_threads}</option>
		<option value="multistickthreads">{$lang->stick_threads}</option>
		<option value="multiunstickthreads">{$lang->unstick_threads}</option>
		<option value="multisoftdeletethreads">{$lang->soft_delete_threads}</option>
		<option value="multirestorethreads">{$lang->restore_threads}</option>
		<option value="multideletethreads">{$lang->delete_threads}</option>
		<option value="multimovethreads">{$lang->move_threads}</option>
		<option value="multiapprovethreads">{$lang->approve_threads}</option>
		<option value="multiunapprovethreads">{$lang->unapprove_threads}</option>
	</optgroup>
	{$customthreadtools}
</select></span>
<input type="submit" class="button" name="go" value="{$lang->inline_go} ({$inlinecount})" id="inline_go" />&nbsp;
<input type="button" onclick="inlineModeration.clearChecked();" value="{$lang->clear}" class="button" />
<input type="hidden" name="url" value="{$return_url}" />
<input type="hidden" name="inlinetype" value="search" />
</form>
<script type="text/javascript">
<!--
	var go_text = "{$lang->inline_go}";
	var all_text = "{$threadcount}";
	var inlineType = "search";
	var inlineId = '{$sid}';
// -->
</script>
<br />

search_moderator_options  Find -  replace with 


<tr>
<td class="tcat"><strong>{$lang->mod_options}</strong></td>
</tr>
<tr>
<td class="trow1" valign="top">
<span class="select-wrap">			
<select name="visible">
<option value="">{$lang->display_all}</option>
<option value="1">{$lang->display_only_approved}</option>
<option value="0">{$lang->display_only_unapproved}</option>
<option value="-1">{$lang->display_only_softdeleted}</option>
</select> </span>{$lang->results}
</td>
</tr>

footer_themeselector  Find -  replace with 

<span class="select-wrap">
<select name="{$name}" onchange="MyBB.changeTheme();">
<optgroup label="{$lang->select_theme}">
{$themeselect_option}
</optgroup>
</select></span>

footer_languageselect Find -  replace with 

<div class="language">
<form method="POST" action="{$lang_redirect_url['location']}" id="lang_select">
	{$lang_redirect_url['form_html']}
	<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
	<span class="select-wrap">
	<select name="language" onchange="MyBB.changeLanguage();">
		<optgroup label="{$lang->select_language}">
			{$lang_options}
		</optgroup>
	</select></span>
	{$gobutton}
</form>
</div>

usercp_options  Find -  replace with 


<span class="select-wrap">
	<select name="subscriptionmethod" id="subscriptionmethod">
		<option value="0" {$no_auto_subscribe_selected}>{$lang->no_auto_subscribe}</option>
		<option value="1" {$no_subscribe_selected}>{$lang->no_subscribe}</option>
		<option value="2" {$instant_email_subscribe_selected}>{$lang->instant_email_subscribe}</option>
		<option value="3" {$instant_pm_subscribe_selected}>{$lang->instant_pm_subscribe}</option>
	</select></span>
</td>
</tr>

</table>
</fieldset>
<br />
<fieldset class="trow2">
<legend><strong>{$lang->date_time_options}</strong></legend>
<table cellspacing="0" cellpadding="2">
<tr>
<td><span class="smalltext">{$lang->date_format}</span></td>
</tr>
<tr>
<td>
<span class="select-wrap">	
<select name="dateformat">
<option value="0">{$lang->use_default}</option>
{$date_format_options}
</select></span>
</td>
</tr>
<tr>
<td><span class="smalltext">{$lang->time_format}</span></td>
</tr>
<tr>
<td>
<span class="select-wrap">		
<select name="timeformat">
<option value="0">{$lang->use_default}</option>
{$time_format_options}
</select></span>
</td>
</tr>
<tr>
<td><span class="smalltext">{$lang->time_offset_desc}</span></td>
</tr>
<tr>
<td>{$tzselect}</td>
</tr>
<tr>
<td><span class="smalltext">{$lang->dst_correction}</span></td>
</tr>
<tr>
<td>
	<span class="select-wrap">
	<select name="dstcorrection">
		<option value="2" {$dst_auto_selected}>{$lang->dst_correction_auto}</option>
		<option value="1" {$dst_enabled_selected}>{$lang->dst_correction_enabled}</option>
		<option value="0" {$dst_disabled_selected}>{$lang->dst_correction_disabled}</option>
	</select></span>
</td>
</tr>
</table>
</fieldset>
</td>
<td width="50%" class="trow1" valign="top">
<fieldset class="trow2">
<legend><strong>{$lang->forum_display_options}</strong></legend>
<table cellspacing="0" cellpadding="2">
{$tppselect}
<tr>
<td><span class="smalltext">{$lang->thread_view}</span></td>
</tr>
<tr>
<td>
	<span class="select-wrap">
<select name="daysprune">
<option value="">{$lang->use_default}</option>
<option value="1" {$daysprunesel['1']}>{$lang->thread_view_lastday}</option>
<option value="5" {$daysprunesel['5']}>{$lang->thread_view_5days}</option>
<option value="10" {$daysprunesel['10']}>{$lang->thread_view_10days}</option>
<option value="20" {$daysprunesel['20']}>{$lang->thread_view_20days}</option>
<option value="50" {$daysprunesel['50']}>{$lang->thread_view_50days}</option>
<option value="75" {$daysprunesel['75']}>{$lang->thread_view_75days}</option>
<option value="100" {$daysprunesel['100']}>{$lang->thread_view_100days}</option>
<option value="365" {$daysprunesel['365']}>{$lang->thread_view_year}</option>
<option value="9999" {$daysprunesel['9999']}>{$lang->thread_view_all}</option>
</select></span>
</td>
</tr>
</table>
</fieldset>
<br />
<fieldset class="trow2">
<legend><strong>{$lang->thread_view_options}</strong></legend>
<table cellspacing="0" cellpadding="2">
	<tr>
	<td valign="top" width="1"><input type="checkbox" class="checkbox" name="classicpostbit" id="classicpostbit" value="1" {$classicpostbitcheck} /></td>
	<td><span class="smalltext"><label for="classicpostbit">{$lang->show_classic_postbit}</label></span></td>
	</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="showimages" id="showimages" value="1" {$showimagescheck} /></td>
<td><span class="smalltext"><label for="showimages">{$lang->show_images}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="showvideos" id="showvideos" value="1" {$showvideoscheck} /></td>
<td><span class="smalltext"><label for="showvideos">{$lang->show_videos}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="showsigs" id="showsigs" value="1" {$showsigscheck} /></td>
<td><span class="smalltext"><label for="showsigs">{$lang->show_sigs}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="showavatars" id="showavatars" value="1" {$showavatarscheck} /></td>
<td><span class="smalltext"><label for="showavatars">{$lang->show_avatars}</label></span></td>
</tr>
{$quick_reply}
{$pppselect}
<tr>
<td colspan="2"><span class="smalltext">{$lang->thread_mode}</span></td>
</tr>
<tr>
<td colspan="2"><span class="select-wrap"><select name="threadmode"><option value="">{$lang->use_default}</option><option value="linear" {$threadview['linear']}>{$lang->linear}</option><option value="threaded" {$threadview['threaded']}>{$lang->threaded}</option></select></span>

usercp_options_tppselect  Find -  replace with 

<tr>
<td colspan="2"><span class="smalltext">{$lang->tpp}</span></td>
</tr>
<tr>
<td colspan="2">
<span class="select-wrap">	
<select name="tpp">
<option value="">{$lang->use_default}</option>
{$tppoptions}
</select></span>
</td>
</tr>

usercp_options_language Find -  replace with 

<tr>
<td colspan="2"><span class="smalltext">{$lang->board_language}:</span></td>
</tr>
<tr>
<td colspan="2">
<span class="select-wrap">	
<select name="language">
<option value="">{$lang->use_default}</option>
<option value="0">-----------</option>
{$langoptions}
</select></span>
</td>
</tr>

usercp_options_pppselect  Find -  replace with 

<tr>
<td colspan="2"><span class="smalltext">{$lang->ppp}</span></td>
</tr>
<tr>
<td colspan="2">
<span class="select-wrap">
<select name="ppp">
<option value="">{$lang->use_default}</option>
{$pppoptions}
</select></span>
</td>
</tr>

usercp_options_timezone Find -  replace with 

<span class="select-wrap">
<select name="{$name}" id="{$name}">
{$timezone_option}
</select></span>

usercp_profile_away  Find -  replace with 

<span class="select-wrap">
<select style="width:100px;" name="awayday">
<option value="">&nbsp;</option>
{$returndatesel}
</select></span>
</td>
<td>
<span class="select-wrap">	
<select style="width:100px;" name="awaymonth">
<option value="">&nbsp;</option>
<option value="1" {$returndatemonthsel['1']}>{$lang->month_1}</option>
<option value="2" {$returndatemonthsel['2']}>{$lang->month_2}</option>
<option value="3" {$returndatemonthsel['3']}>{$lang->month_3}</option>
<option value="4" {$returndatemonthsel['4']}>{$lang->month_4}</option>
<option value="5" {$returndatemonthsel['5']}>{$lang->month_5}</option>
<option value="6" {$returndatemonthsel['6']}>{$lang->month_6}</option>
<option value="7" {$returndatemonthsel['7']}>{$lang->month_7}</option>
<option value="8" {$returndatemonthsel['8']}>{$lang->month_8}</option>
<option value="9" {$returndatemonthsel['9']}>{$lang->month_9}</option>
<option value="10" {$returndatemonthsel['10']}>{$lang->month_10}</option>
<option value="11" {$returndatemonthsel['11']}>{$lang->month_11}</option>
<option value="12" {$returndatemonthsel['12']}>{$lang->month_12}</option>
</select></span>

usercp_profile Find -  replace with 


<span class="select-wrap">	
<select name="bday1">
<option value="">&nbsp;</option>
{$bdaydaysel}
</select></span>
</td>
<td>
<span class="select-wrap">	
<select name="bday2">
<option value="">&nbsp;</option>
<option value="1" {$bdaymonthsel['1']}>{$lang->month_1}</option>
<option value="2" {$bdaymonthsel['2']}>{$lang->month_2}</option>
<option value="3" {$bdaymonthsel['3']}>{$lang->month_3}</option>
<option value="4" {$bdaymonthsel['4']}>{$lang->month_4}</option>
<option value="5" {$bdaymonthsel['5']}>{$lang->month_5}</option>
<option value="6" {$bdaymonthsel['6']}>{$lang->month_6}</option>
<option value="7" {$bdaymonthsel['7']}>{$lang->month_7}</option>
<option value="8" {$bdaymonthsel['8']}>{$lang->month_8}</option>
<option value="9" {$bdaymonthsel['9']}>{$lang->month_9}</option>
<option value="10" {$bdaymonthsel['10']}>{$lang->month_10}</option>
<option value="11" {$bdaymonthsel['11']}>{$lang->month_11}</option>
<option value="12" {$bdaymonthsel['12']}>{$lang->month_12}</option>
</select></span>
</td>
<td>
<input type="text" class="textbox" size="4" maxlength="4" name="bday3" value="{$bday['2']}" />
</td>
</tr>
<tr>
<td colspan="3">
<span class="smalltext">{$lang->birthdayprivacy}</span>
</td>
</tr>
<tr>
<td colspan="3">
<span class="select-wrap">		
<select name="birthdayprivacy">
<option value="all"{$allselected}>{$lang->birthdayprivacyall}</option>
<option value="none"{$noneselected}>{$lang->birthdayprivacynone}</option>
<option value="age"{$ageselected}>{$lang->birthdayprivacyage}</option>
</select></span>

usercp_profile_profilefields_multiselect  Find -  replace with 

<span class="select-wrap">
<select name="profile_fields[$field][]" size="{$profilefield['length']}" multiple="multiple">
{$select}
</select></span>

usercp_profile_profilefields_select Find -  replace with 


<span class="select-wrap">
<select name="profile_fields[$field]" size="{$profilefield['length']}">
{$select}
</select></span>


usercp_themeselector Find -  replace with 


<span class="select-wrap">
<select name="{$name}">
<option value="0">{$lang->use_default}</option>
<option value="0">-----------</option>
{$themeselect_option}
</select></span>

calendar Find -  replace with 


<span class="select-wrap">
							<select style="width:100px;" name="month">
							<option value="{$month}">{$monthnames[$month]}</option>
							<option value="{$month}">----------</option>
							<option value="1">{$lang->alt_month_1}</option>
							<option value="2">{$lang->alt_month_2}</option>
							<option value="3">{$lang->alt_month_3}</option>
							<option value="4">{$lang->alt_month_4}</option>
							<option value="5">{$lang->alt_month_5}</option>
							<option value="6">{$lang->alt_month_6}</option>
							<option value="7">{$lang->alt_month_7}</option>
							<option value="8">{$lang->alt_month_8}</option>
							<option value="9">{$lang->alt_month_9}</option>
							<option value="10">{$lang->alt_month_10}</option>
							<option value="11">{$lang->alt_month_11}</option>
							<option value="12">{$lang->alt_month_12}</option>
						</select></span><span class="select-wrap">
						<select style="width:100px;" name="year">
							<option value="{$year}">{$year}</option>
							<option value="{$year}">----------</option>
							{$yearsel}
						</select></span>

private_advanced_search Find -  replace with 


<span class="select-wrap">
			<select name="sort" id="sort">
				<option value="subject">{$lang->sort_by_subject}</option>
				<option value="sender">{$lang->sort_by_sender}</option>
				<option value="dateline" selected="selected">{$lang->sort_by_date}</option>
			</select></span>

private_advanced_search_folders  Find -  replace with 


<span class="select-wrap">
<select multiple="multiple" name="folder[]" id="folder">
<option selected="selected">{$lang->all_folders}</option>
{$foldersearch_folder}
</select></span>

private_archive_folders  Find -  replace with 


<span class="select-wrap">
<select name="exportfolders[]" multiple="multiple">
<option value="all" selected="selected">{$lang->all_folders}</option>
{$folderlist_folder}
</select></span>

private_jump_folders  Find -  replace with 


<span class="select-wrap">
<select name="jumpto">
{$folderjump_folder}
</select></span>

private_move  Find -  replace with 


<input type="hidden" value="{$from_fid}" name="fromfid" />
<span class="select-wrap">
<select name="fid">
{$folderoplist_folder}
</select></span>


modcp_modlogs  Find -  replace with 


 <span class="select-wrap">
							<select name="uid">
									<option value="">{$lang->all_moderators}</option>
									<option value="">----------</option>
									{$user_options}
								</select></span>
							</td>
						</tr>
						<tr>
							<td class="trow1" width="25%"><strong>{$lang->sort_by}</strong></td>
							<td class="trow1" width="75%">
								<span class="select-wrap">
								<select name="sortby">
									<option value="dateline"{$sortbysel['dateline']}>{$lang->date}</option>
									<option value="username"{$sortbysel['username']}>{$lang->username}</option>
									<option value="forum"{$sortbysel['forum']}>{$lang->forum_name}</option>
									<option value="thread"{$sortbysel['thread']}>{$lang->thread_subject}</option>
								</select></span>
								{$lang->in}
								<span class="select-wrap">
								<select name="order">
									<option value="asc"{$ordersel['asc']}>{$lang->asc}</option>
									<option value="desc"{$ordersel['desc']}>{$lang->desc}</option>
								</select></span>

modcp_warninglogs Find -  replace with 


 <span class="select-wrap">
								<select name="filter[sortby]">
									<option value="username"{$sortbysel['username']}>{$lang->username}</option>
									<option value="issuedby"{$sortbysel['issuedby']}>{$lang->issued_by}</option>
									<option value="dateline"{$sortbysel['dateline']}>{$lang->issued_date}</option>
									<option value="expires"{$sortbysel['expires']}>{$lang->expiry_date}</option>
								</select></span>
								{$lang->in}
								 <span class="select-wrap">	 
								<select name="filter[order]">
									<option value="asc"{$ordersel['asc']}>{$lang->asc}</option>
									<option value="desc"{$ordersel['desc']}>{$lang->desc}</option>
								</select></span>

modcp_announcements_edit Find -  replace with 



<span class="select-wrap">
								<select name="starttime_day">
								{$startdateday}
								</select></span>
								&nbsp;
								<span class="select-wrap">	
								<select name="starttime_month">
								{$startdatemonth}
								</select></span>
								&nbsp;
								<input type="text" name="starttime_year" value="{$startdateyear}" size="4" maxlength="4" class="textbox" />
								 - {$lang->time} <input type="text" name="starttime_time" value="{$starttime_time}" size="10" class="textbox" />
							</td>
						</tr>
						<tr>
							<td class="trow1" colspan="1" valign="top" width="25%"><strong>{$lang->end_date}</strong></td>
							<td class="trow1" valign="top"  width="75%">
								<input type="radio" name="endtime_type" value="1"{$end_type_sel['finite']} />
								<span class="select-wrap">
								<select name="endtime_day">
								{$enddateday}
								</select></span>
								&nbsp;
								<span class="select-wrap">	
								<select name="endtime_month">
								{$enddatemonth}
								</select></span>

modcp_announcements_new Find -  replace with


<span class="select-wrap">
								<select name="starttime_day">
								{$startdateday}
								</select></span>
								&nbsp;
								<span class="select-wrap">	
								<select name="starttime_month">
								{$startdatemonth}
								</select></span>
								&nbsp;
								<input type="text" name="starttime_year" value="{$startdateyear}" size="4" maxlength="4" class="textbox" />
								 - {$lang->time} <input type="text" name="starttime_time" value="{$starttime_time}" size="10" class="textbox" />
							</td>
						</tr>
						<tr>
							<td class="trow1" colspan="1" valign="top" width="25%"><strong>{$lang->end_date}</strong></td>
							<td class="trow1" valign="top"  width="75%">
								<input type="radio" name="endtime_type" value="1"{$end_type_sel['finite']} />
								<span class="select-wrap">
								<select name="endtime_day">
								{$enddateday}
								</select></span>
								&nbsp;
								<span class="select-wrap">	
								<select name="endtime_month">
								{$enddatemonth}
								</select></span>

modcp_editprofile_select Find -  replace with


<span class="select-wrap">
<select name="{$select_name}">
	{$selection_options}
</select></span>

modcp_finduser Find -  replace with


	<span class="select-wrap">
								<select name="sortby">
									<option value="username"{$sortbysel['username']}>{$lang->username}</option>
									<option value="regdate"{$sortbysel['regdate']}>{$lang->regdate}</option>
									<option value="lastvisit"{$sortbysel['lastvisit']}>{$lang->lastvisit}</option>
									<option value="postnum"{$sortbysel['postnum']}>{$lang->postnum}</option>
								</select></span>
								{$lang->in}
								<span class="select-wrap">
								<select name="order">
									<option value="asc"{$ordersel['asc']}>{$lang->asc}</option>
									<option value="desc"{$ordersel['desc']}>{$lang->desc}</option>
								</select></span>

modcp_editprofile_select Find -  replace with


<span class="select-wrap">
<select name="{$select_name}">
	{$selection_options}
</select></span>

modcp_editprofile_away  Find -  replace with


</select></span>
</td>
<td>
<span class="select-wrap">	
<select name="awaymonth">
<option value="">&nbsp;</option>
<option value="1" {$returndatemonthsel['1']}>{$lang->month_1}</option>
<option value="2" {$returndatemonthsel['2']}>{$lang->month_2}</option>
<option value="3" {$returndatemonthsel['3']}>{$lang->month_3}</option>
<option value="4" {$returndatemonthsel['4']}>{$lang->month_4}</option>
<option value="5" {$returndatemonthsel['5']}>{$lang->month_5}</option>
<option value="6" {$returndatemonthsel['6']}>{$lang->month_6}</option>
<option value="7" {$returndatemonthsel['7']}>{$lang->month_7}</option>
<option value="8" {$returndatemonthsel['8']}>{$lang->month_8}</option>
<option value="9" {$returndatemonthsel['9']}>{$lang->month_9}</option>
<option value="10" {$returndatemonthsel['10']}>{$lang->month_10}</option>
<option value="11" {$returndatemonthsel['11']}>{$lang->month_11}</option>
<option value="12" {$returndatemonthsel['12']}>{$lang->month_12}</option>
</select></span>

modcp_editprofile Find -  replace with


<span class="select-wrap">
												<select name="birthday_day">
													<option value="">&nbsp;</option>
													{$bdaydaysel}
												</select></span>
											</td>
											<td>
												<span class="select-wrap">
												<select name="birthday_month">
													<option value="">&nbsp;</option>
													<option value="1" {$bdaymonthsel['1']}>{$lang->month_1}</option>
													<option value="2" {$bdaymonthsel['2']}>{$lang->month_2}</option>
													<option value="3" {$bdaymonthsel['3']}>{$lang->month_3}</option>
													<option value="4" {$bdaymonthsel['4']}>{$lang->month_4}</option>
													<option value="5" {$bdaymonthsel['5']}>{$lang->month_5}</option>
													<option value="6" {$bdaymonthsel['6']}>{$lang->month_6}</option>
													<option value="7" {$bdaymonthsel['7']}>{$lang->month_7}</option>
													<option value="8" {$bdaymonthsel['8']}>{$lang->month_8}</option>
													<option value="9" {$bdaymonthsel['9']}>{$lang->month_9}</option>
													<option value="10" {$bdaymonthsel['10']}>{$lang->month_10}</option>
													<option value="11" {$bdaymonthsel['11']}>{$lang->month_11}</option>
													<option value="12" {$bdaymonthsel['12']}>{$lang->month_12}</option>
												</select></span>

finally over

feel happy while using it 

Font Awesome 5 icons Select Style Arrow 


Attached Files Thumbnail(s)
   
Our New Theme Published =  click to download
Find
Reply
Eldenroot Offline

Contributor
Posts: 3,313
Threads: 192
Joined: May 2014
Reputation: 147
#2
2019-02-13, 03:59 PM (This post was last modified: 2019-02-13, 04:00 PM by Eldenroot.)
Great, thank you! So many code changes :-o
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Website Find
Reply
effone Offline

Development
Posts: 4,217
Threads: 120
Joined: May 2012
Reputation: 497
#3
2019-02-13, 04:13 PM (This post was last modified: 2019-02-13, 04:16 PM by effone.)
Sorry, but what does it do?

If its about using custom arrow for select element then this can hide native arrow of select:

select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Then a simple :after pseudo can implement the custom arrow... GLOBALLY

or even if we follow your approach then despite of editing all the templates for select a one line jQuery can wrap all the select elements with the custom class, as you need.
Website Find
Reply
fishntassie Offline
Posts: 140
Threads: 3
Joined: Jul 2007
Reputation: 10
#4
2019-02-14, 03:00 AM
Have to agree with @effone whilst thanks for the tut and i can see some benefits of doing it this way in terms of other customisation there are some negatives in terms of any changes that come in during updates and with plugins etc. for a change that is only to the appearance of the select drop down arrow.

interesting though option though as it would allow for much more customisation of the select menus and useful from that point of view in a project i am working on now thanks for the effort
Coming soon......
Website Find
Reply
Eldenroot Offline

Contributor
Posts: 3,313
Threads: 192
Joined: May 2014
Reputation: 147
#5
2019-02-15, 09:24 AM
I cannot make it working with :after element
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Website Find
Reply
Anka06 Offline
Posts: 53
Threads: 29
Joined: May 2016
Reputation: 31
#6
2019-02-15, 06:24 PM (This post was last modified: 2019-02-15, 06:29 PM by Anka06.)
(2019-02-15, 09:24 AM)Eldenroot Wrote: I cannot make it working with :after element

corrected :before

Works seamlessly with Mozilla and other browsers
Our New Theme Published =  click to download
Find
Reply
Eldenroot Offline

Contributor
Posts: 3,313
Threads: 192
Joined: May 2014
Reputation: 147
#7
2019-02-15, 08:09 PM
CSS complete code for this :before method? Thank you Anka06!
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Website Find
Reply
terzier Offline
Posts: 279
Threads: 53
Joined: Aug 2009
Reputation: 2
#8
2019-02-20, 01:58 PM
is there a demo?
MyBB Indonesia | Facebook Page | Twitter
Bangga Menggunakan MyBB sebagai Forum Core Engine Big Grin
Website Find
Reply
effone Offline

Development
Posts: 4,217
Threads: 120
Joined: May 2012
Reputation: 497
#9
2019-02-20, 03:04 PM
https://codepen.io/surfbird/pen/azeaam
Website Find
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)