How to design my buttons like this?
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1 • Share •
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
Last edited by mioshi11 on May 29th 2014, 10:43 am; edited 2 times in total
Re: How to design my buttons like this?
Hello,
They are the default editor options.
They are the default editor options.
Tommy Lee- Forumember
- Posts : 232
Reputation : 7
Language : English
Re: How to design my buttons like this?
Hello,
Could you provide your forum link?
Could you provide your forum link?
Tommy Lee- Forumember
- Posts : 232
Reputation : 7
Language : English
Re: How to design my buttons like this?
I'm sorry but I cannot help because the buttons you want are already the default ones
Tommy Lee- Forumember
- Posts : 232
Reputation : 7
Language : English
Re: How to design my buttons like this?
you cant understand what i mean..@Tommy Lee wrote:I'm sorry but I cannot help because the buttons you want are already the default ones


here is the default design of the buttons...
and i want it to becoame like this...

Re: How to design my buttons like this?
[removed]
Last edited by Tommy Lee on May 25th 2014, 5:07 pm; edited 1 time in total
Tommy Lee- Forumember
- Posts : 232
Reputation : 7
Language : English
Re: How to design my buttons like this?
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..
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;
}
Re: How to design my buttons like this?
This is really interesting!
Do we have a code also for phpBB2?
Do we have a code also for phpBB2?

Re: How to design my buttons like this?
@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?


Re: How to design my buttons like this?
Nothing changed... am I doing something wrong?@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
}
- 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;
}
Re: How to design my buttons like this?
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?

Re: How to design my buttons like this?
Try putting the code at the very beginning of the CSS, that should work.
Guest- Guest
Re: How to design my buttons like this?
@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.
Re: How to design my buttons like this?
the code works but not really looks like what i want...@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;
}

Re: How to design my buttons like this?
try with my css@mioshi11 wrote:
Hello masters! Good Day! How can i made my editor buttons like this? I am a Invision user
- 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;}
Re: How to design my buttons like this?
Is this working on Invision?@erchima wrote:try with my css@mioshi11 wrote:
Hello masters! Good Day! How can i made my editor buttons like this? I am a Invision user
- 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;}
Re: How to design my buttons like this?
where your forum?
try again
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;}
Re: How to design my buttons like this?
#pun-identifier or .pun-classnames will work only with punBB.
Same thing with ipb stuff that is Invision specific.
Same thing with ipb stuff that is Invision specific.
Re: How to design my buttons like this?
Since this topic was marked solved, topic is moved to archives.
Jophy- ForumGuru
-
Posts : 17924
Reputation : 835
Language : English
Location : Somewhere
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum