Sounds good to me so I don't have any objections on any of those plans.
Blogs: Can we use them as a news feed in any way? I briefly looked at something like that when I made the news template but didn't find anything suiting quickly. Didn't look into blogs though...
Mandatory Signing in: This sounds like something that should be there. Maybe not restrict edit rights but I could see it being smart to have some visibility over who is doing edits. Front page (and maybe some other key pages) could be set more restricted at some point which I think is common practice on wikia pages.
Achivements: Not really any thoughts on these but could be cool!
With some testing, I realized that it's because of the documentation template. Need to check why it causes the problem...
SOLVED: No line breaks between the template code and documentation template! Like this:
Template code<noinclude> {{documentation}} </noinclude>
I noticed something strange about the CardHover template. I think you mentioned it as a problem earlier too...
For some strange reason, it seems to create a "box" of the following text if it has a space right after the template call.
Example: Cloudnest Serpent
works like this but not like this:
Cloudnest Serpent
and some text.
I don't remember having that problem before...
PS: In addition, it seems that the images show REALLY small when the templates are used here in the forum...
Actually, the same happens with other templates too... At least with Card:
Now the hovering images appear correctly and aren't cut out when reaching over the edge of the column. Needed to add this little bit of code:
.WikiaArticle { overflow: visible; }
It seems that .WikiaArticle is the class that is used for the articles in a Wikia. Like I guessed, the overflow attribute is "hidden" by default so changing it to "visible" lets the images "flow over" the edges of an article.
Now we just need to be careful so that we don't make tables or images that overflow where we don't want them to.
Notice that you might have to do a full refresh (bypass browsers cache) if the piece of code doesn't work instantly.
If you wanted to make the positioning of the card code a bit more clear you could do the following:
.hoverLink .hoverCard { visibility: hidden; opacity: 0; /* Opacity and transition are a little fading gimmick */ transition: opacity 0.35s; /* Position the pop-up */ position: absolute; z-index: 1; bottom: 110%; left: 20%; } /* Makes the pop-up visible when hovering */ .hoverLink:hover .hoverCard { visibility: visible; opacity: 1; position: absolute; }
the margin- properties essentially move the "reference point" of the pop up while the "bottom" and "top" move the "box". Doesn't really matter which you use but for clarity, I'd place the positioning codes under the /*Position the pop-up*/ comment (the absolute position lets the image hover over other text and stuff of the box and z-index moves the pop-up to the front).
I also like using percentages more than em.
I also tested what happens to the pop-up at the right edge and it seems the column on the right blocks the hovering pop-up. I don't know how much you can see/edit as an admin but it's possible that the overflow property of the main column is set as "hidden". You could try to set it as "visible" somewhere. Here's a little guide to the overflow property.
I found a good guide for those tool tips here. Pretty similar to the code and css of your rollover template. I decided to do some testing with the test-sandbox they have on the page and came up with an alternative and more simplified code.
CSS:
/* This is a container for the desired link. Basically it just sets the position for the hover picture that will be added. */ .hoverLink { position: relative; display: inline-block; } /* This part is for the hidden image (works with text too). This is where you can finetune the position and appearance of the pop-up image with "top:50%", "left: 100%", "background: black" etc. properties. */ .hoverLink .hoverCard { visibility: hidden; opacity: 0; /* Opacity and transition are a little fading gimmick */ transition: opacity 0.35s; /* Position the pop-up */ position: absolute; z-index: 1; } /* Makes the pop-up visible when hovering */ .hoverLink:hover .hoverCard { visibility: visible; opacity: 1; }
The content of the template is really simple too and follows the same call-rule as yours:
<span class="hoverLink"> [[{{{1}}}]] <span class="hoverCard">[[File:{{{1}}}.png|300x300px]]</span> </span>
Only issue I've encountered so far is that if the pop-up image set above the link, it can be cut out by the top edge of the column. Same is very likely happening for the right and left edge. In the test-sandbox there was automatically added enough space at the bottom for the image. It's very possible that this is an issue that can only be worked out with Javascript.
Basically, these seem to be combination of the two templates you had made but just omit the unstable and unsure part.
The card hovering works nicely but there are couple issues with it:
EDIT: It seems you can just use spaces instead of "_" and it works just fine for both the text and the image source: Claw of the First Dragon
I started looking into how the templates and tables work in other similar pages (like Heartstone Wikia). Trying to get into the coding side as well so might look into Java at some point as well.
EDIT: Actually... The more I look into this wikia stuff the more I'm starting to think that I'll just use the source editor to make the pages look like I want. The classic editor is nice for adding text quickly but it just lacks any proper control over the outlook of the page.
So, what do you think? Are we aiming at something similar with the front page as Heartstone Gamepedia? With all stuff divided into separate boxes etc.?
I agree. While the automatic listing is nice, the lack of control over a part of the page is annoying.
Probably so. That idea crossed my mind as well but like I said, I'm new to Wikia and was mostly just trying out how things work.
I think I got what you meant with the main page appearance. I like the Hearthstone Gamepedia a lot to be honest. Especially the division to heroes, classes and then different cards and mechanics etc. The bullet lists and categories like you said. Relying on a good main page with good navigation feels like a lot better idea than concentrating on the upper navigation bar.
I don't think we're in a hurry with anything. It's not like we have any deadlines or something. :P The browser icon looks really good but I agree that it's a bit off. I'd say that the upmost horizontal line of the E is a bit too long and thin when compared to the lowest one. Can't say for sure but that's the quick impression. The colors are perfect in my opinion.
Sounds like a plan to me. I was actually thinking about making a logo too but don't have much experience with making images.
As for the front page, I'll be waiting for the links as I'm not quite sure which pages you mean.
Couple other things about layout/construction of the wikia I had in my mind:
1) I think we should move the "latest activity" feed from the main page at some point as it takes a lot of space and makes a bit "messy" look. Maybe just add a link (or a smaller feed if there is one) to side bar or under "community". No hurry though since there isn't much content yet.
2) The general construction. I think this is something that could be aligned with the upper bar. In my opinion we could mimic Hearhstone Wikia with it: "On the Wiki" (is it automatically created?) is already quite good.
Second one could be "Mechanics" renamed as "Eternal" (or something like "The Game" with only one sub-topic, "Gameplay" for now (reserve others subtopics like "Game modes", "Deck construction", "Avatars" and/or "Expansions" for example). "Gameplay" sub-topic could have links to following: "Basic Gameplay", "Skills" and more as they are created. "most visited articles" could be moved to either "On the Wikia or "Community" or removed completely.
"Cards" is good for the second topic. Sub-topics could be again similar to Hearthstone Wikia with classification "by type", "by influence", "by subtype" (for example, subtypes could include unit subtypes like "mage", "warrior" etc.) and maybe even "others" if enough classification pages are created later on.
Feel free to suggest any further ideas or plans. This is just my initial take on the construction of the wikia.
PS: Actually, there seems to be a "Wiki activity" link on the upper bar already...
I like the current layout of card pages more than those examples you posted. What we have currently is clear and simple enough. One addition at some point could be to add small icons instead of saying "1R, 1B". Or at least change to refering to the name of the influence instead of color (e.g. "1F, 1P"; of course if color is usually preferred with carg games, I'm fine with that).