[Theme] Storm Cloud

[Theme] Storm Cloud Started by Spuds · June 02, 2015, 09:49:41 pm · Read 52331 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

[Theme] Storm Cloud

June 02, 2015, 09:49:41 pm

Been a bit since I put a theme together, so here is a new one. Called it storm cloud as the greyish / blueish colors are reminiscent of that.

It has a custom board index where I moved the info center to the right as a sidebar. It will float below on narrow screens. The message index has the likes, pm, posts count buttons exposed as well. For an experiment, most of the uses of avatars have been done in a port-hole look, so they are all round using a cover property to scale them. Has the horizontal menu and top login panel, etc.

Few other things here and there, I'm sure there are bugs, but I was in theme mood for a short bit.

https://themes.elkarte.net/creative/StormCloud.html

Re: [Theme] Storm Cloud

Reply #1 – June 02, 2015, 11:30:02 pm

Awesome work @Spuds

Re: [Theme] Storm Cloud

Reply #2 – June 03, 2015, 03:16:10 am

Neat!
Awesome indeed!

emanuele goes copy the IC code.

Re: [Theme] Storm Cloud

Reply #3 – June 03, 2015, 03:31:12 am

Yes. That new IC look is really neat.

Re: [Theme] Storm Cloud

Reply #4 – June 03, 2015, 04:16:34 am

Thanks for sharing, nice work

Re: [Theme] Storm Cloud

Reply #5 – June 06, 2015, 12:36:41 pm

Great theme

With info center inside sidebar it reminds me of IPB/XF style.

Re: [Theme] Storm Cloud

Reply #6 – June 07, 2016, 08:40:13 am

Quote from: Spuds – June 02, 2015, 09:49:41 pm...I'm sure there are bugs...

I found some.

Still playing with it. Will get back to you later.

Re: [Theme] Storm Cloud

Reply #7 – June 07, 2016, 06:36:05 pm

Ok, first bug is that the way the CSS is done borks code indentation in BBC code tags.

Code: [Select]

/* Panel Tab/button */
.tab {
	background: #222;
	border-radius: 0;
	padding: 0 10px;
	position: absolute;
	right: 120px;
	text-align: center;
	z-index: 1;
	white-space: nowrap;
}

The problem is that span.tab is used to do code indentation, so setting .tab to absolute throws those out of the code box and the indentation vanishes. The way to fix it is to do this:

Code: [Select]

/* Fix span.tab inside BBC code tags. */
.bbc_code > .tab {
	position: static;
	opacity: 0;
}

That fixes the indentation without frigging around with .tab anywhere else.

Re: [Theme] Storm Cloud

Reply #8 – June 07, 2016, 07:45:16 pm

Thanks for finding that, and for the fix.

Re: [Theme] Storm Cloud

Reply #9 – June 08, 2016, 12:35:50 am

Hey how nuts do you want me to go on this? I have an irrational urge to clean up some markup n stuff too. You know what I'm like when I get going.

Incidentally, I'm wondering about the use of .tab in different places. Seems like it would be better if one of the class names was changed to prevent conflicts in future. I'm still getting back up to speed with the Elk codebase, so don't know if changing one of the class names would be practical at this stage (like are they baked into SCEditor and jQueryUI, or whatever?).

Re: [Theme] Storm Cloud

Reply #10 – June 08, 2016, 07:54:26 am

Go as nuts as you want

I think there are some "fixes" that are in the lazy days theme that I should port back to this, but its mostly items around the message index avatar display and profile options not working right with them (all those darn conditionals). Also I don't remember if the personal message template was included in this one, but it needs to be since of what I did to the avatar area on the message index needs to be in PM's as well.

Yeah .tab was probably not a great name, to generic. I don't think there will be conflicts with UI or SCE, at least with the class names. SCE (wizzy mode) runs in an iframe so has its "own" CSS and is pretty safe. UI also has its own CSS files that are quite frankly maddening to me, it injects so much that I found it difficult to style. You can see some of those problems in the profile tabs area.

Re: [Theme] Storm Cloud

Reply #11 – June 08, 2016, 08:18:34 am

Yeah I noticed the icons that are suppose to be under the avatar are borked in PM's. If that's what you're referring to. That should be handled by GenericMessages though, unless I'm missing something. It's just poster div stuff, right?

QuoteUI also has its own CSS files that are quite frankly maddening to me, it injects so much that I found it difficult to style.

Frameworks 101: How to make stuff really infuriating by trying to make it easy.

Re: [Theme] Storm Cloud

Reply #12 – June 08, 2016, 08:30:22 am

Yup, thats the one ! ... I added a wrapper div to that poster area and forgot to include it for the PM area.

QuoteFrameworks 101: How to make stuff really infuriating by trying to make it easy.

QFT

Re: [Theme] Storm Cloud

Reply #13 – June 08, 2016, 06:20:04 pm

This is as far as I've got at the moment. Can be extracted straight to the forum root on a test site. It makes some minor changes to index.template.php and adds a custom_grey.css file.

Re: [Theme] Storm Cloud

Reply #14 – June 08, 2016, 07:00:47 pm

Hey Spuds, why is there inline CSS and a pile of spans being injected into the avatar anchor? Where is that horrible pile of poo coming from?