Why use Custom Styles
in the Style Manager?

You can adjust and fine tune more than 50 different style parameters for the dynamic CSS that gives your n-gen.net CMS powered website it's Look & Feel. That is quite a bunch...

...but it is like going to the bus station where you can choose from 50 different routes each with multiple stops along each route it is not the same as having your own car and the freedom to go exactly where you want and not being restricted to the nearest bus stop.

With the custom CSS field you can basically style what ever element on your web pages exactly the way that you want.

The example to the right/below can be tweaked the way you want it: If you do not want to have all the link destinations printed in "(http://destination.example.com)" you can simply delete the section
  a:after
  {
    content: "("attr(href)")";
  }

or alternatively make the code a comment which is not executed using /* */ syntax like
/*
  a:after
  {
    content: "("attr(href)")";
  }
*/

If you are a CSS ninja you can reset almost all built-in styles of your n-gen.net CMS powered website by your own styles.
However, we recommend that you select a pre-defined skin, adjust it to suit you needs and gradually spice it up with some custom CSS where it makes sense to you - the system works perfectly without any custom CSS at all.

Tilføj en printervenlig sektion til dit CSS v.hj.a. Style Manageren

CSS koden som fortæller printeren, at denne typografi (EN: style) gælder ved udskrift:
(Alt mellem /* og  */ er kommentarer, som ikke vises)

@media print {
  /*
    Her kommer CSS koden
  */
}

 

CSS syntaks som identificerer de dele af indholdet, som skal have denne typografi (EN: style)
Identifikationen kan enten ske som 
  - HTML tag navn,
  - Klasse (EN: class) som angives med et foranstillet "." (punktum) eller
  - ID som angives med en foranstillet "#" (havelåge)
Derefter CSS selekteren efterfulgt af ":" (kolon) afsluttet med et ";" (semikolon). Udtrykket skal omkranses af "{" og "}" (hhv. venstre og højre Tuborg parentes)

@media print {
  mitHtmlTag {
    cssSelector: værdi;
    }
  .minKlasse {
    cssSelektor: værdi;
    }
  #minID {
    cssSelektor: værdi;
    }
}

 

Eksempel på CSS kode som skjuler elementerne med klassenavnene
header, footer, updateVis, searchInput, searchBtn og hideOnPrint da det ikke giver megen mening, at vise sidehoved, sidefod, hvornår siden er opdateret [der står jo på siden hvornår den er printet], søgefelt/-knap og genvej til redigering (hvis der er en logged in Admin, som printer siden) 

@media print {
  .header, .footer, .updateVis, .searchInput, .searchBtn, .hideOnPrint  {
    display: none;
  }
}

 

Eksempel på CSS kode som sikrer at tabeller og hvad der ellers måtte være i main-sektionen udnytter hele bredden og ikke laver "tomt fyld" i tabeller.

@media print {
  table, main  {
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
}

 

Eksempel på CSS kode som gør al tekst i links, lister (både nummererede og unummererede), afsnit, tabelhovedceller og tabeldataceller ¼ større og teksten sort.

@media print {
  a, li, p, th, td  {
    color: black;
    font-size: 125%;
  }
}

 

Eksempel på CSS kode som viser alle links og efterstiller linkets destination i parentes.

@media print {
  a:after {
    content: "("attr(href)")";
  }
}

What does the above CSS code do
Line 1 states that this CSS code only applies when the page is being printed.
Line 2 identifies the CSS classes (denoted by "." and the class name) for the header, footer, when the page was last updated, the search field and the search button.
Line 3 identifies the ID attribute tag for the Admin Ribbon, navigation menu, link to the Page Editor (if logged in) and the place holder for Navigation Bar.
Line 4 makes all the above classes and IDs invisible.
Line 6 identifies all table and main elements and sets the width of these to 100 % and removes any system or custom margins and padding.

Line 11 identifies the space after all hyperlinks.
Line 12 writes the destination of each hyper link in parentheses after the displayed link text.

Improving the printer friendly custom CSS style
You can alter and improve this example of a printer friendly custom CSS style any way you like. For example you can decide that all text should be in black (on white paper) so that images remain colorful but text colors are black.
The CSS for that will follow the same principles as the above example. Change the section in line 6 from

table, main {

to

p, h1, h2, h3, h4, h5, h6, a, table, main  {

in front to identify all paragraphs (p), headings (h1 - h6), links (a), tables and what ever else resides in the main section.

Add a line after line 9 with this content:

color: black;

and save you work. If you want to check the results just remember to refresh your page before you print it.


Or you can alter the text size of various elements just by adding a line after line 9 with this content:

font-size: 125%;

and save you work. This will increase the font size by ¼ or 25% making it more areadble if you pages have a small text size.

 

 

 

 

Last updated 29-07-2024 03:31:18