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 left 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.

3 minutes of reading

Add a printer friendly CSS to your pages using the Style Manager

This is the CSS code that tells the printer that this style must be applied when printing:
(Everything between /* and  */ is comments and they are not processed)

@media print {
  /*
    Here goes the CSS code
  */
}

 

CSS syntax that identifies which content elements that will be styled:
The identification can be performed using
  - HTML tag name,
  - Class which has a prefixed "." (dot) or
  - ID which has a prefixed "#" (pound)
Followed by the CSS selector name and a ":" (colon). The expression is ended by a ";" (semicolon). Selectors as well as values are enclosed in "{" and "}" (left and right curly bracket)

@media print {
  myHtmlTag {
    cssSelector: value;
    }
  .myClass {
    cssSelector: value;
    }
  #myID {
    cssSelector: value;
    }
}

 

Example CSS code that hides the element with class names header, footer, updateVis, searchInput, searchBtn and hideOnPrint as it does not make sense to display page header, page footer and when the page was updates as the time of print will be displayed. Also the search features are hidden and the same goes for editing links (if you are logged in as an Admin when printing the page) 

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

 

Example CSS code that let tables and and othe elements in the main section use the full width of the paper, and reduces margin and padding to zero (no extra white spacing).

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

 

Example CSS code that makes all text in links, lists (ordered as well as unordered), paragraphs, table headings and table data cells ¼ bigger and black colored.

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

 

Example CSS code that diplays the links text and append the destinaion URL in paranthesis.

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


You can combine, adjust and add to these examples as you might feel convenient. Just remember to refresh your page when applying new or adjusted styles.



Happy stylin' ;-) 

 

 

 

 

Last updated 21-02-2025 15:05:31