När man lägger till en ny stillmall (CSS) i Umbraco viasas den inte automatiskt när du redigerar innehåll i WYSIWYG-editorn TinyMCE.

För att stillmallen ska "slå igenom" och synas i editorn måste man kryssa för stillmallen i developer-delen.

 

  • Gå till Developer
  • Öppna upp "Data Types" och klicka på "Richtext editor".
  • Kryssa i de stilmallar du vill ska synas i editorn under "Related stylesheets".
  • Spara och nu är det bara att köra.
  • TIPS: Skapa en speciallstillmall om du tex vill ha en annan bakgrund i editorn än på själva sidan. Denna stilmall använder endast i editorn, inte i själva HTML-koden.

 

 

Datatypes _richtext _css

Umbracos inbyggda texteditor "Richtext editor" som baseras på TinyMCE 3 har en dropdown som heter "Choose style".

 

Choose _style _dropdown

Standardinställningen i TinyMCE är att alla klasser i de stillmallar som är bundna till editorn ska visas i dropdownen. Eftersom det oftast finns massa klasser i dessa stilmallar som man inte vill ska synas i listan har Umbraco en annan lösning.

Så här fixar du en ny klass i listan "Choose style"

  • Klicka dig till "Settings" och expandera "Stylesheets". Välj en av de stillmallar som visas i Umbracos Richtext editor.
  • Högerklicka och välj "Create" för att skapa en ny under-klass.
  • Döp den nya stilen till önskat namn, i rutan "styles" kan du sedan skriva CSS-markup.
  • Denna markup syns inte automatiskt i editor, du måste också lägga till denna markup i din stillmall. I detta fell i mallen screen.

 

Datatypes _richtext _css

Ett tips för dig som utvecklar umbraco-lösningar är såklart att använda Visual Studio.

Umbraco har ju möjligheta att redigera XSLT, CSS, JavaScript och även HTML-mallar i sitt admingränsnitt.

Däremot missar man ju debugging och mycket annat som kommer tillsammans med Visual Studio.
Om du vill utveckla och debugga med Visual Studio 2008, gör såhär:

 

1. Skapa en ny Umbraco-installation

Ställ in databas-koppling, rättigheter osv. Filerna kan tex hamna i c:\inetpub\wwwroot\umbraco

 

2. Skapa ett nytt "Website Application Project"

Detta projekt ska skapas i en annan mapp än din umbraco installation.

Lägg till de mappar för de filer du vill kunna arbeta med. Jag har följande:

    * /css
    * /scripts
    * /xslt
    * /masterpages
    * /usercontrols

 

3. Lägg till ett "Post Build Event"
Detta körs efter att projektet har kompilerats. Syftet är att vi ska kopiera filerna från vår Web Application till vår Umbraco installation.

Klicka på "Soulution>Properties>Build Events" och lägg till följande kod under "Post Build Events" - alltså det som sker när projektet är kompilerat.

XCOPY "$(ProjectDir)bin\$(ProjectName)*.*" "C:\Inetpub\soundforce - umbraco4\bin\" /y /S
XCOPY "$(ProjectDir)usercontrols\*.ascx" "C:\Inetpub\soundforce - umbraco4\usercontrols\" /y /S
XCOPY "$(ProjectDir)xslt\*.xslt" "C:\Inetpub\umbraco4\xslt\" /y /S
XCOPY "$(ProjectDir)css\*.css" "C:\Inetpub\umbraco4\css\" /y /S
XCOPY "$(ProjectDir)scripts\*.js" "C:\Inetpub\umbraco4\scripts\" /y /S
XCOPY "$(ProjectDir)\*.pbd" "C:\Inetpub\umbraco4\" /y /S

 

Parametern /y gör att filer skrivs över, och /S att även underkataloger inkluderas.

 

4. För att debuga

    * Öppna siten i din webbläsrae
    * I Visual Studio väljer du Debug > Attach to Process och väljer w3wp.exe från listan. (På IIS on XP/2000 heter proccesen asp_net.exe).
    * Var noga med att *.pbd-filerna kopieras till umbraco-installationen.
    * Debugga för fulla muggar!