Change the design by setting up CSS


(1)Click the setting button on the upper right of the management page.


(2)Click [Chat]>[Design]>[Original CSS]


(3)In the blank space "Enter original CSS", enter codes for design change and click [Update].

When adding up new codes, do not delete the existing codes and add to that.

Code for design change

Change height of the chat window

※By changing the numbers in red, you can change the height of the chat window.
 
■Mini theme

#chatplusview.chatplusview-mini #outline #chatpluscontent #body #messages{height:330px;}

■Basic theme

#chatplusview.chatplusview-basic #outline #chatpluscontent #body #messages{height:330px;}

■App theme

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages, #chatplusview.chatplusview-app #outline #chatpluscontent #body.frame #messages {height:330px;}

■Modern theme

#chatplusview.chatplusview-modern{height:500px;}

 

Change width of the chat stand-by

※By changing the numbers in red, you can change width of the chat.

#chatplusview.chatplusview-basic.closed #outline,
#chatplusview.chatplusview-app.closed #outline,
#chatplusview.chatplusview-mini.closed #outline{
position:absolute;
right:0;
bottom:0;
width:200px;
}

 

Change position of the chat window

※If you write these, you can display chat window on the left side of the screen.

#chatplusview{
left:0px;
}

 

Change height of the text area

※This changes height of the text area where users can type messages.
 By changing numbers in red, you can change height of the text area.

#chatplusview.chatplusview-basic #outline #chatpluscontent #textarea #message-wrapper textarea,
#chatplusview.chatplusview-basic #outline #chatpluscontent #textarea #message-wrapper.has-operate textarea,
#chatplusview.chatplusview-app #outline #chatpluscontent #textarea #message-wrapper textarea,
#chatplusview.chatplusview-app #outline #chatpluscontent #textarea #message-wrapper.has-operate textarea,
#chatplusview.chatplusview-mini #outline #chatpluscontent #textarea #message-wrapper textarea,
#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #message-wrapper textarea {
height: 150px;
max-height: 150px;
}
If you want to change height of the text area using other than modern theme, leave the check box "only one sentence in text area", from [Chat]>[Menu] empty.

 

Change the chat window icon

※By changing Unicode in red, you can change the chat window icon.

Unicode for icons, please refer to this page: https://fontawesome.com/icons
(Go to page with icons you want to use and copy the unicode)

■Minimize window button

#chatplusheader .operate .button-close i::before {content: "f146";}

■End chat button

#chatplusheader .operate .button-remove i::before {content: "f00d";}

■Smartphone version: Display all windows button

#chatplusheader .operate .button-expand i::before {content: "f424";}

■Smartphone version: Minimize window button

#chatplusheader .operate .button-compress i::before {content: "f422";}

 

Eye・Catcher to be transparent

#eye_catcher:hover {
opacity: 0.6;
}

 

Change font

※As an example, this code below shows how to change font to 「游明朝」

#chatplusview div, #chatplusview span, #chatplusview applet,
#chatplusview object, #chatplusview iframe, #chatplusview h1,
#chatplusview h2, #chatplusview h3, #chatplusview h4, #chatplusview h5,
#chatplusview h6, #chatplusview p, #chatplusview blockquote,
#chatplusview pre, #chatplusview a, #chatplusview abbr, #chatplusview
acronym, #chatplusview address, #chatplusview big, #chatplusview cite,
#chatplusview code, #chatplusview del, #chatplusview dfn, #chatplusview
em, #chatplusview font, #chatplusview ins, #chatplusview kbd,
#chatplusview q, #chatplusview s, #chatplusview samp, #chatplusview
small, #chatplusview strike, #chatplusview strong, #chatplusview sub,
#chatplusview sup, #chatplusview tt, #chatplusview var, #chatplusview
dl, #chatplusview dt, #chatplusview dd, #chatplusview ol, #chatplusview
ul, #chatplusview li, #chatplusview fieldset, #chatplusview form,
#chatplusview label, #chatplusview legend, #chatplusview table,
#chatplusview caption, #chatplusview tbody, #chatplusview tfoot,
#chatplusview thead, #chatplusview tr, #chatplusview th, #chatplusview
td, #chatplusview input, #chatplusview textarea {font-family: "游明朝",
serif;}
For more information about font change, please refer to 「Use Google fonts within Chat window」.

 

Change font size of the message

※By changing numbers in red, you can change the font size.
 
■Mini theme

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages
.msg .text {font-size: 14px;

■Basic theme

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages
.msg .text {font-size: 14px;

■App theme

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages
.msg .text {font-size: 14px;

■Modern theme

#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages
.msg .text {font-size: 14px;

 

For more information about adding animation to the Eye・Catcher, please refer to 『Setting up animations to Eye・Catcher with original CSS』.

シェアする

フォローする

  • RSSを