Home Events! Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
December 12, 2024 - @189.88 (what is this?)
Forum activity rating: Three Stars Posts: 32/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts    Start New Topic
News: :dive: Are u having fun?? :dive:

+  MelonLand Forum
|-+  Forum Hub
| |-+  ⛄︎ ∙ Forum Info & Questions
| | |-+  how do I actually replace the home navbar icon


« previous next »
Pages: [1] Print
Author Topic: how do I actually replace the home navbar icon  (Read 429 times)
Zunne
Casual Poster ⚓︎
*


Mmm... Ice Cream...

⛺︎ My Room
XMPP: Chat!

View Profile WWW

Joined 2024!
« on: July 22, 2024 @986.70 »

how ironic, I'm so sorry if I sound rude but is this thing even supposed to be styled easily??
Logged

I wonder why i like ice cream so much?
Melooon
Hero Member ⚓︎
*****


So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

Thanks for being rad!a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!...
« Reply #1 on: July 23, 2024 @871.39 »

Sorry for the quick reply; but your best option would be to hide the image and then set a new image using the background-image property ^^ Its definitely possible, but needs some figuring out  :ha:
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
Zunne
Casual Poster ⚓︎
*


Mmm... Ice Cream...

⛺︎ My Room
XMPP: Chat!

View Profile WWW

Joined 2024!
« Reply #2 on: July 24, 2024 @967.07 »

Sorry for the quick reply; but your best option would be to hide the image and then set a new image using the background-image property ^^ Its definitely possible, but needs some figuring out  :ha:

can't, it just doesn't appear the image at all
Logged

I wonder why i like ice cream so much?
xwindows
Casual Poster
*

⛺︎ My Room

View Profile

Joined 2024!
« Reply #3 on: September 29, 2024 @507.95 »

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:

Code
+ <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:

Code
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:

Code
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:

Code
#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:

Code
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php"] {
	/* Yeehaw, rules written here would now apply to Home icon-link! */
}
« Last Edit: October 03, 2024 @523.72 by xwindows » Logged
xwindows
Casual Poster
*

⛺︎ My Room

View Profile

Joined 2024!
« Reply #4 on: September 29, 2024 @518.88 »

(Continued from the last post)

But if you plan to have a custom Home icon (or not having Home icon at all), you can't let @Melooon's original Home icon linger around: you ought to select and obviate that first!

However, if you looked at the elements nesting tree I gave near the beginning of my first post, you would see that the innermost `<img>` element doesn't have `id` element either; so we now have to count on our luck again...

And as lucky as we are, there is just only one child element inside the Home-link element, and that is the very `<img>` element of the Home icon we're looking for. With the path known, we now select, annnnndddd... begone!

Code
/* Actual code now: */
/* Kill off the original Home icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php"] > img {
	display: none;
}
With the original icon taken care of, we now have to find some way to inject our own stuff in place if it; and CSS has some magic trick we could use for that: the conjuring pocket of `:before` selector, which has the following ruleset format:

Code
someElement:before {
	/* Conjure stuff here. */
}
This selector would cause things you conjured in CSS to get prepended to the inside of that someElement. The specifics I just said are important, because it could be tempting to just select the original Home icon again and conjure things there-- only to find out that things you conjured end up inside/as-a-part-of that original Home icon which then promptly get obviated by our earlier spell! (1)

So the next best place to conjure our custom home stuff, is the Home link element itself.

The next relevant CSS tidbit you need to know here, is the actual rule which you cast to actually conjure stuff is called `content:`, which can be followed by various things-- and here is the fork in your magical journey you need to decide: would you like to just have a text "Home" for the link (choice A), or would you rather have your custom Home icon (choice B)?

For choice A: you conjure text "Home" by just double-quoting it as a value of `content:` rule...

Code
/* Actual code now (choice A): */
/* Add custom "Home" text for forum-home link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php"]:before {
	content: "Home";
}
For choice B: you conjure your custom Home icon by hosting your icon file somewhere, wrap its URL between "url(" and ")", then put that as a value of `content:` rule...

Code
/* Actual code now (choice B): */
/* Add custom icon for "Home" link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php"]:before {
	content: url(https://your.web.site/path/to/your/icon.type);
}
^ Don't forget to replace "https://your.web.site/path/to/your/icon.type" with your actual icon URL.



This is what happened when I applied the spells (choice A) using User Styles add-on in my browser:


^ You would see that the Home link-icon was nowhere to be found; and in its place, you'd now see a "Home" link text I conjured in its place.

The full overlay CSS code ("spells") used here is:

Code
/* Kill off the original Home icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php"] > img {
	display: none;
}

/* Add custom "Home" text for forum-home link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php"]:before {
	content: "Home";
}


(1) Technically, this will not work anyway, because Home icon is an `<img>` element; and you cannot put anything inside `<img>` element. However, this technique works with other kinds of elements; so make sure to be aware of this pitfall when applying it somewhere else.
Logged
xwindows
Casual Poster
*

⛺︎ My Room

View Profile

Joined 2024!
« Reply #5 on: September 29, 2024 @526.32 »

(Continued from the last post)

The above spells could then re-applied to other individual buttons, by just copy-pasting and substituting the "https://forum.melonland.net/index.php" URL with the URL that the specific navigation icon linked to, like:

- Events: https://forum.melonland.net/index.php?action=listings
- Entrance: https://melonland.net
- Everyone: https://everyone.melonland.net
- Wiki: https://wiki.melonland.net
- Search: https://forum.melonland.net/index.php?action=search
- Login: https://forum.melonland.net/index.php?action=login
- Profile: https://forum.melonland.net/index.php?action=profile
- Register: https://forum.melonland.net/index.php?action=register

And you can now adjust individual conjuring specifics inside each copy-paste-substituted spells to beautify them all... or not?

There is one hitch in this plan a actually: sharp-eyed readers would notice that the "Logout" link is inconspicuously missing from this list, and here is why:

Up to now, we have been selecting each icon-link's `<a>` element by targeting its target URL (among other things). Logout icon-link however, has one characteristic that put a wrench right into this seemingly-perfect plan: its target is a random URL, which looked like this:

Code
https://forum.melonland.net/index.php?action=logout;giberrish=gobbledygook
Both "giberrish" and "gobbledygook" part would be seemingly-random many-digits hexadecimal number (1) which change on every login session. But this randomness is a part of logout URL, which mean the value of `href` attribute of this "Logout" icon-link is random.

CSS only allow us to select element based on the exact attribute value-- not by pattern matching; so we couldn't select the Logout icon-link this way now. But fret not, comrade! There is another CSS magic we can use to work around this: adjacent-element selector, which use this ruleset format:

Code
elementBefore + targetElement {
	/* Now we can select sideway! */
}
We are going to take advantage of the fact that when you're logged in, the Profile icon-link (which could be selected by URL) is situated just right before this troublemaking Logout icon-link: by saying we want to select a whatever `<a>` element that immediately follows the Profile icon-link... and now we're in!:

Code
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=profile"] + a {
	/* Not even the god of chaos would keep me from meddling with the Logout link here, bwahahahah! */
}
^ So, to beautify the Logout link-icon, you need to copy-paste the same spells, but you would need to replace the:

Code
a[href="https://forum.melonland.net/index.php"]
With the following:

Code
a[href="https://forum.melonland.net/index.php?action=profile"] + a
...instead, before you could customize what you conjure inside.


(1) It's not being there just to be a bane of our existence; it is for warding the infamous demon with initials "CSRF" off the forum. (If you don't know what that is, put "CSRF" in your favorite magical information-seeking thingamajig, and see what it dragged back to you)
« Last Edit: October 03, 2024 @524.50 by xwindows » Logged
xwindows
Casual Poster
*

⛺︎ My Room

View Profile

Joined 2024!
« Reply #6 on: September 29, 2024 @537.31 »

(Continued from the last post)

So, for people who would like to magick MelonLand's navigation bar icons into text, put the following incantations in your CSS overlay-casting implement of choice:

Code
/* Kill off the original Home icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php"] > img {
	display: none;
}

/* Add custom "Home" text for forum-home link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php"]:before {
	content: "Home";
}

/* Kill off the original Events icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=listings"] > img {
	display: none;
}

/* Add custom "Events" text for forum-events link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=listings"]:before {
	content: "Events";
}

/* Kill off the original Entrance icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://melonland.net"] > img {
	display: none;
}

/* Add custom "Entrance" text for MelonLand-home link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://melonland.net"]:before {
	content: "Entrance";
}

/* Kill off the original Everyone icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://everyone.melonland.net"] > img {
	display: none;
}

/* Add custom "Everyone" text for everyone-website link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://everyone.melonland.net"]:before {
	content: "Everyone";
}

/* Kill off the original Wiki icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://wiki.melonland.net"] > img {
	display: none;
}

/* Add custom "Wiki" text for wiki link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://wiki.melonland.net"]:before {
	content: "Wiki";
}

/* Kill off the original Search icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=search"] > img {
	display: none;
}

/* Add custom "Search" text for forum-search link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=search"]:before {
	content: "Search";
}

/* Kill off the original Login icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=login"] > img {
	display: none;
}

/* Add custom "Login" text for forum-login link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=login"]:before {
	content: "Login";
}

/* Kill off the original Profile icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=profile"] > img {
	display: none;
}

/* Add custom "Profile" text for forum-home link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=profile"]:before {
	content: "Profile";
}

/* Kill off the original Logout icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=profile"] + a > img {
	display: none;
}

/* Add custom "Logout" text for forum-logout link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=profile"] + a:before {
	content: "Logout";
}

/* Kill off the original Register icon in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=register"] > img {
	display: none;
}

/* Add custom "Register" text for forum-register link in the top navigation bar */
#wrapper > p[align="center"] > a[href="https://forum.melonland.net/index.php?action=register"]:before {
	content: "Register";
}
And this is the result from applying this overlay magic, while logged out:



While this is the result from applying this overlay magic, while logged in:



^ You would see that in both screenshots, items in the top navigation bar are now displaying as simple text links. (Of course, depending what you put in place of these icons, you might have to fix the now-hanging-over-content navigation badges. If you're not sure how to do that, you can follow up with me down below later)

And because I have no custom icon to test: I'll leave that as readers' exercise for people who would rather like to use custom link icons rather than text. (Hint: replace the entire doublequoted stuff after `content:` to "url(https://your.web.site/path/to/your/icon.type)" without quotes)



But it's not all flowers and rainbows: the ugly reality is these all are just workarounds. While these work, they are fragile when you're not logged in, and will not work at all if your browser doesn't allow cookies, because they clash with one helpful feature of SMF forum software....

When you first visited the forum from a pristine browser configuration with cookies cleared (or a new instance of private browsing mode), SMF doesn't know if your browser would actually allow cookies or not. So, in effort to make session-tracking persist, it would initially append `?PHPSESSID=somerandomgobbledygook` (essentially the same gobbledygook it sets in browser cookie) at the end of URL of every in-forum links it displayed to you on the page-- including the links on the top navigation bar.

And this helpful act caused the workaround to break; because we exact-matched each icon-link by its target URL: so with random gobbledygook appended, they no longer match, and spell comes off.

However, as soon as you clicked on some of these in-forum links, your browser would use the cookie SMF gave it for the first time; which allowed SMF to know that your browser did indeed allow cookies, and it would drop the act of appending link URLs with gobbledygook-- allowing the spell I gave to work.

^ This is why I said in my first post that I assumed you have clicked through something in the forum at least once; if not logged in.

If your browser didn't allow cookie however, SMF would continue appending all in-forum link URLs with gobbledygook for your entire session (because this is the only way for it to track session in that configuration); thus the spell I gave you would never work.

So, @Melooon, if SMF allows you to, please tag each top navigation button with `id` attribute, so when people try to customize things like this in the future, they could sidestep all these subsubelement+sideway+attributematch CSS selector acrobatics and their unfortunate implications.



P.S. I hereby declare all code samples I have given in this thread so far to be unleashed to public domain through the Creative Commons Zero 1.0 dedication letter. Don't be afraid add these to your own spellbooks of arcane MelonLand magic.
« Last Edit: October 03, 2024 @525.96 by xwindows » Logged
Melooon
Hero Member ⚓︎
*****


So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

Thanks for being rad!a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!...
« Reply #7 on: October 01, 2024 @303.98 »

@Melooon, if SMF allows you to, please tag each top navigation button with `id`
Ooph, thanks for the shoutout and that's a good idea! Also thanks for the HUGE explanation, I learned a few good tips from reading it!

Its one of those cases where people asked for profile customization, then once we had it working well enough they stopped asking so I thought it was all ok, but I can see it could still use some polish! :ohdear:
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
Zunne
Casual Poster ⚓︎
*


Mmm... Ice Cream...

⛺︎ My Room
XMPP: Chat!

View Profile WWW

Joined 2024!
« Reply #8 on: November 19, 2024 @67.81 »

(Continued from the last post)

Thanks! I'll try it next time (maybe tomorrow?) as i'm in kinda busy right now (especially with that one guide i'm working on).
« Last Edit: November 19, 2024 @72.64 by Melooon » Logged

I wonder why i like ice cream so much?
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Home Arcades

Started by MemoryBoard ♖ ∙ Video Games

Replies: 2
Views: 1324
Last post July 28, 2022 @942.63
by Memory
/home/user/'s Obscure Song of the Day

Started by MemoryBoard © ∙ Music Room

Replies: 7
Views: 1659
Last post March 23, 2023 @493.16
by Memory
The Home of Flint (TW: dog death, memorial page)

Started by HayleyMulchBoard ☆ ∙ Showcase & Links

Replies: 4
Views: 985
Last post April 12, 2023 @8.38
by HayleyMulch

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi