If you're going to use this tutorial be sure to read it carefully. An incomplete understanding of what you're working with can lead to disaster, and if you manage to break your page so thoroughly that an admin needs to fix it they're going to be very cross. If something's confusing or ambiguous then please ask about it, but never under any circumstance use code you don't understand.
Always keep in mind that our freedom to customize our pages is a privilege, not a right. Don't do anything that renders your page unreadable, misleads the viewer, makes your page unusually resource-intensive, or otherwise makes viewing your page particularly obnoxious.
Always keep in mind that our freedom to customize our pages is a privilege, not a right. Don't do anything that renders your page unreadable, misleads the viewer, makes your page unusually resource-intensive, or otherwise makes viewing your page particularly obnoxious.
This tutorial covers the very basics of linking your profile to a style sheet and editing your profile page with that style sheet. I'll cover how to set up a background and fiddle with the major page elements so you can see it, as well as some very basic CSS. While it is possible to add a background image to your page with just HTML, it's not particularly useful because you can't modify other elements to match it or make them transparent to see it.
It may seem daunting, but all the work is in getting set up and none of the steps are very difficult, they just take some time to explain. Once you have a sheet linked to your page editing page elements is really easy and intuitive.
It may seem daunting, but all the work is in getting set up and none of the steps are very difficult, they just take some time to explain. Once you have a sheet linked to your page editing page elements is really easy and intuitive.
A style sheet isn't anything special. Just right-click anywhere on your desktop, go to "New ▸" and select "Text Document". Name it whatever you like, just change the file extension from .txt to .css and you'll have a blank style sheet.
You can also open Notepad and stick .css on to the end of the name as you save a blank file. Doesn't matter how you do it, just get a text file, change the file extension and you're there.
A style sheet contains rules that websites use to modify the "style" fields of HTML elements. These rules are always written "element { rule(s) }". Here's an example, using the element, which is used for links:
a
{
font-weight: bold;
color: yellow;
}
A style sheet with this rule in it would change the "color" and "font-weight" style of every tag on the page, making the light-blue text you typically see for links yellow and bold.
The rule above will modify every link on a page, but what if you don't want to change every part of the page? In CSS elements can be qualified so that rules refer to specific elements, this is done by adding elements that are "higher" in the page's code before the element you want to modify.
So what if you wanted to limit the rule above to just, say, your page's wall? The name of that element is #wall, which is found in .well. There are no other elements on your page with the ID #wall so you don't need to qualify #wall, but since there are other tags you need to qualify or you'll affect them all. A qualified rule looks like this:
#wall a
{
font-weight: bold;
color: yellow;
}
Qualifying elements is far and away the most complicated part of CSS. The style rules are all easy to understand HTML attributes like "font-size:" and work with any relevant element, pointing to the right element is where things get tricky. I'll cover selectors and hunting for page elements in a later tutorial, this is more than enough to get your page up and running.
Don't worry about adding rules or styling anything yet. A completely blank .css file is just fine for now.
Once you have a style sheet you need to host it publicly so TappedOut can fetch it. I use Google Drive, but I know a lot of users here use Dropbox so I'll cover how to use both.
Upload a style sheet or create one on your drive. Right-click on it from the Drive menu, choose "Share..." and set it to "anyone on the internet can find and view". I recommend creating a new, shared folder just for TappedOut and working out of that folder.
With a standard, free account, any file you upload should be shared by default. If you want to be sure check the sharing settings and make sure it's set to "anyone with a link can view."
To link your newly hosted sheet we need the direct link to it. Unfortunately, when you ask either host for a link to your file it will give you a link to view that file, not a link to the file. You must edit the viewing link manually to get the direct link.
Right-click on the file and select "Get Link". The link Google Drive gives you will look something like this:
https://drive.google.com/open?id=0B_ilMQix33W4SXhPaHZiWWFhU3c
You have to replace /open? with /uc?export=download&. The direct link looks like this:
https://drive.google.com/uc?export=download&id=0B_ilMQix33W4SXhPaHZiWWFhU3c
https://drive.google.com/open?id=0B_ilMQix33W4SXhPaHZiWWFhU3c
You have to replace /open? with /uc?export=download&. The direct link looks like this:
https://drive.google.com/uc?export=download&id=0B_ilMQix33W4SXhPaHZiWWFhU3c
The "Share" link Dropbox gives you will look something like this:
https://www.dropbox.com/s/jek8ucnlymoseem/ExampleCSS.css?dl=0
You have to change www.dropbox to dl.dropboxusercontent and can optionally delete the ?dl=0 from the end. The direct link looks like this:
https://dl.dropboxusercontent.com/s/jek8ucnlymoseem/ExampleCSS.css
https://www.dropbox.com/s/jek8ucnlymoseem/ExampleCSS.css?dl=0
You have to change www.dropbox to dl.dropboxusercontent and can optionally delete the ?dl=0 from the end. The direct link looks like this:
https://dl.dropboxusercontent.com/s/jek8ucnlymoseem/ExampleCSS.css
Take the direct link from the step above and plug it into a tag. tags are used to link websites to external resources; the rel field defines the relationship between the site and resource and the href points to the resource. For the above example using Google Drive, we get a line of HTML that looks like this:
Drop that line in your user description and your page will be linked to your stylesheet.
Now that your page is linked to your sheet the rules in your sheet will affect your page. I edit the file directly from Google Drive using Drive Notepad, but you can use whatever editor you like. If you go to upload an updated style sheet to Dropbox it should preserve the link as long as the new file has the same name as the old one.
To change your page's background you need to modify the background image attribute, defined by "background-image", of the #sitebody element. If I want my background image to be this picture my style sheet would have the following in it:
#sitebody
{
background-image: url('http://i.imgur.com/FMvTJ5k.jpg');
}
Note that this attribute can be applied to a lot of elements. "Background-image" is modifying the element #sitebody, not the background of the page, it just so happens that the element #sitebody comprises the entire page. Making this distinction is essential to really understand how stylesheets work.
Make sure you're using an image hosting service like imgur. Linking to a resource uses the host's bandwidth, and a service that isn't a dedicated host may block you from accessing it or change the file to something amusing.
As with the style sheet, you need to use the direct link to the image you want. Most image hosts will provide a direct link when you upload an image, but if you need to find it yourself you can get the direct link by right-clicking on the image and choosing "copy image link", or view it in a new tab and copy the URL.
The big elements on your user page are as follows:
| #sitebody | The highest element in the hierarchy we'll bother with. Contains the other elements and the default background |
| .navbar-fixed-top | This is the bar at the top of the page that links to Deck Builder, Cards, etc |
| #masthead | The container below the navbar that showcases featured decks and advertisements |
| .jumbotron | Container for your user name, user title, and your bio. Also handles the footer at the bottom of the page |
| .navbar-default | Solid off-white bar that links to your threads and deck folders |
| .well | Your wall, recent comments, views and so on |
| .deck-row-lg | Listed decks |
| .col-md-5 .table | The table below your decks that shows your stats |
You'll want to define styles for all of these elements if you want something with a consistent look. An easy way to do this is to pick a color that shows up against your background and apply it to all of your elements. Making them transparent using rgba() (that's red, green, blue, and alpha channel which sets transparency) will allow your background to show through.
The example sheet I linked to earlier is annotated and functional if you want to look at a simple, working sheet that's easy to read. It's currently linked to my old user page if you want to see what it looks like.
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
| Top Ranked |
|
| Date added | 8 years |
| Last updated | 5 years |
| Legality | This deck is not Unknown legal. |
| Cards | 0 |
| Folders | Tutorials & Examples, Stuff, Reference, Stuff to Know, Tutorials, Others, tutorials, Help, User Page, Deck Plans |
| Votes | |
| Ignored suggestions | |
| Shared with | |
| Views |