This page is a WIP. If you notice a problem at any time, please report it to my Reddit account or my JAI account. If there is something you would like added to this guide, or if you would just like to ask me a question / message me, please use the above links as well. Thank you.

This guide is for users who already know the basics of CSS for JAI profiles. If you are brand new or find yourself struggling, I recommend checking out either LunaXLee's guide or Ohshii's guide.

More Advanced Usage of CSS for JAI Profiles

By u/IWasTheSyntaxError (Reddit) / NullPointerException (JAI)

Thanks for the support! This is the site I will be using for my CSS guide.

I don't have any experience using rentry, so forgive me if this looks a little plain. This guide will likely take some time to complete. Thank you for your patience!


As mentioned before, this is a work in progress (WIP). Even the parts not explicitly marked with WIP may still be in progress and not necessarly complete or even fully correct. Additionally, I am not a professional. I have had formal training in HTML and CSS, but I will not claim to be an expert. It's also been a bit. My explanations may be off or not fully correct. If at any time you come across something you think is wrong, misleading, or just not a good enough explanation, please let me know so I can address the issue. Thank you.

The first section of this guide will explain CSS in general, without going in depth into uses for your profile. This is for people who want to understand how the CSS works or people who want to do things in their profile that isn't found in copy-and-pastable snippets of code.

The second section of the guide will explain HTML. This is so you can better add HTML to your profile, which you can then edit with CSS. By adding your own HTML you are also able to effectively override anything you don't like on the default JAI profile.

For copy and paste code, please check out this page instead.

Table of Contents


General CSS

This section will explain what some more advanced things are in CSS and how to use them. The explanations will avoid being JAI specific. The purpose of this section is to teach you how to use CSS and what is possible so that you will be able to do things on your own or even come up with new things. If you are here to only learn JAI specific usages, skip to that section (though keep in mind that I may use things explained in the previous sections).


Selectors

Selectors are used in order to, well, select the element you want to address with your CSS. If you've edited your profile before, you've probably used something that looked a little like .css-45247. This is an example of a class selector. I will go over four selector types, but there are many more. You can see them all here. If you consider yourself comfortable with classes, feel free to skim this section. Of the selectors listed here classes are definetly going to be the one used the most. Maybe even the only one you use, depending on what you are doing.

element

The element selector selects all of a certain element. An element is seen in HTML like this: <p> <h1> <a> <div>.
Ex:

1
2
3
4
5
6
h1 {
    color: white;
}
p {
    font-size: 16px;
}

This is most often used to select all of a certain type of element. Like, for example, if you wanted all normal text <p> to be black. Or if you wanted all titles <h1> to be larger. A larger explanation into the different types of elements can be found in the HTML section of this guide.

#id

The #id selector selects the element with a certain id. You likely won't be used for JAI profiles unless you use custom HTML. The selector starts with a hashtag '#' then has the id.
Ex:

1
2
3
#id {
    background-color: black;
}

ID's are most commonly used to select a singular element. You won't come across any id's editing you JAI profile unless you add them yourself in your HTML.

.class

This is the most commonly used selector, especially for JAI. You've probably used classes before that look like .css-32873 or .css-jfj9e8.
Ex:

1
2
3
.class{
    background: transparent;
}

Classes are used to select all elements that you want to be a certain way. JAI seems to normally use a different class for each element, but normally classes would be used over many seperate elements. They would be used to give the same styling to many different things. For example, you could have a class called boxWithBlackBorder. The class's CSS could apply a black border:

1
2
3
.boxWithBlackBorder{
border: 2px black solid;
}

This class could then be attached to any element in HTML, giving that element a black border. For JAI profiles, you will most commonly use classes to select already existing elements on the page, unless you make your own using HTML.

[attribute]

Attribute selectors are more complicated than the previous ones so far. These can be used to select an element while a certain value is met. There are several attribute selectors, but I will only be going over the one you will likely use the most. If you wish to see the rest, you can find them here.

[attribute=value]
Using this, you can check if an element's attribute is equal to a certain value, like if [data-following="true"]. (yes, this is what you would use to make the following button change if you are being followed vs if you aren't).
Ex:

1
2
3
[checked="true"]{
    color: black;
}

Attribute selectors can also be combined with other selectors.

1
2
3
4
5
6
.class[attribute="false"]{
    color: white;
}
p[attribute=value]{
    opacity: 50%;
}

You can also use attribute selectors to check if an element simply has a certain attribute, like open.
For your JAI profile, you will normally use attribute selectors for either the follow button or dropdowns.

1
2
3
.class[open]{
    color: black;
}

An example of how you would use this with a <details> and <summary> (A dropdown expanding section):

1
2
3
4
5
6
summary{
    background: pink;
}
details[open] summary{
    background: green;
}

You might notice that I used two different selectors in the same block: details[open] and summary. This leads into our next section, combinators.


Combinators

Combinators can be put between simple selectors for more advanced selection of elements. For this section there area few key terms to understand.

Parent
A parent element in HTML is an element that contains other elements.
Ex:

1
2
3
<div class="css-1bn1yyx">
    <h2 class="css-dydlef">Text goes here</h2>
</div>

In this instance you can see that the <h2> is within the <div> and </div> tags (The </> designates the end of a container element).
In this example the <div> is the parent of the <h2>.

Child
A child element is the opposite of a parent element. Going back to the example from before:

1
2
3
<div class="css-1bn1yyx">
    <h2 class="css-dydlef">Text goes here</h2>
</div>

The <h2> element is the child of the <div>.

Sibling
Sibling elements are elements that share the same parent. Let's modify the example:

1
2
3
4
<div class="css-1bn1yyx">
    <h2 class="css-dydlef">Text goes here</h2>
    <h3 class="otherText">Smaller text goes here</h3>
</div>

In this example the <h3> and the <h2> are siblings as the direct parent of both of them is the same.

Grandparent/grandchild
Exactly what it counds like considering the prior examples. A grandparent element is the parent of the parent of an element, and the grandchild is the inverse. Ex:

1
2
3
4
5
6
<div class="css-1uodvt1">
  <div class="css-1bn1yyx">
      <h2 class="css-dydlef">Text goes here</h2>
      <h3 class="otherText">Smaller text goes here</h3>
  </div>
</div>

The <div> with the class css-1uodvt1 is the grandparent of the <h2> and the <h3>.
The <h2> and the <h3> and the grandchildren of css-1uodvt1.

Descendant

Now that we've had our little HTML lesson, back to the CSS. The first type of combinator and the most simple is the descendant combinator. It use it looks like this: . That's right, its a space. Let me show you an example:

1
2
3
.css-y4132 .css-6132{
    color: white;
}

In this instance, all elements with the class .css-6132 that have a parent with the class .css-y4132 are given a white text color. You may be asking: "Why do it like this? Doesn't this have the same effect as just putting .css-6132?" Well, you wouldn't be wrong - in some cases. Imagine there are multiple elements with the .css-6132 (this does occur with some of the JAI elements on the profile). How would you address one without addressing the other? You can include its parent in order to make the selection more specific.
Another example:

1
2
3
div .css-6132{
    color: white;
}

This selects all elements with the class css-6132 that are children of a div. Note that this does not affect the div, only the css-6132 gets its text color changed.

Next Sibling (WIP)

Subsequent Sibling (WIP)


Pseudo-Classes (WIP)

:hover (WIP)

:active (WIP)

:has() (WIP)

:nth-child() (WIP)

:placeholder-shown (WIP)


Pseudo-Elements (WIP)

::before and ::after (WIP)

::placeholder (WIP)

::selection (WIP)


Faking Animation (WIP)

transition (WIP)

transform (WIP)

translate
rotate
scale


Styling (WIP)

This is going to be a long one...


HTML (WIP)


Elements (WIP)

Text (WIP)

Div (WIP)

Images (WIP)


Attributes (WIP)


Positioning (WIP)

Absolute (WIP)

Fixed (WIP)

Relative (WIP)


JAI Specific Implementation (WIP)

Specific examples will go here. Eventually. I wrote so many topics...

Edit
Pub: 04 Feb 2025 07:09 UTC
Edit: 11 Feb 2025 07:29 UTC
Views: 705