# Appearance

&Lauri.Watts; &Lauri.Watts.mail;
2009-12-01
&kde; 4.4
KDE CSS Appearance Font CSS Stylesheets Accessibility

## Appearance

This module consists of three tabs with configure options how to display web pages.

### General

The check box labeled Automatically load images allows you to control whether images on web pages are loaded by default. Unless you have a very slow connection, you will probably want to leave this option selected, as there are many web pages that are difficult to use without images. If you don't select the option to automatically load images, you can still view the text on the page, and then load the images if you need them.

If Draw frame around not completely loaded images is checked, &konqueror; will draw a frame as a placeholder around images embedded in a web page that are not yet fully loaded. You will probably want to check this box to enhance your browsing experience, especially if have a slow network connection.

Many web pages use animated gif images, and these can be very annoying, and in some cases, quite a drain on your system resources. The Animations option lets you choose when animations are enabled. The default is enabled, but you can set this to disabled, or to run the animation only once, even if the file itself contains instructions that the animation should run more times, or continuously.

The next setting is Underline links:. You can choose to underline links Enabled. If this option is selected, any text on web pages that acts as a link will be shown in an underlined font. While many web pages do use color to distinguish text that acts as a link, underlining makes it very easy to spot links.

If you don't like underlined links, you can choose Disabled, so that no links are underlined. Or you can choose a middle ground, Only on Hover, so that links are underlined when the mouse cursor is resting over them, and not underlined the rest of the time.

The site's CSS definitions can override this value.

Smooth scrolling determines whether &konqueror; should use smooth steps to scroll &HTML; pages, or whole steps:

- Always: Always use smooth steps when scrolling.

- Never: Never use smooth scrolling, scroll with whole steps instead.

- When Efficient: Only use smooth scrolling on pages where it can be achieved with moderate usage of system resources.

### Fonts

Under this tab, you can select various options related to the use of fonts. Although the shapes and sizes of fonts are often part of the design of a web page, you can select some default settings for &konqueror; to use.

The first thing you can set here is the font size. There are two settings which work together to allow you a comfortable browsing experience.

Firstly, you can set a Minimum font size. This means, even if the font size is set specifically in the page you are viewing, &konqueror; will ignore that instruction and never show smaller fonts than you set here.

Next you can set a Medium font size. This is not only the default size of text, used when the page does not specify sizes, but it is also used as the base size that relative font sizes are calculated against. That is, the &HTML; instruction smaller, it means smaller than the size you set for this option.

For either option, you can select the exact font size in points by using the up/down spin control (or just typing) next to the option label.

These options are independent of each other. Pages that do not set a font size, or ask for the default, will display with the size you set from Medium font size, while any pages that ask for a size smaller than your Minimum font size setting will instead show that size. The one does not affect the other.

The remaining options are for the fonts to be associated with different types of markup used in &HTML; pages. Note that many web pages may override these settings. For any type of font (Standard, Fixed, Serif, &etc;) you can select a different font if you like.

Below this, you can set a Font size adjustment for this encoding. Sometimes the fonts you want to use for a particular encoding or language are much larger or smaller than average, so you can use this setting to bring them into line.

You can set a default encoding that &konqueror; should assume pages are when rendering them. The default setting is Use Language Encoding, but you can change it to any encoding available in the list.

### Stylesheets

#### Introduction

CSS style sheets affect the way web pages appear. CSS stands for Cascading Style Sheets.

&kde; can use its own stylesheet, based on simple defaults and the color scheme you are using for your desktop. &kde; can also use a stylesheet that you have written yourself. Finally, you can specify a stylesheet in this module. The options presented in this module are tuned for accessibility purposes, especially for people with reduced vision.

Your choices here affect every &kde; application that renders HTML with &kde;'s own renderer, which is called khtml. These include &kmail;, &khelpcenter; and of course &konqueror;. Choices here do not affect other browsers such as &Netscape;.

#### Stylesheets

This section contains the following options:

Use default stylesheet

  &kde; will use the default stylesheet. Some of the colors will default to those defined in your chosen color scheme. Most settings are easily overridden by the page you are viewing.

Use user-defined stylesheet

  &kde; will use a stylesheet that you have written yourself. You can use the browse button to locate the stylesheet on your system. CSS files traditionally have a `.css` extension, but this is not required.

Use accessibility stylesheet

  Use the settings defined in the Customize dialog. Enabling this option will enable the Customize button lo launch a dialog to define stylesheet settings.

#### Customize

In this dialog you can set up a user stylesheet. The options available are only a subset of the instructions you can add in a stylesheet, and they are geared towards people with reduced vision, to allow users to create a stylesheet that makes web pages and the &kde; help files more readable.

The options in this dialog are disabled unless you chose Use accessibility stylesheet.

##### Font Family

Base family

  Choose a font family to use for body text.

Use same family for all text

  If you enable this, then the same font family will be used for all text, regardless of the settings on the page you are viewing. This is useful for pages which have used a decorative or hard to read font for headlines.

##### Font Size

Base font size

  This is the default size for text on the page. Many web sites set their font sizes relative to this default, using larger or +1 to make the text bigger, and smaller or -1 to make the text smaller.

  Many people design their web pages on platforms where the ordinary default text size is too large for the average user to read, so it is very common to come across web pages that have forced the font smaller in this way.

  This setting will allow you to set the default font to a comfortable size, so that the relative sizes are also enlarged enough to be comfortable.

  Do not forget you can also have &konqueror; enforce a minimum size, so that text is never too small to read.

Use same size for all elements

  If you enable this option, then all text will be rendered at your specified font size, regardless of the instructions the page contains. Relative font sizes as discussed earlier, and even specific instructions that text should be rendered at a certain size will be overridden here.

##### Images

Suppress images

  If you do not want to view images, you can turn this off here.

Suppress background images

  One major problem for reduced vision users is that background images do not give sufficient contrast to allow them to read the text. You can disable background images here, independently of your choice above to view all images.

##### Colors

Black on white

  Many people with reduced vision find black text on a white screen gives the most contrast, and is easiest to read. If this applies to you, you can set this here.

White on black

  Many other people with reduced vision find the opposite to be true, that white text on a black screen is easier to read.

Custom

  Still other people find that pure black and white, in either order, is difficult to read. You can set custom colors here for both the Background and the Foreground.

Use same color for all text

  Many web sites use a different, often contrasting color for headings or other flourishes. If this interferes with your ability to read the content, you can enable this check box to have &kde; use the colors you have set above for all text.

##### Preview

The Preview section allows you to see the effect of your changes. Several types of headings are displayed with your stylesheet, and a sentence in the default body text.

This should allow you to fine-tune your stylesheet until you have something that you can comfortably read.

Happy surfing!