is this thing even supposed to be styled easily??
From the look of it, no; it would not be easy-- but it is not impossible per-se, as I will elaborate.
can't, it just doesn't appear the image at all
I agree that the relevant HTML elements are not currently tagged specifically enough to do this in straightforward way: for example, there's no `id` attribute to let you to directly target each icon-link there. For this reason, one needs to know his way around his browser's DOM Inspector wand as well as CSS level 2 scripture quite thoroughly, to be able to see a workaround for this case.
The workaround I'm going to introduce you to does works somewhat, but is
fragile; especially in the moments that
you aren't logged in, or when you set your browser to not allow cookies.
From now on, I'm going to assume that A. you're using the
default MelonLand theme, B. your browser accept cookies, and C. you're either logged in, or not logged in but have navigated within the forum through at least 1 click already. The latter part may sound like weird set of conditions for some black-magic voodoo at work, but it is actually a part of fragility I've mentioned.
(Series of long posts follows;
TLDR and fragility explanation at the end)
When you used DOM Inspector on the "Home" icon in the
default MelonLand theme, you would see that it was nested in the following HTML elements hierarchy:
+ <html lang="en">
+ <body id="theme-melon">
+ <div id="wrapper">
+ <p align="center">
+ <a href="https://forum.melonland.net/index.php">
+ <img border="0" alt="Home" src="https://forum.melonland.net/Themes/pimp-my-classic/images/english/home.gif">
To scale this mountain of tag soup, it is useful to know that apart from element ID and class,
CSS is actually able to select an element by its exact attribute value as well; by using the following ruleset format:
elementName[attributeName="attributeValue"] {
/* Add rules to apply here. */
}
Newly equipped with this knowledge, you might get tempted to just select whatever `<a>` element which got attribute `href` with exact value "
https://forum.melonland.net/index.php" (i.e. linking to forum home), and manipulate or obviate that... However, elements matching this simple criterion are by no mean limited to the top navigation bar's "Home" icon: the "MelonLand Forum" link in the forum-backtracking list right under the "News:" quip bears that characteristic too; and it will get mis-manipulated as a collateral damage.
So how could we actually laser-focus select the `<a>` element of the Home icon despite it having no `id` attribute? My answer is: by using a combo of targeting nearest-ancestor element with `id`, using direct-child CSS selector, and relying on
some luck. (Yes, seriously!)
You would notice that the nearest ancestor of the `<a>` tag, which actually bear `id` attribute, is the `<div id="wrapper">`: HTML specifications decreed that a value of an `id` attribute used must be unique within that document; this mean since
@Melooon put `id="wrapper"` there, you could be damn sure it is going to match only with that specific element, and not any other things on the page.
But simply selecting just `#wrapper` doesn't get you there; it's just a
grandparent of our target. To select a direct child element of something, you would have to use the following ruleset format:
parentElement > childElement {
/* Add rules to apply here. */
}
In this case, we would have to select a specific `<p>` element residing directly under that `<div id="wrapper">`; but doing just that is quite sloppy-- because there's no `id` to use here here, we will want to be as specific as possible. But our only pointer available is it being a `<p>` element with attribute `align` bearing value "center", which doesn't sound very specific at all...
And this is where
luck comes into play: I have checked in the code of the pages, and it turned out that among the elements directly nested under that `<div id="wrapper">`, there happened to be
only one `<p>` element which had `align="center"` on it-- and it is the exact parent element we would like to select.
To select it, we would combine both styles of CSS selector together:
#wrapper > p[align="center"] {
/* Nope, this is just the top navigation bar. */
}
^ This very `<p>` element is actually the main part of top navigation bar: it hosts all the navigation buttons in the center (from "Home" to "Register"; or "Home" to "Logout" when you're logged in).
Now, do you still remember what I said near the beginning about `<a>` element which linked to the forum's home? Within this top navigation bar, there is
only one thing that linked to the forum's home: the link that encloses "Home" icon. So in this scope, we could safely select a direct child by a criteria of `<a>` tag with specific `href` attribute value, without any fear of erroneously fishing out something unrelated now:
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php"] {
/* Yeehaw, rules written here would now apply to Home icon-link! */
}
Posts: 40/1k.beats 
More is More 
Author
