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?

View previous topic View next topic Go down

Solved How to design my buttons like this?

Post by mioshi11 on Sun 25 May 2014, 14:18


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


Last edited by mioshi11 on Thu 29 May 2014, 10:43; edited 2 times in total

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 Sun 25 May 2014, 14:37

Hello,

They are the default editor options.

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 Sun 25 May 2014, 14:43

@Tommy Lee wrote:Hello,

They are the default editor options.

Here is the default design of the button..

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 Sun 25 May 2014, 14:46

Hello,

Could you provide your forum link?

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 Sun 25 May 2014, 14:59

@Tommy Lee wrote:Hello,

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

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 Sun 25 May 2014, 15:09

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

Back to top Go down

Solved Re: How to design my buttons like this?

Post by mioshi11 on Sun 25 May 2014, 15:23

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

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 Sun 25 May 2014, 15:28

[removed]


Last edited by Tommy Lee on Sun 25 May 2014, 17:07; edited 1 time in total

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 Sun 25 May 2014, 17:06

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;
}

Rhino.Freak
Helper
Helper

Male Posts : 1246
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 Sun 25 May 2014, 23:13

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

Menos
Forumember

Male Posts : 373
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 Sun 25 May 2014, 23:58

Hello ^_^

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

The code provided also works on phpBB2...

Neptune-
Forumember

Male Posts : 187
Reputation : 21
Language : French (10), English (8), CSS (5), HTML (4), Javascript (1)
Location : France

http://www.planet-series.com/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Menos on Mon 26 May 2014, 02:04

I tried it already.. and nothing changed..:/

Menos
Forumember

Male Posts : 373
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 Mon 26 May 2014, 06:10

@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

Rhino.Freak
Helper
Helper

Male Posts : 1246
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 Mon 26 May 2014, 10:58

@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;
}

Menos
Forumember

Male Posts : 373
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 Mon 26 May 2014, 11:53

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?

Rhino.Freak
Helper
Helper

Male Posts : 1246
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 @Mark on Mon 26 May 2014, 12:07

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

@Mark
Forumember

Male Posts : 187
Reputation : 37
Language : HTML | CSS | Javascript | C | Java
Location : Republic of the Philippines

http://help.forumotion.com/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Menos on Mon 26 May 2014, 12:15

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

Menos
Forumember

Male Posts : 373
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 Mon 26 May 2014, 14:46

@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
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 Mon 26 May 2014, 14:48

@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
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 Mon 26 May 2014, 14:57

@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?

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 Mon 26 May 2014, 14:58

try it

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 Mon 26 May 2014, 15:00

@erchima wrote:try it
sorry didnt workSad

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 Mon 26 May 2014, 15:01

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;}

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 Mon 26 May 2014, 15:05

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

Same thing with ipb stuff that is Invision specific.

Neptune-
Forumember

Male Posts : 187
Reputation : 21
Language : French (10), English (8), CSS (5), HTML (4), Javascript (1)
Location : France

http://www.planet-series.com/

Back to top Go down

Solved Re: How to design my buttons like this?

Post by Jophy on Fri 30 May 2014, 05:17

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

Jophy
ForumGuru

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

Back to top Go down

View previous topic View next topic Back to top


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