# How do I make CSS changes in my Discourse?
**URL:** https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966
**Category:** Support
**Created:** [June 15, 2018, 11:57am UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966 "2018-06-15T11:57:32Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@Ensar](https://meta.discourse.org/u/Ensar)
#### Post date: [June 15, 2018, 11:57am UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/1 "2018-06-15T11:57:33Z")
How does people make like developers/owners like that and red around them. And best part is, they have custom profiles and not like others as you can see in these pictures.
---
### Author:  [@Cameron\_D](https://meta.discourse.org/u/Cameron_D)
#### Post date: [June 15, 2018, 12:03pm UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/2 "2018-06-15T12:03:28Z")
The big picture in the background is a feature everyone has access to, in your profile you can upload a profile background, which appears there and a user card background that appears when someone clicks your username.
I’m going to guess that the red border is some custom CSS for that site.
---
### Author:  [@Ensar](https://meta.discourse.org/u/Ensar)
#### Post date: [June 15, 2018, 12:28pm UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/3 "2018-06-15T12:28:10Z")
Mhm, do you know maybe if someone could help me make something close or something like that. It would be awesome if theres something out already.
---
### Author:  [@Cameron\_D](https://meta.discourse.org/u/Cameron_D)
#### Post date: [June 15, 2018, 1:05pm UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/4 "2018-06-15T13:05:57Z")
It can all be done already, without any plugin.
---
### Author:  [@Ensar](https://meta.discourse.org/u/Ensar)
#### Post date: [June 15, 2018, 1:12pm UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/5 "2018-06-15T13:12:56Z")
Well, I don’t know how actually. ☹
---
### Author:  [@Cameron\_D](https://meta.discourse.org/u/Cameron_D)
#### Post date: [June 15, 2018, 1:25pm UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/6 "2018-06-15T13:25:55Z")
If you go to your user account settings, in the Profile section you can upload a background picture.
The red glow is probably just custom CSS added to the theme by the admin. Something like this will do it:
```css
.user-main .about .details img.avatar {
box-shadow: 0 0 10px 3px #f00;
}
```
---
### Author:  [@Ensar](https://meta.discourse.org/u/Ensar)
#### Post date: [June 15, 2018, 1:44pm UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/7 "2018-06-15T13:44:15Z")
Ah, so how do I add the red thing ? As, I’m admin. I go to custom theme or something? Not very familiar with it.
---
### Author:  [@Cameron\_D](https://meta.discourse.org/u/Cameron_D)
#### Post date: [June 16, 2018, 3:57am UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/8 "2018-06-16T03:57:33Z")
Admin \> Customise \> Select the current theme \> Edit CSS/HTML \> Paste that into the CSS section.
The 10px and 3px control the size of the glow and the #f00 is the colour.
---
### Author:  [@Ensar](https://meta.discourse.org/u/Ensar)
#### Post date: [June 18, 2018, 1:34am UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/9 "2018-06-18T01:34:07Z")
how to make it for admins only?
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 18, 2018, 10:24am UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/10 "2018-06-18T10:24:44Z")
That is a bit more work, as there isn’t a group/designation available that far on the Profile page.
The site which you made a screenshot of uses the following code
```plaintext
var isOnProf = false;
var checkedImages = [];
function checkExistFunc() {
if (document.getElementsByTagName('title')[0].innerHTML == 'Profile - Vaeb - Vashta' && document.getElementsByClassName('number').length) {
if (!isOnProf) {
isOnProf = true;
if (document.getElementsByTagName('title')[0].innerHTML == 'Profile - Vaeb - Vashta') {
document.getElementsByTagName('body')[0].style.backgroundImage = 'url(http://modestowebdesigns.com/wp-content/uploads/2014/09/website-design-slider-background-stockton.jpg)';
const secondary = document.getElementsByClassName('secondary');
if (secondary.length > 0) {
secondary[0].style.background = "yellow";
secondary[0].style["border-bottom"] = 0;
}
for (var el of document.getElementsByClassName('number')) el.style.color = 'gold';
for (var el of document.getElementsByClassName('value')) el.style.color = 'gold';
for (var el of document.getElementsByClassName('stats-title')) el.style.color = 'gold';
}
}
} else if (isOnProf) {
isOnProf = false;
document.getElementsByTagName('body')[0].style.backgroundImage = ''
}
Array.from(document.getElementsByTagName('img')).forEach((img) => {
if (img.src.includes('/user_avatar/forum.vashta.io/vaeb') && !img.className.includes('vaeb-effect')) {
for (let i = 0; i < checkedImages.length; i++) {
if (checkedImages[i].isSameNode(img)) return;
}
checkedImages.push(img);
img.className += ' vaeb-effect';
}
});
}
var checkExist = setInterval(checkExistFunc, 400);
checkExistFunc();
```
You would have to adjust to fit your needs.
---
### Author:  [@Ensar](https://meta.discourse.org/u/Ensar)
#### Post date: [June 21, 2018, 2:49am UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/11 "2018-06-21T02:49:16Z")
Uhm, I don’t fully understand how could I use that code. 😂
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 21, 2018, 10:16am UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/12 "2018-06-21T10:16:04Z")
Here is a brief synopsis of the parts you need to know about.
```plaintext
if (document.getElementsByTagName('title')[0].innerHTML == 'Profile - Vaeb - Vashta' && document.getElementsByClassName('number').length) {
```
Targets the Profile Page for a user with a username of ‘Vaeb’ and a sitename of ‘Vashta’. You will need to update this to be reflective of your site and username
```plaintext
document.getElementsByTagName('body')[0].style.backgroundImage = 'url(http://modestowebdesigns.com/wp-content/uploads/2014/09/website-design-slider-background-stockton.jpg)';
```
For a Profile Page that matches the targeted username and site name, change the page background to the image URL provided. You will need to update this to point to an image on your site.
```plaintext
if (img.src.includes('/user_avatar/forum.vashta.io/vaeb') && !img.className.includes('vaeb-effect')) {
```
For each image on the page, check to see if it is for the avatar for the user ‘vaeb’ on the site ‘[forum.vashta.io](http://forum.vashta.io)’ and that it doesn’t already have the “red-border” effect given to it (aka, the ‘vaeb-effect’). You will need to define a CSS class named `.vaeb-effect` that does the red border or better, rename it to something else and when you update this code, you alter its name to be more reflective of your site.
```plaintext
var checkExist = setInterval(checkExistFunc, 400);
checkExistFunc();
```
Run this logic every 400 milliseconds and when the page first loads. You don’t need to change this, but I felt this worth pointing out.
---
### Author:  [@Ensar](https://meta.discourse.org/u/Ensar)
#### Post date: [June 21, 2018, 2:09pm UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/13 "2018-06-21T14:09:05Z")
Thank you, but I’m very confused as that looks like JavaScript code and it only accepts CSS/HTML. So..
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 21, 2018, 10:58pm UTC](https://meta.discourse.org/t/how-do-i-make-css-changes-in-my-discourse/89966/14 "2018-06-21T22:58:55Z")
It doesn’t only accept CSS/HTML, it very much accepts JavaScript. That is what the ` ` section is for (and ``).
---