Talk:Cosmetics - Head

Anyone know how to reduce the amount of gallery white space? (Between the images & their border and between the border & the caption)? -- Savi (talk) 12:51, 24 September 2012 (EDT)

I don't know (I never really used galleries), but you could use a table instead. IMO, it looks better too.

--Gwenwyfar (talk) 15:52, 24 September 2012 (EDT)

See discussion at User talk:Savitara, gallery has the advantage to flow images depending on users' window width, tables do not. So which size to go for? One column that everyone sees, or two or three that will fit most users, or 4 which begins to hit the limit for quite a few, or 5 or more columns which will serve just a few users but the rest must scroll sideways? Think 4 á 200 pixels in this case, but then what for those users that has a massive screen and maximized browsers? Indeed this is a judgement call with no rights nor wrongs.

Indeed it would be great to have better control of how galley works, but I have no clue. Hopefully Seth or somebody with their brain working know, mine is longing for the pillow right now ;)
-- Zimoon 17:26, 24 September 2012 (EDT)

It seems there is a default margin of 20em inside them, don't know if it can be removed other than perhaps changing css to remove them for all galleries/make a different gallery style if that's even possible. The text being outside the image might also be something that can be changed, there is a div that covers both image and text, but again, that should be something preferred for all galleries to be something we could do.

I gave a look around and doesn't seem like you can set a margin for an specific gallery as you can do for width/height.

Table vs Gallery: Eh, that adds me something to style on the custom skin :P Monobook galleries look hell ugly compared to vector.

--Gwenwyfar (talk) 18:44, 24 September 2012 (EDT)

Far as I can tell, we don't have that kind of option with galleries. An alternative might be to float: left each of the images, which should cause them to flow immediately one after the other and break to new lines based on browser window wdth. If we wanted more control, then I'd defer to Gwen who really knows her way around CSS. We could pretty easily simulate multiple gallery classes by enclosing the <:gallery> tags inside a div with a class and then just adjusting from there...I think?

Sethladan 23:40, 24 September 2012

For the sake of ease as well as image flow, I probably would prefer the gallery feature even as it is, over having a table format. If you do decide to make a custom skin, Gwen, I'd love to see the result! Relating to the previous reply, if I were to float the images individually, how would that be coded exactly? I tried a few different ways earlier and could only get a linked caption under the image using thumb, frame, or the gallery feature, otherwise the text became a mouse over only. The div sounds like an interesting possibility as well, though I'm not really sure where to start. As I'm sure most have already deciphered my coding skills are practically nill but I do try, and I really appreciate all the help from everyone!! One thing I stumbled across preceeding my initial question was this site (https://help.wikia.com/wiki/Help:Galleries,_Slideshows,_and_Sliders/wikitext) that lists several additional options for image galleries; however only the widths/heights seemed to work here. --- On another note, I came across another 'what do I do' moments x) The newest addition to the cosmetics gallery already had an Item:Steadfast Helm|item page, however the initial tooltip was different than the item I have. How exactly should different items with the same name be handled? Obviously a double tooltip popup is not ideal, but also seems odd to have multiple pages for the same named item. --Savi (talk) 21:36, 24 September 2012 (EDT)

Keep in mind when looking at wikia -- it too is a derivative (i.e. modified version of) MediaWiki.org-- which is the real parent. Wm Magill - Valamar - OTG/OTC (talk) 23:30, 24 September 2012 (EDT)

Item:Steadfast Helm, as far as I am concerned, is a bogus page. It is not really an obsolete page, but rather a replacement item. This has happened frequently with different updates. While the quest may be gone, the Item itself remains in-game. When an in-game item is revised, the stats on any existing items are simply updated for anyone who happens to have it either equipped or in their vault. Which item is the current version I do not know.

And to complicate matters further, there are 3 different items referred to on that page. My Hobbit Hunter has a Item:Fine Campaigner's Helm, which is the same item as the 3-sided pictorial, but it is Medium armour item. Wm Magill - Valamar - OTG/OTC (talk) 23:52, 24 September 2012 (EDT)

Ignoring the fact that somehow Seth's and Savitara's message are together and just answering what both of you said altogether: (Edit: Fixed it, I guess. Feel free to re-fix it if its not right.)

The Image floating you can control (adding |left/right to the image) works by an order of :float in the div containing the image already, but I don't think that would work. I tried here and images would line up vertically, I'm not sure if because how they are organized or because of floating itself. Likely float itself. Probably each image is trying to make its way to the left by itself, not altogether, and so each does not stack to the next. I'd have to give a look into that to see if that's really the case.

I just gave a better look at the code for galleries and it would probably work by putting a div around the gallery code for making different styles for them. You'd simply style the gallery IDs but adding a selector right before them that would be the div wrap, so it would only style the gallery with the div. But galleries are indeed better than tables, had forgotten about the flow thing.

Can't think of much to improve in the styling now that I made it the same as vector here, but I'll certainly give a look onto the gallery styling, if I come up with any good idea and put it to work I'll tell you later :)

As Magill said, wikia has its own bunch of features they create, so its never a good idea to look their guides for mediawiki stuff :P Some of them would be nice to have, although not really important, but I never really got to look how (or if) it can be done. Their wiki system is much more headed towards being user-friendly than anything.

Gwenwyfar (talk) 00:47, 25 September 2012 (EDT)

On Item:Steadfast Helm, the 2nd tooltip is the one I added. I have that exact item in my vault; however I had thought I got it dropped from a mob instead of a quest reward, but I shall double check on that. Knowing the image matches your Fine Campaigner's Helm actually is really helpful, I will try to add that connection next. There are actually numerous occassions where different items have the same cosmetic style, which is why I'm adding that in the linked captions when I find them. As it sounds like divs may be the additional element needed, I will definately look into it's possibilities. --Savi (talk) 08:56, 25 September 2012 (EDT)

Whoah. That was weird about Savi's and my post, but thanks Gwen for cleaning that up. I was half-asleep and on my mobile last night, so I didn't get to test/post example code, but you can find what I was thinking of with respect to floating on the second section of my User:Sethladan/Sandbox3|sandbox (ignore the mounts boxes, not sure if Neum/JnK are still talking about those). It's definitely a lot of extra code (although we can wrap that into a mini-template for sake of cleanliness), and there's still a good bit of spacing between each image (which I can't seem to reduce with padding/margin/etc.) so you'll have to decide if it's an improvement or not.

Gwen seems to have picked up on my suggestion for <div class="newGallery"><gallery>...</gallery></div>, so I'm glad that made sense to someone else, heheh. This would probably be the most powerful solution but - again - she would know best how to manage what you're looking for.

Regarding items, we definitely should only have one tooltip per page. If items have the same name, we generally disambiguate by level (preferred), with "(Quest)", or - as a last resort - location. (Although this does get me to thinking about those world-drop/vendor items that have the same name and just vary by icon and stats across levels...) Sethladan 10:02, 25 September 2012 (EDT)

You got to test that before I did I see :P Odd that they won't do that normally, since they float left already, probably something gets in the way.

That would be indeed a bit more annoying to use, but its an option to consider. I did not spend enough time meddling with the styling yet, but it seems mediawiki autogenerates a margin/width for the image, so I'm still trying to figure out how to remove it. I used a width of 200px for gallery images, and the width got turned into 235, so its not just margin but the extra width as well.

Gwenwyfar (talk) 13:37, 25 September 2012 (EDT)

*sigh* for whatever reason they decided to have +30 added to the width you set it to, instead of using a 15px margin to each side... I can't do anything about it since it will always be different according to what width you choose, so I only made the top and bottom margins the same as the sides, as they were larger. I also put the text in the same box as the image. You can see it here (Note: You will need to change to Custom skin to see it). So if we're to have a smaller margin it would have to be using the left-floating thing.

Gwenwyfar (talk) 14:13, 25 September 2012 (EDT)

Is there a way to find and read the default style definitions? I noticed that floating images the "normal" way ([[File:Lothlorien screenshot.jpg|left]]) doesn't directly float it, but puts it inside a div that is then assigned the class "floatleft," which isn't in Common.css or the main.css that Lotroadmin pulled up for you. If we could see what else was going on with that class, we could figure out why it's behaving differently than my div-inside-a-div. Similarly for the gallery-styled images, maybe. All this reminds me of my pipe dream of downloading the Mediawiki source and just fixing all these silly issues that we keep seeing. Except, of course, that I don't know PHP. :-P Sethladan 14:36, 25 September 2012 (EDT)

The floatleft/right divs are assigned to float, but also to clear, probably it is that which is stopping them from stacking:

div.tleft, div.floatleft, table.floatleft {
    float: left;
    clear: left;

(And as for how to find them, the easiest way to find what is being applied is to use an inspector, chrome and firefox have one by default, probably safari does too, I don't remember)

The gallery images have the width set in the HTML, so really, only changing the PHP, which I also haven't learned yet :P Though this one seems like a quite simple code to just remove. Gwenwyfar (talk) 19:27, 25 September 2012 (EDT)

You guys are awesome! I liked both of the visual options presented, but will probably utilize Seth's for the moment if that is okay with everyone. While there is still extra space between the images, the margins between the border and image are exactly what I was looking for. Sorry for the late reply, have gotten rather distracted with the fall festival of late :)

Went to edit the page and found something odd...If I add the additional div elements and make the images thumbs of 100px its works exactly as your sandbox, Seth, but if I change it to 200px the image flow changes....is that to be expected? --Savi (talk) 17:35, 26 September 2012 (EDT)

Similarly as done for galleries, I can create a style for the thumbnails inside a specific div class. While there are not as many divs, since we don't really need them, I think I can change anything on them. Their code in the html is very plain, only divs and images/image width (Actually the wrapping div is bigger, but only by 2 extra pixels, negligible :P). So I could remove the margin and spacing and make it look like one of the gallery styles but without all the useless space. It might be possible to remove the clear order inside this class too, so it doesn't need to be wrapped every time but just once for all images.

I don't know, I just changed here to 200px and it looked just fine. Isn't there something missing?

Edit: Actually, the spacing looks just fine when the images are 200x200. Still would be easier to wrap the images a single time with clear:left removed, so I'll give a look into that.

Gwenwyfar (talk) 18:13, 26 September 2012 (EDT)

Just made some testing, it works fine. I also added a float: left to the default thumb float:right, so you don't need to write |left on all images either, just add the div around it, like a gallery. That would certainly reduce much of the coding. I also played a bit with the margin/spacing and I think that this (on custom skin again) might be better (less spacing, slightly larger padding inside box).

Now we have to see whether this is worth adding to common.css or not :P

Gwenwyfar (talk) 18:53, 26 September 2012 (EDT)

On custom skin that looks very nice indeed Gwen! And it would certainly reduce the amount of coding needed. My question though...for people browsing the site, most use the default appearance, and when I view that coding on the default it shows the images stacked ontop of each other rather than flowing. Is there someway to make it work with any type of appearance? Or maybe this is a misguided question...I still have volumns to learn xD -Savi (talk) 20:37, 26 September 2012 (EDT)

That's because the custom skin is still under construction, so it doesn't matter much if I make some tests in it. For it to work on all skins I would have to put the code on the common.css (which I mentioned earlier), which goes across all skins.

Gwenwyfar (talk) 20:43, 26 September 2012 (EDT)

Gotcha, thank you kindly for the explanation ;) It certainly has my vote! -Savi (talk) 22:32, 26 September 2012 (EDT)

You can definitely add the "noclear" stuff to Common.css, although I'd prefer a more descriptive/semantic name (noclear is misleading because it also left-floats everything in addition to canceling the clear). "Gallery" is probably taken as a class name already, but if you can find some memorable variation of that, I think it's a great solution. Sethladan 10:04, 27 September 2012 (EDT)

Yeah, I just kind of made a random name. What about thumb-gallery? Its made to work in thumbnails, specifically.

Gwenwyfar (talk) 15:03, 27 September 2012 (EDT)

::THUMP!:: That's my stamp of approval. :) Sethladan 16:57, 27 September 2012 (EDT)

There it goes, working on all skins now :) Just need to wrap the thumbnails in a

<div class="thumb-gallery"></div> 

now.

Gwenwyfar (talk) 17:24, 27 September 2012 (EDT)

Amazing! Thank you much! I added the bit quickly here and the images look margin perfect :D Think I messed something up in the coding as the image flow got messed up in my screen, but will look it over tmro; my eyes can't see straight right now, lol -- thanks again for all the help! -Savi (talk) 23:40, 27 September 2012 (EDT)

Sample of the mis-flowing. Otherwise the thumbs look great. -- Zimoon 02:19, 28 September 2012 (EDT)

Yeah, its a bit odd here too. Seems like the images to the right are getting "attached" to the others because they have different sizes (notice how they seem to get stuck right on the tip).

You can either solve that by making all images the same size, or instead of using the width for measure, use the height for measurement. (x100px instead of 200px, for example). I did that with 90, was more or less the average height between them, should look ok now.

Gwenwyfar (talk) 02:25, 28 September 2012 (EDT)

Thanks for the height tip! Now it is almost perfect!! Just need to find a way for the images to utilize the space to the left of the transcluded infobox as it did earlier.... -Savi (talk) 11:46, 28 September 2012 (EDT)

Why is that the infobox pushes down the images? it seems the div adds an invisible "clear" somehow, dows it? -- Zimoon 13:25, 28 September 2012 (EDT)

Yes, the table is with a clear:right. Putting a div around it telling to not clear solves it, but I think it would be best if we changed the table styling itself (which, to be honest, I don't know where it is being transcluded from :P). Gwenwyfar (talk) 14:26, 28 September 2012 (EDT)

Cosmetics - Transclude-infobox (now unused) is the table you're looking for Gwen. It should probably be moved to the Template namespace and categorized as such, too. Also, can I ask Savi to reconsider the general layout here? There seem to be way too many floating boxes of different styles and sizes all over the place up at the top with no real text anywhere. Chances are it looks better on more normal resolutions (I'm the oddball with 800x600), but I'd at least like to see the navigation moved down to the bottom like we have elsewhere. Sethladan 17:03, 28 September 2012‎

Oh, duh, didn't think about taking what was written exactly. Had looked on the cosmetics page and tried seeing if there was a transclude-infobox page, but didn't check the full name. Not too familiar with page transclusions :P. Thanks.

Agreed. I would move the navigation to the bottom, add some text saying what the page is about on the top, and leaving the right-floating table above the first heading. (And by doing the last one you also solve the issue of there being a empty space in it/having to mess with the clear, since it would be siding with the description text on the top). This would make the page format look better overall, or at least this is what I think.

@smaller resolutions: Not so much, actually. I'd bet it looks better on the higher resolutions than here at the custom skin. Looks a bit clustered.

Gwenwyfar (talk) 17:14, 28 September 2012 (EDT)

Third try, lets see if I can type fast enough this time, lol. Thanks seth for the link, that is indeed the page that Zimoon kindly created for me earlier. Regarding layout....where would you prefer to move the infobox? The 'legend' is important so people understand the links under each image, and the nav box I created as I thought it was nicer looking than a simple Back button at the top. I found that I was constantly wanting to go back to the index or a different section and the browser's back button was grating my nerves ^_^ I can put it on the bottom, but when the page is complete...eventually...I would not like to scroll past everything to go back to the index (so that would be another back button on top if I did). I'd be fine removing the auto toc though unless others disagree with that idea. The pages themselves won't have a lot of text, just the links and headers as that is the point of them. I could add a sentence or so about the page I suppose...just figured it was self explanatory -Savi (talk) 17:32, 28 September 2012 (EDT)

You could leave a smaller link back to index on the top, and the nav on the bottom. How about we use the "/" thing and make the pages name cosmetics/head instead of cosmetics - head? That would create an automatic link back to cosmetics on the top. Unless you have some reason not to.

Personally, I'm fine with the location of the TOC, though it could be just as fine more on the top. I just think it makes more sense/looks better for the legend table to be on the top, since its about everything, not just one of the sections.

Gwenwyfar (talk) 19:51, 28 September 2012 (EDT)

I would be fine with moving the pages to a / instead of a -; certainly another helpful tidbit to remember. The infobox started on top, and then was moved to the right as it was thought to be less important than the images. That way it was there but not just in your face. I think I would prefer to bump the images up in line with the info box, but I suppose either way works so *shrug*. With the back link on top I would certainly agree with moving the nav box to the bottom. -Savi (talk) 20:28, 28 September 2012 (EDT)

Moved nav to bottom, added back link, and floated the infobox; however the odd image flow problem seems to be back...do I need to set the images at a consistent height AND width? =Savi (talk) 10:57, 1 October 2012 (EDT)\

Added a clear to the bottom so it doesn't cut the heading. The toc would be on the bottom of it, making it a huge empty space, however, so I moved it to the side. Tried moving to the left side, but it would just stay in the right side :P Also added a simple line about the page just so it doesn't look so much like much empty space. The problem you saw is that, even though it does what gallery flowing do, somewhat, it doesn't ignore all elements around it. Instead, it tries not to bump on them on the way to the left, so since the image height is not the same as the table, it will jump till it doesn't get stuck in it (right on the bottom of it), and because of the other images already on the left it will start getting stuck in them. And there's also the TOC helping in that too. Perhaps there might be some way to fix that behavior, but I don't know. Tried using lis like the gallery does, but the same thing happens.

Gwenwyfar (talk) 15:23, 1 October 2012 (EDT)

Thank you for all your adjustments, Gwen! I'm very satisfied with the look of everything now, so will continue with adding more cosmetic styles. Thanks again for all the help! -Savi (talk) 16:34, 1 October 2012 (EDT)

No problem, I'm glad to be able to help :) - Gwenwyfar (talk) 18:37, 1 October 2012 (EDT)

I found a way to make it flow properly even if the height of each element is different :) I tried lis before, but the wrong way. Going to make the change to the css, the only thing to note now is that images have to be in a list, and the wrapping will be a ul, not a div. But you don't need to worry about height vs width nor the flow anymore :D Gwenwyfar (talk) 01:15, 2 October 2012 (EDT)

Actually, there's no need for the ul (and it saves me a line of code :P), just keep using the div, but add images to a list. Gwenwyfar (talk) 01:27, 2 October 2012 (EDT)

You are a Godsend! After the 2nd caption line popped up last night, I was wracking my brain on how to fix it. Thank you again!! -Savi (talk) 10:34, 2 October 2012 (EDT)