Page 1 of 1

How to create an element similar to <p> with different font

Posted: Thu Mar 08, 2007 8:02 pm
by RonnyK
I want to create an element similar to named , with similar marks, only a different font to reflect hand-written documents;

I styled the CSS like

Code: Select all

/* TEXT */
p {
   font-size: 1.1em;
   margin: 0 0 1.5em 0; /* some air around p elements */
   line-height: 1.4em;
   padding: 0;
}
#tsp {
   font-family: 'Lucida Calligraphy';
   font-size: 1.1em;
   margin: 0 0 1.5em 0; /* some air around p elements */
   line-height: 1.4em;
   padding: 0;
}
If I however put the code around the word "HELLO" on a test-page the data is stored as:

Code: Select all

<tsp></tsp>hello
I can create a .tsp to make it a span-element but I want it to act similar as the paragraph. How to create/use this element.

Ronny

Re: How to create an element similar to <p> with different font

Posted: Thu Mar 08, 2007 8:06 pm
by Dee
In (X)HTML you can't create your own elements.
Create a paragraph with class tsp and style that:

Code: Select all

<p class="tsp">

Code: Select all

p.tsp {
   font-family: 'Lucida Calligraphy';
   font-size: 1.1em;
   margin: 0 0 1.5em 0; /* some air around p elements */
   line-height: 1.4em;
   padding: 0;
}
Regards,
D

Re: How to create an element similar to <p> with different font

Posted: Thu Mar 08, 2007 8:09 pm
by Dee
You could also create a paragraph with id tsp and style that:

Code: Select all

<p id="tsp">

Code: Select all

#tsp {
   font-family: 'Lucida Calligraphy';
   font-size: 1.1em;
   margin: 0 0 1.5em 0; /* some air around p elements */
   line-height: 1.4em;
   padding: 0;
}

Re: How to create an element similar to <p> with different font

Posted: Thu Mar 08, 2007 8:21 pm
by RonnyK
Thanks Dee,

is there an easy way to select one of these stylings in a WYSiWYG editor, at this moment if I'm typing and press enter, the editor automatically wraps the around the text-box. I want all paragraphs to have the different font.

On some pages I did, I went to "source" and wrapped a around the total page, but with that the font-family is included.

Ronny

Re: How to create an element similar to <p> with different font

Posted: Thu Mar 08, 2007 8:38 pm
by Dee
You can add styles to the "Style" dropdown in the WYSIWYG (assuming you're using FCKEditor).
(Extensions » FCKeditorX in the menu, then the "Styles" tab)

Regards,
D

Re: How to create an element similar to <p> with different font

Posted: Thu Mar 08, 2007 9:13 pm
by RonnyK
Thanks Dee,

i did it using p.tsp to create the styling. This works fine in content. I noticed however that in the news-module, the pull-down isn't opening.

Ronny