Changing the style of any page content or the whole site
Christine Cahoon Fri 17 Feb 2017 updated: Mon 20 Feb 2017
To give you some background... on any web site, there's content that is made up of such page elements as images, headings, paragraphs. In any ETINU web site, there are styles associated with each page element to tell the browser how each page element should be displayed. All the styles for each of the page elements are defined in a stylesheet so styles are separate from content.
With the content and styles being separate, it means that changing a site's design is easy because all that's required is to change the styles in the site's stylesheet.
We appreciate there may be times that you want to override the styles in the site's stylesheet.
Here's a number of ways:
Formatting options
If the content is using the generic section type, an administrator can override the stylesheet by using formatting menu bar (similar in how you would in a word processing package). There are also Font size and Font family menus that you can select from to change the size of selected text and change the selected text to be a different font [see 1—Formatting options screenshot]
Make adjustments in the code
An administrator can override the stylesheet by adding some styles to a page element by using the Edit HTML [see 2—Edit HTML icon screenshot] in the editor window of any generic section type [3—Adding styles to the img tag screenshot], for example:
- for an image, you can specify a border around it or a specific width (note: be mindful this width should reduce gracefully for smaller screens, so better to add it as a percentage)
- adding a style to a heading (h1, h2, h3...) to make the text larger or a different colour
- make the text in a paragraph larger or in italics
Adding your own stylesheet
If you are experienced in CSS (cascading stylesheets), there is a facility within ETINU to download the site's own stylesheet, change it and upload it again [see 4—Uploading a new stylesheet screenshot]. Note: it is recommended that you save it under a different name so you can revert back to the old stylesheet at any time. How to use this CSS feature within ETINU is available in Instructions under Style.
Option 1 and 2 are not recommended because this leads to inconsistencies within the web site. Visitors get used to a certain layout or style and when a page is completely different from the rest of the site, it can look out of place. Also when the site is redesigned, those styles that you've added take precedence over the site's stylesheet so that content may look out of sync with the newly designed web site.
Of course, you can always contact us to discuss your requirements.
1 comment
Christine Cahoon Mon 20 Feb 2017
If you're not familiar with styles, we can always change the default styles for you in the main stylesheet.
If you want to set up a specific style for a particular type of content throughout the site, we can set up a separate class. For example, instead of the styles described above in Make adjustments in the code, that is:
style="border: 1px solid pink; padding: 0 10px 10px 10px;"
we can add these to the site's stylesheet as a class called person and you'd only need to add:
class="person"
to the img tag when it was required in the Edit HTML.