# Getting started with CSS

{% hint style="info" %}
One of the ways to work with CSS is to use Firebug.
{% endhint %}

Most of the styles are described in the `/openiam-ui-static/bootstrap-ui/css/custom.css` file.

Users can also [create custom CSS](/branding/creating-and-adding-a-custom-css-file-to-openiam.md) and apply it to an OpenIAM instance.

#### Updating a logo

To override the logo on the login page, override the `.llogo` class:

```css
.llogo {
    background-image: url(/openiam-ui-static/images/common/llogo.png);
    width: 273px;
    height: 114px;
}
```

{% hint style="info" %}
In OpenIAM v4.x you can also upload different logos right from UI theme edit.
{% endhint %}

The HTML code looks like this on the login page:

```html
<div id="llogo">
<a class="logo llogo" href="javascript:void(0);">Openiam</a>
</div>
```

To define a new logo on all other pages, override the `.slogo` class:

```css
.slogo {
    background-image: url(/openiam-ui-static/images/common/logo.png);
    width: 110px;
    height: 41px;
}
```

Here is the equivalent HTML:

```html
<div id="logo">
<a class="logo slogo" href="">Openiam</a>
</div>
```

#### Changing a background

Background for the Login/Logout pages - The style rule below will be applied to the HTML element with id="pagebg":

```css
#pagebg{
    background:#333;
    width:100%;
    padding-top:60px;
}
```

Background for Top, Middle, and Bottom sections of the page when you're logged in - are controlled by the style rule below. It is applied to the HTML elements with id="top," "middle," "bottom":

```css
#top{
    background:url(../../images/common/topbg.jpg) repeat-x;
    width:100%;
    min-height:243px;
    margin-bottom: 10px;
}
```

```css
#middle{
    background:url(../../images/common/middlebg.jpg) repeat;
    width:100%;
    min-height:400px;
    float:left;
    position: relative;
}
```

```css
#bottom{
    background:url(../../images/common/footbg.jpg) repeat-x;
    width:100%;
    min-height:172px;
    float:left;
}
```

Background inside the Content frame - The `.openiam-client-frame` class is added to the `<body>` of the document in the `iframe`.

It's a placeholder in case you want to style the `iframe` specifically.

```html
<body class="openiam-client-frame">
```

#### Changing footer and copyrights

There is no need to configure a CSS file to change Footer and Copyright since you can do it via the system configuration page.

Log in to **Webconsole** and navigate to **Administration** > **System Configuration** > **UI** tab and scroll to **Footer**.

Here, you can change the attributes to the extent you need.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-beta.openiam.com/branding/getting-started-with-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
