Small width layout Medium width layout Maximum width layout Small text Medium text Large text
     Search
Downloads Downloads Directory Directory Forums Forums Forge Forge Blogs Blogs        Marketplace Marketplace Careers Program Careers
Community › Forums Register  |  

ExactTarget - What's Your Score
  Need Help?  
Professional technical support for DotNetNuke is available from DotNetNuke Corporation.
 


  Ads  
Iron Speed Designer is a software development tool for building database, reporting, and forms applications for .NET without hand-coding.
 


  Sponsors  

Meet Our Sponsors

R2integrated - formerly bi4ce
Jango Studios - Skins, Modules and Hosting for DotNetNuke
eUKhost.com is commited to offer exceptional UK Windows Web Hosting solutions with quality 24x7 technical support.Our plans support ASP.Net, ASP, ASP.NET Ajax extensions, XML, MSSQL, MySQL, PHP,DNN, multiple domains and Shared SSL as standard.
SmarterTools
The Official Microsoft ASP.NET Website
Portal Webhosting - Hosting For Developers
 


DotNetNuke Forums
 
  Forum  DotNetNuke® Pro...  FCKeditor Provi...  How to create a list of custom styles by portal in the FCK Editor
Previous Previous
 
Next Next
New Post 4/26/2007 12:27 AM
User is offline Gary Milczarek
47 posts
www.bizcreate.com
10th Ranked




How to create a list of custom styles by portal in the FCK Editor 

After much searching, exploring and many failures I finally found a system that worked for me. 
Here's for all the help you all have given me.

  1. Add your customs styles to portal.css in the portal root (Site Settings > Style Sheet) and save. These styles will be applied to your module text outside of the editor.
  2. Create a text file: FCK.xml. Here is where you will define styles to appear in the style list inside the FCK editor.
  3. Using the information in the FCK Editor Wiki help site, create your custom styles in FCK.xml. There should be an entry for each style you want to appear in the editor and in the order you want them to appear. See example below.
  4. Create a text file: FCK.css. These styles give the formatting to the styles you defined in FCK.xml so text in the editor will be formatted properly.
  5. Add your custom styles to FCK.css. This file contains ONLY your custom styles which are exactly the same as the custom styles you added to portal.css. There should be an entry for each style in FCK.xml you want to format.
    Using these lists limits the styles that appear in the editor to only those you want, rather than the long list of styles in portal.css.
  6. Upload FCK.css and FCK.xml to your portal root using the File Manger.
  7. Log in to your portal as Host and edit an HTML/Text module with the FCK Editor.
  8. Select "Show custom editor options"
    Select "Portal" for Settings Type.
  9. Expand "List of available styles for the editor"
    Select "URL" for Style list generation mode. Do not choose "Dynamic" or you will get a style list of garbage.
    Select "File" for Custom XML file, and select FCK.xml you uploaded to the root.
  10. Expand "Editor area CSS"
    Select "URL" for CSS Generator mode. Again, do not select "Dynamic".
    Select "File" for Custom CSS file, and select FCK.css you uploaded to the root.
  11. Confirm "Apply custom settings to: Portal" and click "Apply"
    Close the FCK Editor custom options page and Cancel module editing.
  12. Refresh your browser with Ctl-F5 to force a refresh of the cache.

Now you can edit your module again and look for your nice custom list of styles. See how nicely they format your text when applied. They should match the formatting you see after updating the editor.

If you don't see your styles and the formatting is not right, you might try deleting files in your cache. Also, check for mistakes in FCK.xml, FCK.css and portal.css. They must all be in sync and correct.

Anyone have more suggestions or corrections?

Here is some sample FCK.xml adapted from FCK:

<?xml version="1.0" encoding="utf-8" ?>
<Styles>
 <Style name="Image on Left" element="img">
  <Attribute name="style" value="padding: 5px; margin-right: 5px" />
  <Attribute name="border" value="2" />
  <Attribute name="align" value="left" />
 </Style>
 <Style name="Image on Right" element="img">
  <Attribute name="style" value="padding: 5px; margin-left: 5px" />
  <Attribute name="border" value="2" />
  <Attribute name="align" value="right" />
 </Style>
 <Style name="Title" element="span">
  <Attribute name="class" value="Title" />
 </Style>
 <Style name="Topic" element="span">
  <Attribute name="class" value="Topic" />
 </Style>
 <Style name="Custom Bold" element="span">
  <Attribute name="style" value="font-weight: bold;" />
 </Style>
 <Style name="Custom Italic" element="em" />
 <Style name="Title" element="span">
  <Attribute name="class" value="Title" />
 </Style>
 <Style name="Code" element="span">
  <Attribute name="class" value="Code" />
 </Style>
 <Style name="Heading H1" element="H1" />
 <Style name="Heading H2" element="H2" />
 <Style name="Custom Ruler" element="hr">
  <Attribute name="size" value="1" />
  <Attribute name="color" value="#ff0000" />
 </Style>
</Styles>

 And corresponding FCK.css:

body, td
{
 font-family: Verdana, Sans-Serif;
 font-size: 13px;
}

.Title
{
 font-family: Ariel, sans-serif;
 font-size: 16px;
 font-weight: bold;
 color: red;
}

.Topic {
 font-family: Ariel, sans-serif;
 font-size: 14px;
 font-weight: bold;
 color: red;
 font-style: italic;
}


.Bold
{
 font-weight: bold;
}

H1  {
   font-family: arial, sans-serif;
   font-size: 1.7em;
   font-weight: bold;
   color: #006699;
}

H2  {
   font-family: arial, sans-serif;
   font-size: 1.3em;
   font-weight: bold;
   color: #006699;
}

 
New Post 5/12/2007 6:49 AM
User is offline Declic Video
902 posts
declic-video-fx.com
7th Ranked


Re: How to create a list of custom styles by portal in the FCK Editor 

Locopon and other people, this thread should be STICKED at the top of the forum !!!

I was looking for a while this solution. Just perfect, thanks ripple.

DV FX

 
New Post 11/4/2007 6:55 AM
User is offline Michael Kamp
466 posts
8th Ranked




Re: How to create a list of custom styles by portal in the FCK Editor 

Great help, thank you Gary!

Perhaps one little improvement to #1 in your list:
Instead of saving (and maintaining) your custom styles twice (in FCK.css and portal.css), you may save them only once in FCK.css and include them into portal.css using the import directive at the top of portal.css:

@import url("FCK.css");
 
New Post 11/19/2007 10:37 PM
User is offline Daniel Bartholomew
8 posts
www.dbartholomew.net
10th Ranked


Re: How to create a list of custom styles by portal in the FCK Editor 

Gary,

Thanks for your post. Unfortunately these instructions, even when using your exact files, do not work on my installations.

I have tried two seperate DNN 4.7.0 installations without success.

Is there anything else I may be missing? I can see changes occurring in the HostSettings table, but the list of styled in the FCK toolbat never changes.

Am I missing something in web.config?

Kind regards,

DanielB

 
New Post 11/19/2007 11:47 PM
User is offline Sebastian Leupold
12959 posts
www.deutschnetnuke.de
1st Ranked












Re: How to create a list of custom styles by portal in the FCK Editor 

Daniel,

  • did you follow exactly the steps above, especially about setting the FCKEditor options from UI?
  • where did you try to set this? I remember, there have been issues to use this for profile properties

Sebastian Leupold



DotNetNuke Project UserDefinedTable
DotNetNuke Project XML/XSL
 
Previous Previous
 
Next Next
  Forum  DotNetNuke® Pro...  FCKeditor Provi...  How to create a list of custom styles by portal in the FCK Editor
 


Forum Policy

These Discussion Forums are dedicated to the discussion of the DotNetNuke Web Application Framework.

For the benefit of the community and to protect the integrity of the project, please observe the following posting guidelines:

1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DotNetNuke.
2. Discussion or promotion of DotNetNuke product releases under a different brand name are strictly prohibited.
3. No Flaming or Trolling.
4. No Profanity, Racism, or Prejudice.
5. Site Moderators have the final word on approving/removing a thread or post or comment.
6. English language posting only, please.

 


Customer Connect
Customer Connect provides cutting edge solutions that deliver sales, marketing and customer service results.
www.customer-connect.com
TechNexxus
Business process and technology sourcing solutions delivering superior people, process and value. We have used, and continue to use, DNN successfully in numerous client projects to deliver exceptional value. We are proud to support the DNN team and community.
www.technexxus.com
PartnerPoint - Microsoft Technology Community
PartnerPoint is one of the largest online communities of Microsoft Partners Worldwide. With over 5,000 active members, it serves as a collaboration platform for other technology communties around the globe
www.partnerpoint.com

DotNetNuke Corporation   Terms Of Use  Privacy Statement
DotNetNuke®, DNN®, and the DotNetNuke logo are trademarks of DotNetNuke Corporation
Hosted by MaximumASP