Get Free Bonuses

*Name:
*Your Email Address:

Paypal - CC - Payment

Payment

Shopping Cart

Your cart is empty
LiveZilla Live Help
CLICK HERE TO SIGNUP WITH MY FAVOURITE HOST.
Blog
Comments

Login



newsletter-free-subscribe-banner
Home : Blog : CMS - Content Management Systems : How To Use Custom CSS For TinyMce 2.0 For Joomla 1.5

How To Use Custom CSS For TinyMce 2.0 For Joomla 1.5

 E-mail
User Rating: / 0
PoorBest 
CMS - Content Management Systems
Sunday, 04 January 2009 03:10

Ok, I was annoyed by this editor. It comes by default with Joomla 1.5. So you can easily use a special CSS file just for the editor and remove all the unnecessary code like the body background..

Basically I left only few lines like for H1 – H4 and some custom CSS highlighting options.

In the admin section of your Joomla 1.5 site you just go to Plugin manager and click on Editor - TinyMCE 2.0. And in this picture you just insert the path to your CSS editor custom file, for example path to my file is this

/templates/renoseowebdesign/css/editor_content.css

 

tiny mce

 

And the code that I have in my CSS looks like this:

 

td,tr,p,div {

font-family: "Trebuchet MS", Verdana, Futura, Arial, Helvetica, sans-serif;

line-height: 1.3em;

font-size: 14px;

color: #000000;
}

h1 {

font-family: Arial, Verdana, Helvetica, sans-serif;

text-decoration:none;

font-size: 15px;

margin:0px; padding:2px;

color: #9B1C2F;

}

h2 {

font-family: Arial Narrow, Helvetica Nueue, Helvetica, sans-serif;

/*font-weight: bold; */

text-decoration:none;

font-size: 14px;

padding:2px;

color: #2b3036;

margin-bottom: 5px;

margin-left: 3px;

 

}

h3 {

font-family: Arial, Verdana, Helvetica, sans-serif;

font-weight: bold;

font-size: 13px;

color: #7F2730;

line-height: 1.5em;

margin: 5px 0 10px 0;

padding-bottom: 3px;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #333333;

}
h4 {

font-family: Arial, Verdana, Helvetica, sans-serif;

text-decoration:none;

font-size: 12px;

padding:2px;

color: #3F3F3F;

margin-bottom: 5px;

margin-left: 3px;

}

pre, .code, .Code {

padding: 15px 25px 15px 40px;

margin: 15px 0;

background: url('/../images/tp-code.gif') no-repeat top left #EFF9FC;

font: 1em/1.5 "Courier News", monospace;

}
blockquote {

margin: 15px 0;

padding: 10px 40px 10px 60px;

background: url('/../images/quote.gif') 15px 5px no-repeat;

font: italic 1em/1.5 Georgia, Times, serif;

}
div.blockquote {

margin: 0;

padding: 0;

background: url('/../images/quote-right.gif') no-repeat bottom right;

}

.dropcap {

float: left;

padding: 4px 8px 0 0;

display: block;

color: #16A9CD;

font: 50px/40px Georgia, Times, serif;

}
.error {

padding: 5px 5px 5px 25px;

color: #CF3020;

background: url('/../images/bullet-error.gif') no-repeat center left;

}
.message {

padding: 5px 5px 5px 25px;

color: #16A9CD;

background: url('/../images/bullet-info.gif') no-repeat center left;

}
.tips {

padding: 5px 5px 5px 25px;

color: #DF8A00;

background: url('/../images/bullet-tips.gif') no-repeat center left;

}

.highlight {

border: 1px dotted #9AA6AA;

padding: 0 5px;

background: #FFFFF0;

font-weight: bold;

}

p.stickynote {

padding: 40px 90px 15px 25px;

background: url('/../images/sticky-bg.gif') no-repeat top right #EFF9FC;

}

 

p.pinnote {

padding: 40px 90px 15px 25px;

background: url('/../images/pin-bg.gif') no-repeat top right #EFF9FC;

}

 

p.clipnote {

padding: 40px 90px 15px 25px;

background: url('/../images/clip-bg.gif') no-repeat top right #EFF9FC;

}



Comments
Add New Search RSS
+/-
Write comment
Name:
Email:
 
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
Please input the anti-spam code that you can read in the image.