[OUTDATED] ★ Tetra's CSS Guide ★

Ok! thanks you guys! I was worried there for a second :,))

Hey there! I have a quick question :)
If I were to do the coding from directly on my den page, would that work or do I need to download something?

@Chuumi

Wolvden's code editor erases CSS, so sadly you can't do it on your den page directly. The guide should state that you write out your code on a notepad. This could be your desktop's default notepad, or a third-party one such as Notepad++, as long as the notepad program can export the file into the .css format.

Hi Tetra! If you have a moment I would really appreciate a quick look over for my HTML thread code. I'm having a issue with margins and my rounded corners remaining when I post, hoping a more skilled eye can help me catch the issue. 

Heres my thread with visuals and the code:

wolvden.com

Thanks for any help you or anyone else can offer ♡♡

@VehementRed

I'm currently separated from my computer for a bit, but I'll definitely take a look at what you have as soon as I'm able.

So I've managed to change my den CSS rather extensively, however I've run into a problem with the "modbox" link on the top right. (The problem is currently live on my den CSS atm if you want to look there, otherwise I also have screenshots)

This is what happens when I change the font size of the top bar (den/crossroads etc) to 22px like I want it to be but have the smaller nav (the welcome back one) to 15 px;


I assumed that would be no big deal, so I just used the "span.d-none.d-md-inline" and "i.fa.fa-box::before" codes to change the text and actual box size to 15px but when I do that, it looks like this;

It literally moves the text/box down slightly, and while it's not that big of a deal I've been fighting with it for over 30 mins trying to get it in the right position but it either stops working as intended (as in is no longer black font color and no longer changes color on hover) or it just stays slightly down.

I know it's possible to make the top nav bar (den/crossroads) and the small nave bar (welcome back and messages etc) to be different font sizes without breaking it because I've seen it done but idk what I've done here tbh. 

@Kaliyana

Sorry for the late response! Life stuff happened. But I have investigated your code predicament and figured out what might be up:

.navbar li a {

color: #000000 !important;

text-transform: lowercase !important;

font-size: 25px !important;

}

The highlighted line here seems to be causing the issue. The .navbar li a selector selects all links that are wrapped in a li and in any container under the .navbar name - including the status navbar. This makes each link (not sure why it affected only the modbox one, huh...) in the status navbar follow this rule too.

If you were intending for the big navbar buttons to inherit this 25px size, you should write this line under the .navbar-main .nav-link selector (not just .navbar-main since each link is actually wrapped in its own .nav-link container).

In fact, it's best to use separate selectors such as .navbar-main for the big navbar and .navbar-status for the status bar, rather than the all around .navbar since the latter affects all navigation rows, including the one on the main profile body of the page.

@Kaliyana

Re: starting over; my thought on this is that if code ends up being tangled beyond management, then it does save a lot of time to start from a blank, and slowly and carefully work your way through the design; this will, more often than not, result in a code that is more minimal and easy to understand/troubleshoot. Start by defining .navbar-main, then move onto .navbar-status, then move onto... etc.

I went and tinkered with the nav section of your code in Stylus; some of the selectors are a little all over the place, which is probably the main issue. If fixing one thing makes another thing break, you may be writing code in blocks under shared selectors or multiple selection, which can be hard to keep track of.

I have a little hack for discerning the effects of selector blocks: put the rule border:1px solid red!important; inside any block, and your design will "show" you what part of the page that particular block is affecting. This may help you troubleshoot why the style for one piece of the page may be affecting some other distant piece of the page - it may be that both pieces actually share a common selector name.

Also, if you want - and only if you want, I understand that this is your code - I can help you out with a little rewrite of the nav design with helping comments.

This has been so helpful and CSS is surprisingly fun to learn! Thank you!

I'm running into a bit of a problem with the background though; each time I add a background to my page in general (under the "body" section of code), the image becomes far too big and I can only see one part of the picture which is super blown out. Is there a certain size the image has to be for all of it to show up at once on the page? Hopefully that makes sense ^^'