How to apply style to Paragraph ?
Please see the demo and see what I am doing wrong here ?
http://feizsite.com/cc/paragraph/paragraph.html
Guys at coffeecup are awesometacular.
Format Paragraph - Post ID 92262
Mansour ...
Ambassador
938 posts
Format Paragraph what I am doing wrong and why text vanishes when applying format to paragraph ?
How to apply style to Paragraph ?
Please see the demo and see what I am doing wrong here ?
http://feizsite.com/cc/paragraph/paragraph.html
How to apply style to Paragraph ?
Please see the demo and see what I am doing wrong here ?
http://feizsite.com/cc/paragraph/paragraph.html
CoffeeCup Software Rocks!
Registered User
848 posts
What exact type of formatting are you trying to apply? When you choose the Paragraph option, you're telling the Visual Editor to insert a new paragraph at that location, which is why the text disappears. Those sentences are already their own paragraph, so you're just replacing an existing block of text with an empty one.
Mansour ...
Ambassador
938 posts
I want to apply some style to Paragraph such as:
Border Around Paragraph
Setting margins, padding, Paragraph borders
Apply to code and see in Visual Editor, ( How to do this in Visual Edit Tab )
<div id="layer1" style="margin:1; padding:9; border-width:1; border-color:rgb(0,51,204); border-style:solid; width:183px; height:91px; position:absolute; left:247px; top:162px; z-index:1;">
Border Around Paragraph <br>
Setting margins, padding, Paragraph borders</div>
Spacing
Specify the line spacing
Line height
Set the height of a line.
Text Background Color
To set a background color on a text
To set a background color or image on a paragraph, heading, or list item
Border Around Paragraph
Setting margins, padding, Paragraph borders
Apply to code and see in Visual Editor, ( How to do this in Visual Edit Tab )
<div id="layer1" style="margin:1; padding:9; border-width:1; border-color:rgb(0,51,204); border-style:solid; width:183px; height:91px; position:absolute; left:247px; top:162px; z-index:1;">
Border Around Paragraph <br>
Setting margins, padding, Paragraph borders</div>
Spacing
Specify the line spacing
Line height
Set the height of a line.
Text Background Color
To set a background color on a text
To set a background color or image on a paragraph, heading, or list item
Guys at coffeecup are awesometacular.
Mansour ...
Ambassador
938 posts
Copy this code and paste it between Body Tag (<body> here </body>)
<div id="MyFirstID" style="Z-INDEX: 0; POSITION: absolute; WIDTH: 200px; HEIGHT: 125px; OVERFLOW: hidden; TOP: 181px; LEFT: 53px">
<p style="BORDER-BOTTOM: 2px solid; BORDER-LEFT: 2px solid; PADDING-BOTTOM: 2px; BACKGROUND-COLOR: rgb(153,51,51); MARGIN: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; BORDER-TOP: 2px solid; BORDER-RIGHT: 2px solid; PADDING-TOP: 2px"><span style="BACKGROUND-COLOR: yellow"> Paragraph or text background color</span></p>
<p style="BORDER-BOTTOM: rgb(0,0,204) 2px solid; BORDER-LEFT: rgb(0,0,204) 2px solid; PADDING-BOTTOM: 2px; BACKGROUND-COLOR: rgb(153,51,51); MARGIN: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; BORDER-TOP: rgb(0,0,204) 2px solid; BORDER-RIGHT: rgb(0,0,204) 2px solid; PADDING-TOP: 2px"><span style="BACKGROUND-COLOR: yellow">Setting margins, padding, Paragraph borders</span></p></div>
<div id="MySecondID" style="Z-INDEX: 2; POSITION: absolute; WIDTH: 200px; HEIGHT: 27px; OVERFLOW: hidden; TOP: 50px; LEFT: 51px">
<p style="BORDER-BOTTOM: rgb(153,51,0) 3px solid; BORDER-LEFT: rgb(153,51,0) 3px solid; BORDER-TOP: rgb(153,51,0) 3px solid; BORDER-RIGHT: rgb(153,51,0) 3px solid">Border Around Paragraph</p></div>
<div id="MyThirdID" style="Z-INDEX: 3; POSITION: absolute; WIDTH: 200px; HEIGHT: 125px; OVERFLOW: hidden; TOP: 88px; LEFT: 51px">
<p style="BORDER-BOTTOM: rgb(0,51,153) 2px dotted; BORDER-LEFT: rgb(0,51,153) 2px dotted; PADDING-BOTTOM: 4px; MARGIN: 2px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; BORDER-TOP: rgb(0,51,153) 2px dotted; BORDER-RIGHT: rgb(0,51,153) 2px dotted; PADDING-TOP: 4px">Border Around Paragraph</p>
<p style="BORDER-BOTTOM: rgb(0,51,153) 2px dotted; BORDER-LEFT: rgb(0,51,153) 2px dotted; PADDING-BOTTOM: 4px; MARGIN: 2px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; BORDER-TOP: rgb(0,51,153) 2px dotted; BORDER-RIGHT: rgb(0,51,153) 2px dotted; PADDING-TOP: 4px">Setting margins, padding, Paragraph borders</p></div>
See the result in attached image
<div id="MyFirstID" style="Z-INDEX: 0; POSITION: absolute; WIDTH: 200px; HEIGHT: 125px; OVERFLOW: hidden; TOP: 181px; LEFT: 53px">
<p style="BORDER-BOTTOM: 2px solid; BORDER-LEFT: 2px solid; PADDING-BOTTOM: 2px; BACKGROUND-COLOR: rgb(153,51,51); MARGIN: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; BORDER-TOP: 2px solid; BORDER-RIGHT: 2px solid; PADDING-TOP: 2px"><span style="BACKGROUND-COLOR: yellow"> Paragraph or text background color</span></p>
<p style="BORDER-BOTTOM: rgb(0,0,204) 2px solid; BORDER-LEFT: rgb(0,0,204) 2px solid; PADDING-BOTTOM: 2px; BACKGROUND-COLOR: rgb(153,51,51); MARGIN: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; BORDER-TOP: rgb(0,0,204) 2px solid; BORDER-RIGHT: rgb(0,0,204) 2px solid; PADDING-TOP: 2px"><span style="BACKGROUND-COLOR: yellow">Setting margins, padding, Paragraph borders</span></p></div>
<div id="MySecondID" style="Z-INDEX: 2; POSITION: absolute; WIDTH: 200px; HEIGHT: 27px; OVERFLOW: hidden; TOP: 50px; LEFT: 51px">
<p style="BORDER-BOTTOM: rgb(153,51,0) 3px solid; BORDER-LEFT: rgb(153,51,0) 3px solid; BORDER-TOP: rgb(153,51,0) 3px solid; BORDER-RIGHT: rgb(153,51,0) 3px solid">Border Around Paragraph</p></div>
<div id="MyThirdID" style="Z-INDEX: 3; POSITION: absolute; WIDTH: 200px; HEIGHT: 125px; OVERFLOW: hidden; TOP: 88px; LEFT: 51px">
<p style="BORDER-BOTTOM: rgb(0,51,153) 2px dotted; BORDER-LEFT: rgb(0,51,153) 2px dotted; PADDING-BOTTOM: 4px; MARGIN: 2px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; BORDER-TOP: rgb(0,51,153) 2px dotted; BORDER-RIGHT: rgb(0,51,153) 2px dotted; PADDING-TOP: 4px">Border Around Paragraph</p>
<p style="BORDER-BOTTOM: rgb(0,51,153) 2px dotted; BORDER-LEFT: rgb(0,51,153) 2px dotted; PADDING-BOTTOM: 4px; MARGIN: 2px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; BORDER-TOP: rgb(0,51,153) 2px dotted; BORDER-RIGHT: rgb(0,51,153) 2px dotted; PADDING-TOP: 4px">Setting margins, padding, Paragraph borders</p></div>
See the result in attached image
Guys at coffeecup are awesometacular.
Mansour ...
Ambassador
938 posts
The property I am looking for can be achieve in Code Editor and it's disabled in Visual Editor.
it's available in Code Editor >> Style Sheet Wizard . But then why it is not Visual Editor.
This is not really good.
it's available in Code Editor >> Style Sheet Wizard . But then why it is not Visual Editor.
This is not really good.
Guys at coffeecup are awesometacular.
CoffeeCup Software Rocks!
Registered User
848 posts
Certain features are not available in the Visual editor because they cannot be successfully implemented in that mode. Visual editing requires much mashing of code to get it to work and many of the tools will not be able to create the type of code required while in visual mode. It is limiting, but this is not what the visual mode was intended for. As I mentioned elsewhere, the visual side of CCHTML was 'tacked on' due to feature requests from users. The editor was not coded from the ground up with the dual purpose in mind so this is perhaps why the visual side is not as strong as, say, Namo or Expression Web. If you really can't work with it as it is, move on to something that suits you better.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
