How do I make CSS changes in my Discourse?

[Ensar]

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.

[Cameron_D]

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.

[Ensar]

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.

[Cameron_D]

It can all be done already, without any plugin.

[Ensar]

Well, I don’t know how actually.

[Cameron_D]

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:

.user-main .about .details img.avatar {
   box-shadow: 0 0 10px 3px #f00;
}

[Ensar]

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.

[Cameron_D]

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.

[Ensar]

how to make it for admins only?

[cpradio]

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

    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.

[Ensar]

Uhm, I don’t fully understand how could I use that code.

[cpradio]

Here is a brief synopsis of the parts you need to know about.

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

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.

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’ 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.

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.

[Ensar]

Thank you, but I’m very confused as that looks like JavaScript code and it only accepts CSS/HTML. So…

[cpradio]

It doesn’t only accept CSS/HTML, it very much accepts JavaScript. That is what the </body> section is for (and </head>).

[Ensar]

OH! I didn’t knew that, but still it’s hard for person who doesn’t know to code to understand that… I really don’t.

[cpradio]

If you are uncomfortable with coding then you should post something in #marketplace. A budget of $150-200 and pointing them to this topic would likely be enough to get the user profile customization. Any additional changes would increase budget needed.