[OUTDATED] ★ Tetra's CSS Guide ★

@gayfeatherstar

I viewed your page source - you did everything correctly, but there's this extra line at the top of your code:

@-moz-document domain("wolvden.com") {

Not sure if that was pasted intentionally, but deleting this line (including the bracket right in front of ("wolvden.com")) should make the code work again.

Hello! This guide has been tremendously helpful! :D
Is there any way to change the color of that little grey bar on the bottom of the sidebar perchance? I'm able to change the rest of the background color no problem, but that little footer bar just won't cooperate.

@CarrionYote

The gray bar on the sidebar squares is actually the bottom border of the squares. To change the color, this would be the code:

#sidebar .card {

   border-color: /* insert color code here */;

}

Oh thank you! I'm very new to coding so I wasn't sure what the selector for that specific piece was ;;
Yr an absolute icon for being so helpful! :D

I had a question, how would we be able to change the pictures on the Pack over view, dynasty, breeding and nesting boxes? You can do it temporarily by changing the code directly on the page's own html, using the tool options for the page, but it always reverts back the moment you reload the page, I've tried a few different things that I thought might work within my coding file, but none of them have worked out for me with changing them...

and how do we do div boxes?  ;w;   I do what everyone says to do but I think I'm still doing something wrong with it, I can never make any. Also, is there a way to remove the green around the info section of your page? Like where it says Played by, Territory biome and what-not? Lastly, and I'm sorry this has been so long, is there a way to change text color over certain elements only? I can change the page's text, but that changes everything on it to white, in my case at least. Some of the text on my page can be really hard to see, since my page is relatively dark as of now, but I don't want to change everything to white, because that also makes things hard to see/read. 

With div boxes I'm aiming for the semi transparent ones that kinda light up when you hover the mouse over them, and those that can extend (I've even seen den boxes that have had this before, so I'm really curious about expansions and what-not).

@Bāche

Unfortunately I haven't yet figured out how to change the dynasty/nesting/etc box images either, at least not individually. So far I've gotten code to change each of the images, but each of the boxes will show the same exact image. Nonetheless, here's the code:

.form-row .card-img-top {

    content:url(IMAGE-URL-HERE);

}

Re: div boxes, since answering this already I've learned a little more about building div boxes but it's still a complicated enough subject that would be better reserved for a future minitutorial. However, I can give you some basic information right off the bat:

Boxes require both CSS and HTML; in your den or profile's Code Editor, underneath a <link rel=... line, you should have written out a line resembling this:

<div class="mybox"> content goes here! </div>

This creates a 'box' element on your page, and attributes it to the name 'mybox'. You may now use the class name .mybox as a valid selector in your css file. Which means that your code for making your box actually work should take place in your external css file and would resemble this block:

.mybox {

   width: 300px; height: 200px;

   overflow: auto;

   /* more code to make your box work */

}

For changing the way a box would look on hover, you would have to write another block targeting your box in its hover state, like so:

.mybox:hover {

   /* code for your box when being hovered... change transparency/size here, etc */

}

Re: text color changing, you should be able to target individual selectors and use the color property on whichever you choose, instead of using color for the whole page body or the page's #main section. As an example, this code should change your sidebar boxes' text color to red, but leave the rest of the page alone.

#sidebar .card {

      color: red;

}

You can also change the page body's text color first, then override color later in individual blocks, using !important.

And lastly... I don't actually understand what you mean by "the green around the info section of your page", I looked where you mentioned the green would be but I don't see any. Do you mean the Lead Wolf's green card section? That would be .border-none .card-body, you can remove that green by using background: transparent!important;

You're a saint, thank you for helping Tetra!

ah bu I was talking about this green thing, around like the information part of the page, for the player thing and territory biome and stuff, as I'd said before. Is this not visible to other people?  :o

Hi! I was wondering if you could help me change the color of this little green sliver underneath the "save changes" button. Or get rid of it all together. Either way,  just haven't been able to figure it out.

.

Also, is there a way to change the colors of these:

The red "remove" link under the featured wolf

The little gender symbol under my lead wolf's picture

And the green text here:

Thanks in advance!

@Crow

Woah, nice profile!

The green sliver is the button's bottom border:

.text-right .btn, .text-center .btn {

   border-bottom-color: transparent;

   /* OR replace 'transparent' with a color code to change its color */

}

The Featured Wolf's removal button:

.featured-wolf .btn {

   color: /* insert color code here */!important;

}

The 'Breeding Male' gender symbol:

.border-none .card .fa-mars {

   color: /* insert color code here */!important;

}

The 'Last Active' text:

.right .text-success {

   color: /* insert color code here */!important;

}

These all require !important to work.