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

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm

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

Post 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
Dee
Power Poster
Power Poster
Posts: 1197
Joined: Sun Mar 19, 2006 8:46 pm

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

Post 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
Dee
Power Poster
Power Poster
Posts: 1197
Joined: Sun Mar 19, 2006 8:46 pm

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

Post 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;
}
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm

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

Post 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
Dee
Power Poster
Power Poster
Posts: 1197
Joined: Sun Mar 19, 2006 8:46 pm

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

Post 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
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm

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

Post 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
Post Reply

Return to “Layout and Design (CSS & HTML)”