MyBB Community Forums

Here prefix box occupy 2 lines, and the selection width is too large.


Here the little windows occupy many rows instead of 1 row only.


I'm doing various attempts without fixing it.
Here is where I'm editing:

select {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    width: 200px; 
	height: 100%;
    position: relative;
    z-index: 999;
    background: #202020;
    color: #a0a0a0;
    border: 1px solid #303030;
	border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
	
}
.selectWrapper {
	margin-top: 3px;
	margin-bottom: 3px;
    position: relative;
    width: 200px; 
	height: 25px;
}



.customSelectCont {
    background: #202020;
    color: #a0a0a0;
    border: 1px solid #303030;
	border-radius: 3px;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px; 
	height: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-sizing: border-box;
    padding: 6px 6px 0; 
    text-align: left;
    font-size: 11px;
}

.customSelectCont:after {
    font-family: 'FontAwesome';
    content: "\f0d7";
    color: #fff;
    position: absolute;
    right: 2px;
    top: 2px;
    width: 20px;
	height: 100%;
    padding: 4px 0 0;
    background: #0068AF;
	border-radius: 3px;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-sizing: border-box;
}

But since the theme has too many select properties I think something else should be changed too and it consude me.
I hope Vintagedaddyo fix this issue. 

(2019-07-29, 11:16 AM)Løque Wrote: [ -> ]Here prefix box occupy 2 lines, and the selection width is too large.


Here the little windows occupy many rows instead of 1 row only.

First question: you assume they are not as intended and on that you are incorrect. One is the select for prefix and the other is subject input and was intented to be done as the picture displays.

Second question: again the selects are intended to be exactly like that and have been for a good while as at one point I had considered on possibly making the theme scalable and responsive in the future ( thus selects were large for eventual fingering, lol ) and the selects were intended as displayed. Also at the time of adding the larger selects I was primarily using a touchscreen comp, touchscreen mobile phone and touchscreen mobile tablet for cerulean and cerise project.

The theme in general is great, that's why I'm installed it on my forum!
How can I make these elements like the default theme?

I found this also, always for select element:

(2019-07-30, 10:36 AM)Løque Wrote: [ -> ]The theme in general is great, that's why I'm installed it on my forum!
How can I make these elements like the default theme?

I found this also, always for select element:

I assume what you mean is this:



Aah yes, I see what you are saying, yes the select is still there if you click the area it displays, but yes, you are correct, that needs fixing to display before click..., thank you for pointing that out:

In  jscripts/sceditor/themes/buttons-dark.css

Find:

div.sceditor-dropdown select {
  background-color: #000;
  color: #aaa;
}

Replace with:

div.sceditor-dropdown select {
  background-color: #000;
  color: #aaa;
  opacity: 9 !important;
}

now your theme to use the dark-buttons editor again...


oh something else I just noticed could use some changes to it:

Again in  jscripts/sceditor/themes/buttons-dark.css

Find:

.sceditor-button div {
  margin: 2px 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  color: transparent;
}

change to:

.sceditor-button div {
  margin: -14px 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  color: transparent;
}

Find:

.ie6 .sceditor-button div {
  margin: 5px;
}
.ie7 .sceditor-button div {
  margin: 5px 0;
}

Change to:

.ie6 .sceditor-button div {
  margin: -17px;
}
.ie7 .sceditor-button div {
  margin: -17px 0;
}

In cerulean templates fine ungrouped templates > codebuttons

replace with:

<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/themes/{$theme['editortheme']}" type="text/css" media="all" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/jquery.sceditor.bbcode.min.js?ver=1821"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/bbcodes_sceditor.js?ver=1821"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/plugins/undo.js?ver=1821"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/icons/monocons.js?ver=1821"></script>
<script type="text/javascript">
var partialmode = {$mybb->settings['partialmode']},
opt_editor = {
	plugins: "undo",
	format: "bbcode",
    icons: "monocons",	
	bbcodeTrim: true,
	style: "{$mybb->asset_url}/jscripts/sceditor/styles/jquery.sceditor.{$theme['editortheme']}?ver=1821",
	rtl: {$lang->settings['rtl']},
	locale: "mybblang",
	width: "100%",
	enablePasteFiltering: true,
	autoUpdate: true,
	emoticonsEnabled: {$emoticons_enabled},
	emoticons: {
		// Emoticons to be included in the dropdown
		dropdown: {
			{$dropdownsmilies}
		},
		// Emoticons to be included in the more section
		more: {
			{$moresmilies}
		},
		// Emoticons that are not shown in the dropdown but will still be converted. Can be used for things like aliases
		hidden: {
			{$hiddensmilies}
		}
	},
	emoticonsCompat: true,
	toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source",
};
{$editor_language}
$(function() {
	$("#{$bind}").sceditor(opt_editor);

	MyBBEditor = $("#{$bind}").sceditor("instance");
	{$sourcemode}
});
</script>

*** if this seems complicated you can simply download https://community.mybb.com/mods.php?acti...5&bid=4038 with the aforementioned changes applied.

---

On your previous question: I assume what you are desiring is like so?



if so, that is fairly easy to do but will not be part of the released theme and can be done diy specific to your usage by say modifying the selectwrapper removing existing width, say setting min width and display for example inline flex or whatever suites your famcy