The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to design my buttons like this?

Go down

Solved How to design my buttons like this?

Post by mioshi11 on May 25th 2014, 2:18 pm


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
avatar
mioshi11
Forumember

Male Posts : 153
Reputation : 4
Language : english
Location : Philippines

http://lovefx.forumtl.com

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Tommy Lee on May 25th 2014, 2:37 pm

Hello,

They are the default editor options.
avatar
Tommy Lee
Forumember

Posts : 232
Reputation : 7
Language : English

Back to top Go down

Solved Re: How to design my buttons like this?

Post by mioshi11 on May 25th 2014, 2:43 pm

@Tommy Lee wrote:Hello,

They are the default editor options.

Here is the default design of the button..
avatar
mioshi11
Forumember

Male Posts : 153
Reputation : 4
Language : english
Location : Philippines

http://lovefx.forumtl.com

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Tommy Lee on May 25th 2014, 2:46 pm

Hello, 

Could you provide your forum link?
avatar
Tommy Lee
Forumember

Posts : 232
Reputation : 7
Language : English

Back to top Go down

Solved Re: How to design my buttons like this?

Post by mioshi11 on May 25th 2014, 2:59 pm

@Tommy Lee wrote:Hello, 

Could you provide your forum link?
http://speedup.fanbb.net/ here,,,
avatar
mioshi11
Forumember

Male Posts : 153
Reputation : 4
Language : english
Location : Philippines

http://lovefx.forumtl.com

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Tommy Lee on May 25th 2014, 3:09 pm

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

Posts : 232
Reputation : 7
Language : English

Back to top Go down

Solved Re: How to design my buttons like this?

Post by mioshi11 on May 25th 2014, 3:23 pm

@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.. Sad


here is the default design of the buttons...

and i want it to becoame like this...
avatar
mioshi11
Forumember

Male Posts : 153
Reputation : 4
Language : english
Location : Philippines

http://lovefx.forumtl.com

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Tommy Lee on May 25th 2014, 3:28 pm

[removed]


Last edited by Tommy Lee on May 25th 2014, 5:07 pm; edited 1 time in total
avatar
Tommy Lee
Forumember

Posts : 232
Reputation : 7
Language : English

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Rhino.Freak on May 25th 2014, 5:06 pm

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;
}
avatar
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Menos on May 25th 2014, 11:13 pm

This is really interesting!
Do we have a code also for phpBB2?  Very Happy 
avatar
Menos
Forumember

Male Posts : 375
Reputation : 4
Language : Greek, English and Slovak

http://cbrxx.darkbb.com/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Neptune- on May 25th 2014, 11:58 pm

Hello ^_^

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

The code provided also works on phpBB2...
avatar
Neptune-
Forumember

Male Posts : 229
Reputation : 37
Language : French (10), English (8), CSS (5), HTML (4), Javascript (4)
Location : France

https://www.galaxie-series.net/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Menos on May 26th 2014, 2:04 am

I tried it already.. and nothing changed.. :/
avatar
Menos
Forumember

Male Posts : 375
Reputation : 4
Language : Greek, English and Slovak

http://cbrxx.darkbb.com/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Rhino.Freak on May 26th 2014, 6:10 am

@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? Razz upgrade as soon as possible! Very Happy
avatar
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Menos on May 26th 2014, 10:58 am

@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;
}
avatar
Menos
Forumember

Male Posts : 375
Reputation : 4
Language : Greek, English and Slovak

http://cbrxx.darkbb.com/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Rhino.Freak on May 26th 2014, 11:53 am

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?
avatar
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Guest on May 26th 2014, 12:07 pm

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

Guest
Guest


Back to top Go down

Solved Re: How to design my buttons like this?

Post by Menos on May 26th 2014, 12:15 pm

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

Nothing... still the same...  Confused 

@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.
avatar
Menos
Forumember

Male Posts : 375
Reputation : 4
Language : Greek, English and Slovak

http://cbrxx.darkbb.com/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by mioshi11 on May 26th 2014, 2:46 pm

@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...
avatar
mioshi11
Forumember

Male Posts : 153
Reputation : 4
Language : english
Location : Philippines

http://lovefx.forumtl.com

Back to top Go down

Solved Re: How to design my buttons like this?

Post by erchima on May 26th 2014, 2:48 pm

@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;}
avatar
erchima
Forumember

Female Posts : 629
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: How to design my buttons like this?

Post by mioshi11 on May 26th 2014, 2:57 pm

@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?
avatar
mioshi11
Forumember

Male Posts : 153
Reputation : 4
Language : english
Location : Philippines

http://lovefx.forumtl.com

Back to top Go down

Solved Re: How to design my buttons like this?

Post by erchima on May 26th 2014, 2:58 pm

try it
avatar
erchima
Forumember

Female Posts : 629
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: How to design my buttons like this?

Post by mioshi11 on May 26th 2014, 3:00 pm

@erchima wrote:try it
sorry didnt work  Sad
avatar
mioshi11
Forumember

Male Posts : 153
Reputation : 4
Language : english
Location : Philippines

http://lovefx.forumtl.com

Back to top Go down

Solved Re: How to design my buttons like this?

Post by erchima on May 26th 2014, 3:01 pm

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;}
avatar
erchima
Forumember

Female Posts : 629
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Neptune- on May 26th 2014, 3:05 pm

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

Same thing with ipb stuff that is Invision specific.
avatar
Neptune-
Forumember

Male Posts : 229
Reputation : 37
Language : French (10), English (8), CSS (5), HTML (4), Javascript (4)
Location : France

https://www.galaxie-series.net/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Jophy on May 30th 2014, 5:17 am

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

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum