Transmogrified: Elegant Grunge v1.0

[alisx]

Style: Transmogrified
Version: 1.0
Browsers Tested: The latest Gecko and Webkit browsers on OSX, Windows and the iPhone. Also looks "acceptable" in IE7.
Notes: Based on the WordPress theme of the same name.

( Fake Cut to Instructionsville )

Comments

[lillbet]

My only, and I mean, ONLY issue with this layout is that once I'm in my journal I can't navigate back to my friend's page or anything unless I go into my profile. That said, I love how it looks, and I just put in the code, that I'm not sure it's really even an issue, per se.

Taking it for a test drive, but regardless, very nice work. Thank you. :)

[yvi]

My only, and I mean, ONLY issue with this layout is that once I'm in my journal I can't navigate back to my friend's page or anything unless I go into my profile.

Really? I can see a 'Reading' link on top of your journal and also use it.

[lillbet]

Thanks for pointing that out- I ran my cursor over that bar at the top, but didn't really notice what I was reading (I assumed the usual Archive, Profile, Etc.)! Which is sort of akin to buying a car without knowing it has, say, a steering wheel. :p I guess I should go into the code and lighten that stuff a notch before I give up on this layout entirely.

Thanks. :)

[lillbet]

All that said, having a way to navigate back to a "post" screen would be good.

[valiha]

I was going to comment on that. I'm one of those who don't mind the navigation bar on LJ and use it to go back to the "main level", so to speak. I haven't had a chance to familiarize myself with Dreamwidth/Transmogrified yet, but is there an option to put in a free text box where I could put in my "control panel"? Or do we need to use the links list for that?

[valiha]

Dang, I saw "navigate back" and thought it was about going back to the homepage. An easy way to get there is missing, though like I said, we could add the link to the link list. :must read more carefully:

[without_wings]

Oh, that is a very cool looking layout. Thanks for sharing :)

[paradisecity]

Ooh, I like that. Thanks for sharing!

[blackbird_song]

The header's a little odd-looking in Firefox (OS-X), but it's gorgeous, and I'm going to have fun playing with it. Thank you so much!

Catherine

(And I am not using your server. ;))

[alisx]

Can I possibly grab a screenshot of what you're seeing in the header? I actually use Firefox on OSX as my primary browser, so I'm surprised I've missed something!

[tree]

i was about to comment with what i think is probably the same issue, so i've grabbed it from your journal:



the space in between the header nav module at the top and the title, is where it's funky. given that it doesn't appear on your screenshots i wonder what's missing. i'm using 10.5.6 and firefox 3.0.9.

apart from that, though, thank you so much for the layout. it's gorgeous.

[alisx]

Guh! Margin collapse, I think.

Firefox must've made some small change in the way it renders that stuff between 3.0.9 and 3.0.10. o_O

[tree]

i'm so glad i came back to look here, because dw didn't send me a notification of your reply. i added the extra bit to #header and it works perfectly. thanks so much. :)

[blackbird_song]

Sure. Shall I email it to you? (Bit of a n00b at taking and sending screenshots, though I've managed the 'taking'.)

This may be perfectly normal, though, as what I'm seeing is a sort of 'keystone' effect on the MacBook Pro 15" screen. The bottom line of the header is dropping a bit below that of the header repeats. It looks fine, but I didn't see it on your screenshot, which is why I mentioned it. Sorry if I made a mistake.

Catherine

[blackbird_song]

Mine's showing the same thick line as Tree's screen shot, but in addition to the keystone problem. I also find that the top of the footer is considerably higher than those of the footer repeats. Sort of a pedestal effect. I'm running OSX 10.4.11 and Firefox 3.0.9.

When I look at your journal, I only get the thick white line, not the alignment issues, so I think this might be an issue either with my machine or a coding glitch that I typoed in. I'll try redoing it and see what happens.

It's still gorgeous, though!

Catherine

[blackbird_song]

And sorry, but no luck with redoing and checking for typos. Still the same result.

[alisx]

Well, the good/bad news is that if I view your journal with ?style=mine, the "stepping" effect you've described (which I can see normally) vanishes.

If I had to take a stab, I'd say it's because Photobucket has incorrectly resized your banners. See yours (1024x160) versus mine (1382x216).

The "strip" between the header elements I think is a margin collapse issue (I hate that damn thing; they must've changed something in the Gecko CSS renderer between 3.0.9 and .10). The fix would be to add padding: 1px 0; to... some element. Either #container, #header or #title... I'm not sure which one, sorry!

It'll also "suck up" the padding of the elements around it, so you may need to space out the gap between the header strips and the main content. I really need to find something that will render with an older version of Firefox so I can test it out. >_O

(The other option would be a "hidden" border element in a similar sort of place... like I said, I really need to install an old browser or something and test this.)

[blackbird_song]

Thank you so much for looking into this and giving me so many details! I'll take a stab at editing the banner sizes in Photobucket and see what happens there. (I've only used that service for the mood-theme icons to date, and so had not encountered that problem before.)

If I get really ambitious (i.e., once the ibuprofen kicks in and gets rid of my headache), I may try some of those other fixes, as well. However, if you do come up with something I'll clearly trust your version much more than my own!

Thank you again for your work and your thoughts. I love the layout and am very willing to tweak as best I can. :)

Catherine

Edit: Resetting PB's limiting size and re-uploading the header and footer pictures worked. I was a real twit not to take a look at the sizes of the images or that little feature of PB's in the first place.

[alisx]

Good to hear that it worked. ^_^

Damn PB. *shakes fist*

[owca]

The "strip" between the header elements I think is a margin collapse issue (I hate that damn thing; they must've changed something in the Gecko CSS renderer between 3.0.9 and .10). The fix would be to add padding: 1px 0; to... some element. Either #container, #header or #title.

Adding the "padding: 1px 0;" line to #header worked like a charm :).

[erinptah]

Oh, very cool. Taking and futzing with for my fic journal - thanks!

[valiha]

Just to let you know that I switched the position of the sidebar and the main entry and had no problems doing it. I didn't even need to adjust margin/padding, just flipped background images.

Now, I do have the same header problem as the previous poster, but I will check to see if Photobucket resized my header too as soon as I have a chance. Thanks!

[alisx]

Sweet, good to hear. :)

[valiha]

My header wasn't resized by Photobucket so that wasn't the reason, and the white space between has miraculously disappeared without me doing anything, which is good. What isn't good is that the header has disappeared too. :( Does anyone else have the same problem?

[valiha]

Um, it seems that the header has disappeared only on my reading page, along with the title.

I used the padding and margin solutions used by owca and wekhter to get rid of the white strip, but the reading page header was missing even before I implemented that. Do you have an idea on what might be causing it?

[wekhter]

I think the problem is you don't have a title set. As far as I can tell, Transmogrified inserts no default titles on the Reading page. :/

Go the the Customize Journal page and create a title for your Reading page, I think that should solve it.

[valiha]

Oh! I didn't know that. My only experience lies with Smooth Sailing, and I know nothing of Transmogrified. I was surprised to find out it doesn't have a subtitle. :(

The reading page is fixed now, thanks!

[wekhter]

I just realised that the same space between nav and title (mentioned earlier) occurs in Opera! I somehow hadn't noticed it before. e_e; Now I'm curious as to the reason.

[wekhter]

... And also on my Firefox 3.0.10! Hadn't checked since I don't use Firefox. Doesn't happen on IE7, strangely enough, but IE's funny like that. e_e;

It stops when I declare margin:0; on #title.

[erilyn525600]

Thanks for the layout!

Just a heads up, something was done to the Transmorgified theme and it looked weird when I tried it with the sidebar showing up below all the entries. I just followed what they said here and it went back to the way it was before.

[shirozora]

The layout is fabulous, and I tweaked the graphics a bit but I'm having issues with the tags in the entries. They kind of pile on and bury the "edit entry", "edit tags", etc options; I can't click on them without clicking a tag instead. I'm pretty anal about my tagging, so some of my entries have a lot of tags but if they're going to prevent me from editing my entries...

[hoarfrost]

Going to try this one, since it's very pretty and has a good colour scheme. *two thumbs up* In short, awesome work!

[madbertha]

Hello, I used Photobucket and it did the resize thing, tried to change it, but it wouldn't let me. I tried other sharing sites but have not had much luck. Then I tried changing the css code (the heading and related codes), and it looked alright one one computer, and then on other ones did the step thing again (I don't know css, just tried to work it out from the file and looking up stuff via google)

tl;dr I gave up and am mooching, sorry about that. The positive thing part is I doubt I have much site traffic. If someone has a good image hosting service that is free and gives links to a group/folder of images that are consistent (i.e. the html address is the same right up to the file name), maybe pop it here?

Thanks for the great layout, I love it!