3
I wanted to increase box width to see both emoticons columns, thus eliminating horizontal scroll bar.
[At this point, I received some nice help from Genestoy: http://community.inv...st__p__1865471]
Go ACP>Look & Feel>your_skin>CSS tab>ipb_editor.css
Find and change the margin-right to 300px:
#ipboard_body .ips_editor.with_sidebar .controls,
#ipboard_body .ips_editor.with_sidebar .editor{
margin-right: 200px;
}
Find and change the width to 295px:
#ipboard_body .ips_editor.with_sidebar .sidebar {
position: absolute;
top: 0px;
right: 1px;
width: 195px;
bottom: 1px;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #f6f8fa #d5dde5 #d5dde5 #f6f8fa;
}
Those two numbers, 300px and 295px may not work perfectly for you. It all depends on a skin and emoticons sizes.
You may need to adjust them slightly. Whatever you do, make sure, the first number is always 5px bigger, than the second one.
And if you want to close the little white space next to the word "Emoticons"
Find and add the margin-left line:
#ipboard_body .ips_editor.with_sidebar .sidebar h4 {
background-color: #e4ebf2;
height: 25px;
color: #1d3652;
font-size: 10px;
font-weight: bold;
margin-left: -3px;
}
****************************************************************************************************
IMPORTANT!
Some skins are not written correctly and you may see some issues.
For instance, this is what happened with some of my skins.
After changing the above numbers, reply window will look like this:
1. To remove that gap, in ipb_editor.css find:
#ipboard_body .ips_editor.with_sidebar .sidebar h4 span {
padding: 6px 0 0 6px;
display: block;
}
and add following code below:
#ipboard_body .ips_editor.with_sidebar .sidebar h4 img {
float: right;
margin: 6px 6px 0 0;
cursor: pointer;
}
The above code is missing in some skins.
***************************************
2. In some other skins, the section listed below looks different, so, make sure, it looks like this:
#ipboard_body .ips_editor.with_sidebar .sidebar .emoticon_holder {
width: 100%;
overflow: auto;
position: absolute;
bottom: 25px;
top: 25px;
