Plusboxar och andra dekorationer

Dekorationer används för att ändra utseendet på exempelvis en textruta, bild, tabell eller annat tillägg i Sitevision. Bildtext (Ändras i inställningar och glöm inte alt-text) Dekorationerna hittar du genom att högerklicka på elementet i innehållsträdet för sidan och där välja Dekoration. De dekorationer vi använder är: plusbox faktaruta viktig information avdelare plusbox med ankarlänk. Här ser du exempel på hur det ser ut med de olika dekorationerna: Textfält med dekorationen plusbox window.svDocReady(function(){ // Remove all elements with the class "ws-accessibility-hook" document.querySelectorAll(".ws-accessibility-hook").forEach(function(hook) { hook.remove(); }); // Iterate over each ".ws-plusbox" element document.querySelectorAll(".ws-plusbox").forEach(function(box, i) { var collapseContainer = box.parentElement.nextElementSibling; // Check if the next sibling element has the "env-collapse" class if (collapseContainer && collapseContainer.classList.contains("env-collapse")) { var containerId = 'plusbox-' + i; box.setAttribute('data-containerid', containerId); var anchor = box.querySelector("a"); if (anchor) { anchor.setAttribute("href", '#' + containerId); anchor.setAttribute("aria-controls", containerId); // Add a click event to toggle collapsible content anchor.addEventListener("click", function(event) { event.preventDefault(); // Prevent the default link behavior envision.collapse("#" + containerId).then(function(collapses) { if (collapses[0].isVisible()) { collapses[0].hide(); anchor.setAttribute("aria-expanded", "false"); } else { collapses[0].show(); anchor.setAttribute("aria-expanded", "true"); } }); }); } collapseContainer.setAttribute("id", containerId); collapseContainer.classList.add("ws-plusbox__container"); } else { console.error("Couldn't find container to associate button with"); } }); // Check for hash in URL to open specific collapsible content window.addEventListener("hashchange", (event) => { if (location.hash) { document.querySelector(location.hash).nextElementSibling.querySelector('a.env-collapse-header').click().scrollIntoView(); } }) }); Använd gärna plusboxar när du har mycket text på en sida och texten går att dela upp i "kapitel" för att göra helheten överskådlig, till exempel för frågor och svar. Besökaren kanske inte vill läsa om allt utan bara vissa delar. Texten i en plusbox visas när plusboxen fälls ut. Innehållet är sökbart, både i Google och i sökfunktionen på vår webbplats. För att skapa en plusbox: Markera innehållsytan Mittenspalt. Skapa en textmodul genom att klicka på ikonen A uppe i verktygsfältet. Markera textmodulen under Mittenspalt. Högerklicka, välj Dekoration och Plusbox. För att ändra rubriken i plusboxen: Markera textmodulen under Innehållsytan Mittenspalt. Högerklicka och byt namn på textmodulen. För att se ändringen, uppdatera sidan (F5). För att skriva in texten som ska visas när plusboxen är utfälld, ställ muspekaren i textfältet och fyll på med information. I textfältet kan du använda de olika textformaten, formatmallar, länkar, punktlista och tabeller. För att skapa en länk i texten i en plusbox kan du markera de orden du vill länka, högerklicka och välja Infoga länk. För att lägga till en bild i en plusbox: Markera innehållsytan Mittenspalt. Högerklicka och lägg till en layout (se till att använda radvis layout som standard). Markera layouten, högerklicka, välj Dekoration och Plusbox. Lägg till en bild med modulen Bild och media, välj Mediaflow. Du kommer nu in i Mediaportalen där du kan välja den bilden du vill använda. Textfält med dekoration faktaruta Det som står i rubriken här ovanför måste ändras nere till vänster i "innehåll" genom att högerklicka > byta namn på textfältet. Textfält med dekoration viktig information Det som står i rubriken här ovanför måste ändras nere till vänster i "innehåll" genom att högerklicka > byta namn på textfältet. Textfält med dekoration plusbox med ankarlänk window.svDocReady(function(){ // Remove all elements with the class "ws-accessibility-hook" document.querySelectorAll(".ws-accessibility-hook").forEach(function(hook) { hook.remove(); }); // Iterate over each ".ws-plusbox" element document.querySelectorAll(".ws-plusbox").forEach(function(box, i) { var collapseContainer = box.parentElement.nextElementSibling; // Check if the next sibling element has the "env-collapse" class if (collapseContainer && collapseContainer.classList.contains("env-collapse")) { var containerId = 'plusbox-' + i; box.setAttribute('data-containerid', containerId); var anchor = box.querySelector("a"); if (anchor) { anchor.setAttribute("href", '#' + containerId); anchor.setAttribute("aria-controls", containerId); // Add a click event to toggle collapsible content anchor.addEventListener("click", function(event) { event.preventDefault(); // Prevent the default link behavior envision.collapse("#" + containerId).then(function(collapses) { if (collapses[0].isVisible()) { collapses[0].hide(); anchor.setAttribute("aria-expanded", "false"); } else { collapses[0].show(); anchor.setAttribute("aria-expanded", "true"); } }); }); } collapseContainer.setAttribute("id", containerId); collapseContainer.classList.add("ws-plusbox__container"); } else { console.error("Couldn't find container to associate button with"); } }); // Check for hash in URL to open specific collapsible content window.addEventListener("hashchange", (event) => { if (location.hash) { document.querySelector(location.hash).nextElementSibling.querySelector('a.env-collapse-header').click().scrollIntoView(); } }) }); En plusbox med ankarlänk är som en vanlig plusbox, men med skillnaden att man från en annan sida kan göra en ankarlänk som går direkt till en plusbox. Det är inte möjligt att göra en ankarlänk till en "vanlig" plusbox från en annan sida. Läs mer om ankarlänkar och ankarlänk till plusbox på sidan "länkar". För att ändra rubriken i plusboxen: Markera textmodulen under Innehållsytan Mittenspalt. Högerklicka och byt namn på textmodulen.