Combining Css With Text editor

Combining Css With Text editor

i want to combine :

Code:

  input.input-text, input.password, textarea {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  -moz-border-radius-bottomleft:2px;
  -moz-border-radius-bottomright:2px;
  -moz-border-radius-topleft:2px;
  -moz-border-radius-topright:2px;
  -x-system-font:none;
  background-attachment:scroll;
  background-color:#FFFFFF;
  background-image:url(http://zurb.com/images/forms/input-bg.png);
  background-position:0 0;
  background-repeat:no-repeat;
  border-bottom-color:#BBBBBB;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color-ltr-source:physical;
  border-left-color-rtl-source:physical;
  border-left-color-value:#BBBBBB;
  border-left-style-ltr-source:physical;
  border-left-style-rtl-source:physical;
  border-left-style-value:solid;
  border-left-width-ltr-source:physical;
  border-left-width-rtl-source:physical;
  border-left-width-value:1px;
  border-right-color-ltr-source:physical;
  border-right-color-rtl-source:physical;
  border-right-color-value:#BBBBBB;
  border-right-style-ltr-source:physical;
  border-right-style-rtl-source:physical;
  border-right-style-value:solid;
  border-right-width-ltr-source:physical;
  border-right-width-rtl-source:physical;
  border-right-width-value:1px;
  border-top-color:#BBBBBB;
  border-top-style:solid;
  border-top-width:1px;
  color:#777777;
  display:block;
  font-family:Helvetica Neue,"Arial",Helvetica,Verdana,sans-serif;
  font-size:13px;
  font-size-adjust:none;
  font-stretch:normal;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  line-height:18px;
  margin-bottom:10px;
  margin-left:0;
  margin-right:0;
  margin-top:0;
  padding-bottom:3px;
  padding-left:5px;
  padding-right:5px;
  padding-top:3px;
  text-shadow:0 0 1px #FFFFFF;
  }
 
  input[type="text"], input[type="password"] {
  color:#777777;
  display:inline;
  font-family:Arial,sans-serif;
  font-size:18px;
  line-height:1.2;
  outline-color:-moz-use-text-color;
  outline-style:none;
  outline-width:medium;
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
  padding-top:5px;
  }
 
  form input.input-text:focus, form textarea:focus {
  border-bottom-color:#2DAEBF;
  border-bottom-style:solid;
  border-bottom-width:2px;
  border-left-color-ltr-source:physical;
  border-left-color-rtl-source:physical;
  border-left-color-value:#2DAEBF;
  border-left-style-ltr-source:physical;
  border-left-style-rtl-source:physical;
  border-left-style-value:solid;
  border-left-width-ltr-source:physical;
  border-left-width-rtl-source:physical;
  border-left-width-value:2px;
  border-right-color-ltr-source:physical;
  border-right-color-rtl-source:physical;
  border-right-color-value:#2DAEBF;
  border-right-style-ltr-source:physical;
  border-right-style-rtl-source:physical;
  border-right-style-value:solid;
  border-right-width-ltr-source:physical;
  border-right-width-rtl-source:physical;
  border-right-width-value:2px;
  border-top-color:#2DAEBF;
  border-top-style:solid;
  border-top-width:2px;
  color:#333333;
  padding-bottom:2px;
  padding-left:4px;
  padding-right:4px;
  padding-top:2px;
  }

with my Text editor in my forum , if you require access to the posting page , just go here :

http://kmlforumhl.forumotion.net/test-forum-for-my-help-f6/

guest can post messages there

Bump :|

i tried this on help forumotion (firebug ) , but it didnt work on my forum T_T
could someone please help O_O

this is the code i tried on help forumotion :

Code:

#text_editor_textarea, #text_editor_iframe {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-topleft:2px;
-moz-border-radius-topright:2px;
background-attachment:scroll;
background-color:#FFFFFF;
background-image:url(http://zurb.com/images/forms/input-bg.png);
background-position:0 0;
background-repeat:no-repeat;
border-bottom-color:#BBBBBB;
border-bottom-style:solid;
border-bottom-width:1px;
border-top-color:#BBBBBB;
border-top-style:solid;
border-top-width:1px;
color:#777777;
display:block;
font-family:Helvetica Neue,"Arial",Helvetica,Verdana,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:18px;
margin-bottom:10px;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
padding-top:3px;
text-shadow:0 0 1px #FFFFFF;
}
#text_editor_iframe:focus {
border-bottom-color:#2DAEBF;
border-bottom-style:solid;
border-bottom-width:2px;
border-top-color:#2DAEBF;
border-top-style:solid;
border-top-width:2px;
color:#333333;
display:block !important;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
padding-top:2px;
}


i tried the code and i dont see any difference at all.
what is this supposed to be doing? i looks as if you will have to add or adjust the options in the code. but i dont know what it's supposed to be doing or what your trying to do. please explain more.

O-o i didnt know that i double posted ( forgot it must be 24 hours instead of yesterday :| )

https://i.servimg.com/u/f62/13/82/12/40/oo10.jpg

then im really sorry :O

i want the code , to highlight when pressed the text editor , and also have some inner shadow ,

here is the original page : http://www.zurb.com/blog_uploads/0000/0473/iPhonePasswords.html

Hope that helps

--kml-- wrote:O-o i didnt know that i double posted ( forgot it must be 24 hours instead of yesterday :| )

https://i.servimg.com/u/f62/13/82/12/40/oo10.jpg

OK my bad i dint notice the am and pm. when i seen it just said both today.
I'll be more observant next time..

Yeah kml you are really throwing me for a loop on this one. i am all confused that link is going to something for the ipod. is this forumotion support or something for the ipod what dose the ipod masked pass thing even have to do with this? unless your using a ipod to get someones forum or your forum.

so i am really not sure? i am not the best when it comes to css i just know some basics right now but am learning a lil by lil every day:)

So i would just wait for someone that knows css better then my self. there are a lot of members and staff members that are very good at it here. so i am sure if they know and can help they will.

Info added

Oh i think i know what your asking now. you dont need any special css for that
all you have to do is past what ever code your using then click on the the switch editor mode. then all that stuff will come up in the colors like in that example link above..

try it here. copy the code and then put it in the post reply.
then right above next to where it says close tags.. you will see the A/A (Switch editor mode)
click on that and you will see all the colors in the code
Oh by the way this code below is only the code that was in your preview link for the ipod thing.. what ever you dont try that code below in your css.... lol it wont work anyway
it's only the code for what ever they where talking about over there for the ipod?
i only grabbed that from there to give you the example here

Code:

// Behavior Class for Awesome Passwords
var AwesomePassword = Behavior.create({

password_string : null,
password_field_id : null,
password_length : null,

initialize : function (config) {
this.password_string = "";
this.password_length = 0;
this.password_field_id = config['password_field_id'];
this.password_field = $(this.password_field_id);
this.hidden_password_field = $(config['hidden_password']);
},

onblur : function(e) {
this.password_string = "";
this.password_length = "";
},

onkeyup : function(e) {
if(e.which == [img]http://2img.net/i/fa/i/smiles/icon_cool.gif[/img] {
this.password_string = this.password_string.substr(0,this.password_field.value.length);
}
},

onkeypress : function(e) {
var source = Event.element(e);
if ( source.id == this.password_field_id) this._awesomeify_password(source,e);
},
_awesomeify_password : function(source,e) {
// Mask Field With Bullets
var bullet_string = "";

// Loop through and add bullets
for( i = 0; i < this.password_field.value.length; i ) {
bullet_string = String.fromCharCode(8226);
}

// Fill bullets
this.password_field.value = bullet_string;

// If valid Password Character Update Password String
if( String.fromCharCode(e.which).match(/[a-zA-Z0-9!-)]/) && String.fromCharCode(e.which).match(/[a-zA-Z0-9!-)]/).first ) {
this.password_string = String.fromCharCode(e.which);

var password_field = this.password_field;
// Wait for user to stop typeing
setTimeout(function() {
setTimeout(function() {
password_field.value = password_field.value.replace(/.$/,String.fromCharCode(8226));
}, 500);
},1000);
}
},
onsubmit : function(e) {
this.hidden_password_field.value = this.password_string;
return true;
}
});


screen shot and on the keft hand side the pink double A's is the switch mode.
So i hope thats what you meant.. if not then we'll have to leave it to a css pro

Hello,

I think this code works properly on your forum. You just need to deactivate the visual editor mode by clicking A/A button on the top right corner.

but theres a problem , when i click A/A it becomes like unusuall i cant select and delete text at once , like something wrong :S

and by the way kirk , you're reallly getting off the track , i didnt ask for password or something >:0

i just want to ask , when i click the place to type , the borders will be highlited , i got the idea from that page , i dont want the iphone masking thingy , i just want the layout . And im sorry that i didnt explained it detailed ( i'll try to find a place to use your code thx )

and if you get it , why is my warning level decreased

what i meant about the unusual is , like now if i want to delete this text , i highlight it using my mouse and press backspace , but when i add that css , i highlight and when i press backspace , nothing happens , it only delete 1 word a time , and some disfunctionality

something is weird here O_O

Spoiler:

oh i dont know what you mean then.
You will have to wait for someone that knows css better then myself.
And as far as that code.i just told you right up there that i used it as an example and the code was not meant to be used anywhere.

so i guess where both a lil off track.. but i do not understand what it is your asking.. so I'll make a couple pm and see if they can help you figure it out.
i thought you where just asking how to get the color in the code to highlight them.

Oh and i never gave you a warning for that. when i give warnings i always send a pm to the member i gave it to and the thread it was in.

=0 what i meant is ,

like this quick reply box , when i click this , the border will become from grey to blue right? but in my forum , its nothing .

so , i wanna have that kind of effect too , but using that css code in the 2nd post , the iphone thingy , is a tutorial , but i dont want it, as you can see , there is like a box for an example of the tutorial , if i click the box , it will have a bright blue thing , iwant that , to be putted on my quick reply and also (long reply? ) XD

now , if you still dont get what i meant , try download firebug . here is the fullstep for it :

Spoiler:

It seems a very small thing. I don't know why you have written such a ling CSS code for that.
Try using this code...

Code:

#text_editor_textarea:focus {
border : 1px solid red;
}

i used a long code for that because , i also want an inner shadow like in the original page form . O_o

which is (http://zurb.com/images/forms/input-bg.png)

your code works , but i want it to be like in the original page ( Big blue border ) :O
and how to make this also works when A/A is selected? :O

and if you wanna expeirment something you can visit here : http://kmlforumhl.forumotion.net/test-forum-for-my-help-f6/test-t123.htm

Guest Can post something there to experiment

Hope you can help

The background effect can be achieved by this...

Code:

#text_editor_textarea , #text_editor_iframe {
background-image : url(http://www.zurb.com/images/forms/input-bg.png);
border : 1px solid #ccc;
-moz-border-radius : 5px;
padding : 5px;
}
#text_editor_textarea:focus {
border : 1px solid blue;
background-image : none;
}

However, it won't work perfectly on A/A activated :S

ahhh , it worked O_O

but why doesnt it works on A/A

Edit :
try pasting that code in help forumotion css ( firebug )

it worked , but in my forum it only worked when A/A is not selected
do i need to edit something in my template? O_o

Edit Edit : my bad XD , they worked ( help forumotion and my forum ), just the focus wont work , but still , i wonder why

When you activate the A/A function, it loads an iframe which is powered by JavaScript and iframes doesn't support the :focus pseudo class so its not possible to apply border on focus event.

Hope I made it clear.

=0 you did , so , thankyou anki , kirk and too all the the people who helped in this thread

- thread solved