Text box and smiley box

hello   

I just get an idea about the layout, I hope someone can make it realized.

This is the default view in my forum posts;






and I want to change it to be like this (i'm using photoshop   )






Can I make it like that? can anybody help me?  

Hello kumotta,

You should probably by able to adjust the smiley box size by this CSS :

Code:

#smiley-box { width:30%; }
.posting-block { margin-left:-15%; }

You would need to decrease the left margin on the post block so the smiley box will not go to the next line. You may need to adjust the values above for your forum.

hello,

how to make title box same width to the text box? and one more, can i removed box of view more emoticon? thank you~  

Use this CSS to hide the smiles catgeory :

Code:

#smilies_categ { display:none; }

Use this CSS to adjust the title position and size :

Code:

fieldset.frm-set.multi dl dd.frm-input { margin-left:0; }

still less fit   

I want to look like this;

Add to the left margin by percent or pixel, and adjust the input field width also :

Code:

fieldset.frm-set.multi dl dd.frm-input {
    margin-left:3%;
    width:50%;
}

okay, all look fine now   
but, please one more problem   
how to add title box emoticon in here?

Go to Administration panel > display > templates > post and private messages > posting_body

Find :

Code:

<div id="smiley-box">
 <div id="smileyContainer">
 {L_SMILIES_PREVIEW_NEW}
 </div>
 </div>

Replace by :

Code:

<div id="smiley-box">
                        <div id="emoj_head">Emoticon</div>
 <div id="smileyContainer">
 {L_SMILIES_PREVIEW_NEW}
 </div>
 </div>

Save and publish.

Then add CSS to customize :
Display > Colors > CSS stylesheet

Code:

#emoj_head {
    color:#0AC;
    font-size:16px;
    text-align:center;
    border:1px solid #CCC;
    padding:3px;
}

hello ange,

this part, i have little problem  
Can you tell me the code to set the height post box and move the reason box?  thank you  

Use this CSS to adjust the SCEditor height :

Code:

.frm-textarea .sceditor-container { height:250px !important; }


Use this CSS to move the reason for editing :

Code:

div#textarea_content.posting-block br + dl { margin-left:10%; }

i think to this topic is solved, thanks ange  

You're welcome

Topic solved and archived