How to design my buttons like this?

Hello masters! Good Day! How can i made my editor buttons like this? I am a Invision user

Hello,

They are the default editor options.

@Tommy Lee wrote:Hello,

They are the default editor options.

Here is the default design of the button..

Hello, 

Could you provide your forum link?

@Tommy Lee wrote:Hello, 

Could you provide your forum link?

http://speedup.fanbb.net/ here,,,

I'm sorry but I cannot help because the buttons you want are already the default ones

@Tommy Lee wrote:I'm sorry but I cannot help because the buttons you want are already the default ones

you cant understand what i mean..


here is the default design of the buttons...

and i want it to becoame like this...

[removed]

Tommy Lee : not trying to act like a mod or something, but I think you should refrain from posting unless you are sure to come up with a solution. It confuses the author and the people who are looking for a similar solution

mioshi11 : Try putting this in CSS and modify values according to your liking..

Code:

div.sceditor-group {
background: #eee;
box-shadow: 0px 3px 5px #fff inset;
background-clip: padding-box;
border: 1px solid #bbb;
border-radius: 4px;
}


This is really interesting!
Do we have a code also for phpBB2?   

Hello ^_^

@Menos wrote:This is really interesting!
Do we have a code also for phpBB2?   

The code provided also works on phpBB2...

I tried it already.. and nothing changed.. 

@Menos wrote:I tried it already.. and nothing changed.. 

just try marking !important after everyline.
so it becomes like
div.sceditor-group {
background: #eee !important;
...
...
etc
}

also, now that we have template editing in all forums, why are you using the inferior Phpbb2? upgrade as soon as possible!

@Rhino.Freak wrote:

@Menos wrote:I tried it already.. and nothing changed.. 

just try marking !important after everyline.
so it becomes like
div.sceditor-group {
background: #eee !important;
...
...
etc
}

Nothing changed... am I doing something wrong?

Spoiler:

div.sceditor-group {
background: #eee !important;
box-shadow: 0px 3px 5px #fff inset !important;
background-clip: padding-box !important;
border: 1px solid #bbb !important;
border-radius: 4px !important;
}

hmm IDK, it should be working.. can you gimme a test account on your forum so that I can see it in topics and then provide a working code?

Try putting the code at the very beginning of the CSS, that should work.

@Mark wrote:Try putting the code at the very beginning of the CSS, that should work.

Nothing... still the same...   

@Rhino.Freak wrote:hmm :/IDK, it should be working.. can you gimme a test account on your forum so that I can see it in topics and then provide a working code?

You have a p.m.

@Rhino.Freak wrote:Tommy Lee : not trying to act like a mod or something, but I think you should refrain from posting unless you are sure to come up with a solution. It confuses the author and the people who are looking for a similar solution

mioshi11 : Try putting this in CSS and modify values according to your liking..

Code:

div.sceditor-group {
background: #eee;
box-shadow: 0px 3px 5px #fff inset;
background-clip: padding-box;
border: 1px solid #bbb;
border-radius: 4px;
}


the code works but not really looks like what i want...

@mioshi11 wrote:
Hello masters! Good Day! How can i made my editor buttons like this? I am a Invision user

try with my css

Code:


#pun-qpost .main-content.frm {
background: #EBEDEF;
padding: 9px;}
#pun-qpost .frm-form {
background: #F6F8FA;
border: 1px solid #DCE2EC;}
#pun-qpost .main-head {
font: bold Helvetica, Arial, sans-serif;
font-size: 16px;
background: transparent;
border: 0px;
box-shadow: 0 0px 0px 0 inset;
color: #323232;
text-shadow: 0px 0px 0px;}
.sceditor-container {
background-image: url(http://i.imgur.com/7GgMZdN.png) !important;
background-repeat: repeat-x !important;
background-position: 0 -1950px !important;
padding: 0px 5px 0px 3px !important;
border: 1px solid #E1E3E5 !important;
background-color: #EFF1F3 !important;
border-radius: 0px !important;}
.sceditor-container iframe, .sceditor-container textarea {
min-height:180px;
border-width: 1px !important;
border-style: solid !important;
border-color: #bbb #ddd #ddd #bbb !important;}
.sceditor-toolbar {
background: #fff !important;
border-bottom: 1px solid #E1E3E5 !important;
  float: center !important;}
.sceditor-group {
background: transparent !important;
border-bottom: 0px !important;}
#quick_reply #textarea_content {
clear: both;
margin-left: auto;
margin-right: auto;
width: 95% !important;
height: auto !important;}    
#text_editor_controls {
display: none !important;}
#quick_reply #textarea_content {
clear: both;
margin-left: auto;
margin-right: auto;
width: 95% !important;
height: auto !important;}
#text_editor_controls {
display: none !important;}

@erchima wrote:

@mioshi11 wrote:
Hello masters! Good Day! How can i made my editor buttons like this? I am a Invision user

try with my css

Code:


#pun-qpost .main-content.frm {
background: #EBEDEF;
padding: 9px;}
#pun-qpost .frm-form {
background: #F6F8FA;
border: 1px solid #DCE2EC;}
#pun-qpost .main-head {
font: bold Helvetica, Arial, sans-serif;
font-size: 16px;
background: transparent;
border: 0px;
box-shadow: 0 0px 0px 0 inset;
color: #323232;
text-shadow: 0px 0px 0px;}
.sceditor-container {
background-image: url(http://i.imgur.com/7GgMZdN.png) !important;
background-repeat: repeat-x !important;
background-position: 0 -1950px !important;
padding: 0px 5px 0px 3px !important;
border: 1px solid #E1E3E5 !important;
background-color: #EFF1F3 !important;
border-radius: 0px !important;}
.sceditor-container iframe, .sceditor-container textarea {
min-height:180px;
border-width: 1px !important;
border-style: solid !important;
border-color: #bbb #ddd #ddd #bbb !important;}
.sceditor-toolbar {
background: #fff !important;
border-bottom: 1px solid #E1E3E5 !important;
  float: center !important;}
.sceditor-group {
background: transparent !important;
border-bottom: 0px !important;}
#quick_reply #textarea_content {
clear: both;
margin-left: auto;
margin-right: auto;
width: 95% !important;
height: auto !important;}    
#text_editor_controls {
display: none !important;}
#quick_reply #textarea_content {
clear: both;
margin-left: auto;
margin-right: auto;
width: 95% !important;
height: auto !important;}
#text_editor_controls {
display: none !important;}

Is this working on Invision?

try it

@erchima wrote:try it

sorry didnt work  

where your forum?
try again

Code:


#smilies_categ { display:none !important; }
#pun-qpost .main-content.frm {
background: #EBEDEF;
padding: 9px;}
#pun-qpost .frm-form {
background: #F6F8FA;
border: 1px solid #DCE2EC;}
#pun-qpost .main-head {
font: bold Helvetica, Arial, sans-serif;
font-size: 16px;
background: transparent;
border: 0px;
box-shadow: 0 0px 0px 0 inset;
color: #323232;
text-shadow: 0px 0px 0px;}
.sceditor-container {
background-image: url(http://i.imgur.com/7GgMZdN.png) !important;
background-repeat: repeat-x !important;
background-position: 0 -1950px !important;
padding: 0px 5px 0px 3px !important;
border: 1px solid #E1E3E5 !important;
background-color: #EFF1F3 !important;
border-radius: 0px !important;}
.sceditor-container iframe, .sceditor-container textarea {
min-height:180px;
border-width: 1px !important;
border-style: solid !important;
border-color: #bbb #ddd #ddd #bbb !important;}
.sceditor-toolbar {
background: #fff !important;
border-bottom: 1px solid #E1E3E5 !important;
  float: center !important;}
.sceditor-group {
background: transparent !important;
border-bottom: 0px !important;}
#quick_reply #textarea_content {
clear: both;
margin-left: auto;
margin-right: auto;
width: 95% !important;
height: auto !important;}    
#text_editor_controls {
display: none !important;}
#quick_reply #textarea_content {
clear: both;
margin-left: auto;
margin-right: auto;
width: 95% !important;
height: auto !important;}
#text_editor_controls {
display: none !important;}
/*quick editor*/
body #textarea_content {
 width: 620px!important;
 text-align: initial!important;
 margin-left: -15px!important;}
body #textarea_content .sceditor-group {
box-shadow: 0 1px 0px rgba(255, 255, 255, 0.63) inset;
background: -webkit-linear-gradient(top, #F5F5F5 0%,#E6E6E6 100%);
background: -moz-linear-gradient(top,#f5f5f5,#e6e6e6);
background: -ms-linear-gradient(top,#f5f5f5,#e6e6e6);
background: -o-linear-gradient(top,#f5f5f5,#e6e6e6);
background: linear-gradient(top,#f5f5f5,#e6e6e6);
border: 1px solid #CACACA!important;
padding: 0;
align: center;}
body #textarea_content .sceditor-group a {
 border-right: 1px solid #E0E0E0;
 border-radius: 0!important;
 box-shadow: none!important;}
body #textarea_content .sceditor-group a:hover {
 background: whitesmoke;
 border: 0;
 border-right: 1px solid #E0E0E0;}
body #textarea_content .sceditor-group a:nth-child(4) {
 border-right: none;}
body #textarea_content .sceditor-group a.active {
 box-shadow: 0 1px 0px rgba(255, 255, 255, 0.63) inset; 
 background: -webkit-linear-gradient(top, #E9E9E9 0%,#ECECEC 100%); 
 background: -moz-linear-gradient(top,#e9e9e9,#ececec); 
 background: -ms-linear-gradient(top,#e9e9e9,#ececec); 
 background: -o-linear-gradient(top,#e9e9e9,#ececec); 
 background: linear-gradient(top,#e9e9e9,#ececec);}
body
 .borderwrap.ipbform2 .messaging-box #textarea_content ,body 
form.frm-form[method="post"] #textarea_content ,body #message-box 
#textarea_content {
width: 100%!important;} 
body 
#message-box #textarea_content .sceditor-group:nth-child(1) 
a:nth-child(4), body #message-box #textarea_content 
.sceditor-group:nth-child(2) a:nth-child(4) ,body #message-box 
#textarea_content .sceditor-group:nth-child(9) a:nth-child(4) ,body 
#message-box #textarea_content .sceditor-group:nth-child(8) 
a:nth-child(2) ,body #message-box #textarea_content 
.sceditor-group:nth-child(7) a:nth-child(1) ,body #message-box 
#textarea_content .sceditor-group:nth-child(6) a:nth-child(4) ,body 
#message-box #textarea_content .sceditor-group:nth-child(5) 
a:nth-child(6) ,body #message-box #textarea_content 
.sceditor-group:nth-child(4) a:nth-child(5) ,body #message-box 
#textarea_content .sceditor-group:nth-child(3) a:nth-child(3) {
 border-right: 0;}
.goog-te-gadget-simple img {
display: none;}
/*Smilies erchima*/
#smiley-box iframe {
border: none;
height: 157px;
overflow: auto;
width: 100%;}
#smiley-box {
width: 870px;
height:160px;
margin-left: 227px;
border: 1px solid #DCDCDC !important;
opacity: 1px;}
#sceditor_smilies{background-color:#f7f7f7}#sce_smilies_body{background-color:#ebf0f3;background-image:none;min-width:1px!important}
div.sceditor-toolbar{
  -moz-background-clip:padding;
  -moz-border-radius:3px 3px 0 0;
  -moz-user-select:none;
  -ms-user-select:none;
  -webkit-background-clip:padding-box;
  -webkit-border-radius:3px 3px 0 0;
  -webkit-user-select:none;
  background:#f7f7f7;
  background-clip:padding-box;}

#pun-identifier or .pun-classnames will work only with punBB.

Same thing with ipb stuff that is Invision specific.

Since this topic was marked solved, topic is moved to archives.