# Estiliza el marco incrustado de Discourse en tu página web

**URL:** https://meta.discourse.org/t/style-the-embedded-discourse-frame-on-your-web-page/35861
**Category:** Administrators
**Tags:** how-to
**Created:** [20 Noviembre, 2015 22:35 UTC](https://meta.discourse.org/t/style-the-embedded-discourse-frame-on-your-web-page/35861 "2015-11-20T22:35:57Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![DoubleMalt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/doublemalt/32/122089_2.png) [@DoubleMalt](https://meta.discourse.org/u/DoubleMalt)
#### Post date: [20 Noviembre, 2015 22:35 UTC](https://meta.discourse.org/t/style-the-embedded-discourse-frame-on-your-web-page/35861/1 "2015-11-20T22:35:57Z")

</div>

# How to style the embedded Discourse frame on your web page

## Getting Started

To get started you have to create a new CSS stylesheet under `admin -> customize -> css/html`, even if you don’t want to change the normal styling of your forum. Just leave the other categories empty and just modify `Embedded CSS`. Don’t forget to set it to enabled under the textfield.

## Link and Button Colors

You probably want to style the links and buttons according to your web page.

```plaintext
footer a.button {
    background-color: #e26826;
    color: white;
}

a, a:visited, a:hover, a:active, a.in-reply-to {
    color: #e26826;
}

```

## Adjust Staff Highlights

Usernames of members from the staff are usually highlighted with a light yellow background. If you don not want this you can change it with something like this.

```plaintext
.username a.staff {
    background-color: #e26826;
    color: white;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

```

## Put Filter over Avatars

If you want to keep a certain color palette on your blog, bright colored avatars can cramp your style. The following snippets desaturates them, but you could also use other filters like sepia.

```plaintext
div.author > a > img {
    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);
}

```