Wiki : FormattingTitles
Documentation Home :: Categories :: Index :: Recent Changes :: Comments :: Search :: Help :: Login/RegisterMy titles are displayed in a very large font? - how can I change this?
Background
Prior to version 0.760 titles of items held by modules were wrapped in a div tag with one of two css classes applied - either pn-title or pn-pagetitle. pn-pagetitle was usually a higher level header to pn-title. e.g.<div class="pn-title">my title</div>
From version 0.760 onwards all titles were changed to use proper html header tags i.e. h1 - h6. This change was made for a number of reasons
- Accessibility - not all visitors to a site will be via a traditional browser. It's important that PostNuke takes account of assistive browsing technologies such as screen readers. Screen readers pay attention to the structure of the html document and act on the use of header tags. There is no way that a screen reader could understand that a styled div is actually a header
- Semantic markup - Simply put this is the use each html tag for the purpose it was designed. HTML provides us with header levels so we should use them.
- Search engine optimisation - Search engines bots, like assistive browsing technologies, pay attention to the structure of page. A search engine will giving increased weighting to text inside header tags.
As a result of this change themes authored for versions of PostNuke prior to version 0.760 may not contain styling for html header tags. This results in the browser using its own default font size and weight which is often bigger than is required for the site.
Adding styling for header tags
To fix this problem add suitable css styles to your theme stylesheets for each of the six header levels h1 - h6. The actual styling required will vary from theme to theme and person to person. The css code provided below is a sample template. It won't actually 'fix' the problem but gives an outline of the css required
h1 {
your styling goes here
}
h2 {
your styling goes here
}
h3 {
your styling goes here
}
h4 {
your styling goes here
}
h5 {
your styling goes here
}
h6 {
your styling goes here
}
your styling goes here
}
h2 {
your styling goes here
}
h3 {
your styling goes here
}
h4 {
your styling goes here
}
h5 {
your styling goes here
}
h6 {
your styling goes here
}
An additional method to restore your font to its previous size and style is to add the h1 tag to the pn-title CSS declaration. This is very simple. Find your old pn-title style definition. It will look like this
.pn-title {
existing styling is here
}
existing styling is here
}
Add any header tags, separated by commas, to a list after .pn-title. You can add as many html tags as you like - just separate by commas, as below
.pn-title, h1, h2 {
existing styling is here, no need to change a thing
}
existing styling is here, no need to change a thing
}
Back to the Knowledge Base
CategoryKnowledgeBase
|
