This tutorial will cover the more involved aspects of CSS and what you can do to your profile page with a style sheet. I'll be using Chrome's "Inspect Element" feature a lot, if your browser has something similar then by all means follow along, just bear in mind that all of my examples will be using Chrome.
The CSS itself isn't typically browser specific, so unless you're running Netscape Navigator there's still plenty here you might use.
This tutorial is under construction! If you're reading this it's nowhere near a finished state!
The CSS itself isn't typically browser specific, so unless you're running Netscape Navigator there's still plenty here you might use.
If you want to change an element, first you need to know how to point to it. All the HTML styles in W3Schools won't help you change something unless you know what element you're applying them to.
Begin by right-clicking on the element you want to change and picking "Inspect element" from the bottom of the menu list. Say you want to manipulate the row of options above your wall that says "Wall, Deck Folders, Recent Comments, etc", right click on "Wall" and inspect it. This will bring forth a flood of information including the page's source in expandable tiers, all the CSS affecting the highlighted element, and the Chrome Console. Here's an example, broken down:
Here's arpoximately what you'll see when you inspect "Wall" on your profile page. A bit overwhelming at first, but there are only a few real points of interest for someone just looking to edit their page in CSS.
This is the page's source presented in a collapsable hierarchy. The line at the very bottom is where most of the magic happens, because that line lists the elements qualified all the way down to the element you inspected.
Here, we see I inspected "div.row div.col-lg-7.col-md7 ul.nav.nav-pills li.active a" with a few other divs further up the line. The beauty of this window is that if you mouse over a line in this window it will highlight the corispoinding element in the page so you can better understand how the page is broken down. If you mouse over
- you will see that this unordered list is the row of options at the top of your wall, and
is the column that houses all the elements on that half of the page.
It all comes down to "nav.nav-pills li.active a", which is exactly what "Wall" is when we clicked on it, and if you add rules for that element to your style sheet you will change the apperance of the Wall pill. Things get a little tricky with what you'll actually be changing because of the .active bit, but I'll come back to that.
It all comes down to "nav.nav-pills li.active a", which is exactly what "Wall" is when we clicked on it, and if you add rules for that element to your style sheet you will change the apperance of the Wall pill. Things get a little tricky with what you'll actually be changing because of the .active bit, but I'll come back to that.
This is a list of the style sheets loaded by the page that are pointing to this element. This window is extremely useful because you can add attributes to the element from this window and see how it affects your page, letting you get a sense of what you're editing and what you need to do.
Coming eventually.
Coming eventually.
Coming eventually.
Coming eventually.
Coming eventually.
Updates Add
Comments
Attention! Complete Comment Tutorial! This annoying message will go away once you do!
Important! Formatting tips — Comment Tutorial — markdown syntax
Please login to comment
| Date added | 8 years |
| Last updated | 5 years |
| Legality | This deck is not Unknown legal. |
| Cards | 0 |
| Folders | Tutorials & Examples, Coding, Tutorials & CSS, EDH (HELP), CSS Page Styling, Customizing TappedOut Pages, Templates, Tappedout Tutorial, Edit Tappedout, Coding |
| Votes | |
| Ignored suggestions | |
| Shared with | |
| Views |