CSS in text editor

[paulg]

Hi

I was wondering if it's possible to integrate CSS option into the WYSIWYG editor?

thanks

[ruebenwurzel]

Hello,

if you use FCKEditor or XINHA  you only need a editor.css in the folder of your template. Make a copy of your screen.css and rename it editor.css or create a new one with the styles you want.

Matthias

[midiweb]

my template industry1 has no editor.css . Where's the screen.css? That's my big problem: What I format in the backend is not really what I get on the screen. It's very crappy.:

-line feed is different
-pictures position ist not  left or right aligned as I want
-bullets are not aligned

and many others

I need only one basic editor.css that works with my template industry1 but I cannot code with css
The rest works fine.

I can pay 20,00EUR with Paypal when someone finds the solution

Cheers

[erpe]

Hi midiweb

your css-file is called industry.css

you can copy this file and rename to editor.css and put in the template dirrectory of your template.
Then you should have the same format in the frontend as in the backend (if headers etc are formatted there).
If not you have to format the editor.css  regarding to the things you need, headers, images etc.

rgds

erpe

[midiweb]

thanks. Sorry for the late response.

I did the things you advised me: I renamed industry.css in editor.css
here:

Code:

body {
font-family : Verdana, Geneva, Arial, helvetica, sans-serif;
font-size : 10pt;
padding : 0;
margin-top : 10px;

}
#nav {
width : 980px;
height : 22px;
border-top : 5px solid black;
position : relative;
margin : 0;
margin-top : 0;
margin-bottom : 0;
padding-left : 0;
text-align : right;
background: url(../../media/topborder.jpg) no-repeat;
}
#nav li {
padding-left : 16px;
padding-right : 10px;
display : inline;
height : 20px;
background: url(../../media/verticaline.jpg) no-repeat;
}
#nav li a {
color : black;
font : bold     normal normal 10px/20px "Lucida Grande", Lucida, Verdana, sans-serif;
}
#nav li a:hover
{
color: #cb1625;
}
#main {
font-family : Verdana, Geneva, Arial, helvetica, sans-serif;
font-size : 9pt;
width : 980px;
margin-left : auto;
margin-right : auto;
border-right : 1px solid #666666;
border-left : 1px solid #666666;
}
#hero {
margin : 0 10px;
width : 218px;
height : 106px;
background-image : url(../../media/logo.jpg);
background-repeat : no-repeat;
float : left;
}
#hero2 {
margin : 0;
margin-left: 286px;
margin-right: auto;
height : 106px;
background-image : url(../../media/topbanner3.jpg);
background-repeat : no-repeat;
}
.gear {
width : 970px;
height : 0px;
margin-top : 0;
margin-left : 15px;
}
#header h1 {
position : absolute;
left : 94px;
top : 8px;
color : white;
font-size : 48px;
font-weight : bold;
margin : 0;
}
#header em {
font-style : normal;
text-decoration : underline;
}
#wrapper {
display : inline;
/*display : block;*/
padding-top : 0;
background-color : white;
position : relative;
}
/*#wrapper:after {
content : '.';
display : block;
height : 0;
clear : both;
visibility : hidden;
}*/
#sidebar {
/*background: url(../../media/menu-ground.jpg) no-repeat;*/
float : left;
text-align : center;
margin-left : 0;
margin-top : 0;
position : relative;
padding : 10px 10px 20px 10px;
width : 160px;
height : 820px;
border-right : 1px dotted ;
}

#news{
float : right;
text-align : center;
margin-left : 0;
margin-top : 0;
position : relative;
padding : 12px 10px 20px 10px;
width : 140px;
height : 920px;
border-left : 1px dotted;
background-color: #e6e6e6;
}
#news h4 {
color : #232219;
text-align: center;
text-decoration: underline;
}
/*#sidebar h3 {
font-size : 18px;
border-bottom : 1px solid black;
margin-bottom : 4px;
margin-top : 16px;
clear : both;
}*/
#sidebar ul {
margin-left : 1em;
padding-left : 0;
}
#sidebar p {
margin-bottom : 8px;
}
#sidebar div.subtabs ul {
list-style : none;
width : 155px;
margin : 0;
padding : 0;
}
#sidebar div.subtabs ul ul {
list-style : none;
width : 130px;
margin : 0;
padding : 0 0 0 25px;
}
#sidebar div.subtabs ul ul ul {
list-style : none;
width : 125px;
margin : 0;
padding : 0 0 0 5px;
}
#sidebar div.subtabs ul a {
width : 100%;
margin : 3px;
text-align : left;
text-decoration : none;
display : block;
padding : 3px 3px 3px 5px;
border-bottom : 1px solid #949494;
border-left : 4px solid #cccccc;
font: bold 0.8em Verdana, Arial, Helvetica, sans-serif;
color: #0a0a0a;
}
#sidebar div.subtabs ul a:hover {
text-decoration : none;
background : #eaeaea url(img/menubg2.gif) repeat-x left;
color : #da0434;
border-left : 4px solid #110200;
}

#content {
margin : 0 0 0 180px;
min-height : 310px;
height : auto !important ;
width : 600px;
display : block;
position : relative;
padding : 0 3px 20px 10px;
color : #0b0b0b;
}

#content h1 {
font-size : 20px;
margin : 0;
/*text-decoration : underline;*/
}
#content h2 {
font-size : 18px;
margin : 0;
/*text-decoration : underline;*/
}
#content .date {
float : right;
}
#content .postedBy {
float : left;
}
#content .meta {
height : 1em;
}
#content p {
text-align : justify;
text-indent : 1em;
line-height : 1.3em;
}

a {
color : #3c3b96;
}


#footer {
width : 980px;
height : 42px;
padding-top : 0;
padding-bottom : 0;
margin-left : auto;
margin-right : auto;
color : #6a72b5;
text-align : center;
background: url(../../media/bottombanner.jpg) no-repeat center;

}
.right {
float : right;
}
.csskeyword {
color : blue;
}
.cssvalue {
color : red;
}
p.caption {
text-align : center;
}
small.super {
vertical-align : top;
font-size : 0.75em;
line-height : 1.3em;
}
.nodisplay {
display : none;
}

But I have still problems with the layout particularly when I position texts near pictures (as newspapers). In the backend  all looks fine but in the frondend it  looks totally different. The textes are not aligned as I defined, the distance between images and letters are bigger and not regular, etc...

And when I delete some picitures, it remains a kind of a square form, a layer,...

How to fix that ?

It would be better to use  a new template but how to do that with the current content?

[LordDarkman]

If you want to use a new Template just download or create one and install it in the WB backend. Then go to Option and change the Template there. Your contend isn't efecct while changing the Template.

CU Moritz