ElkArte Community

Extending Elk => Custom Themes => Topic started by: Spuds on June 02, 2015, 09:49:41 pm

Title: [Theme] Storm Cloud
Post by: Spuds on 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
Title: Re: [Theme] Storm Cloud
Post by: meetdilip on June 02, 2015, 11:30:02 pm
:clap:

Awesome work @Spuds
Title: Re: [Theme] Storm Cloud
Post by: emanuele on June 03, 2015, 03:16:10 am
Neat!
Awesome indeed!

/me goes copy the IC code. O:-)
Title: Re: [Theme] Storm Cloud
Post by: ahrasis on June 03, 2015, 03:31:12 am
Yes. That new IC look is really neat.
Title: Re: [Theme] Storm Cloud
Post by: radu81 on June 03, 2015, 04:16:34 am
Thanks for sharing, nice work
Title: Re: [Theme] Storm Cloud
Post by: Adrek on June 06, 2015, 12:36:41 pm
Great theme :) With info center inside sidebar it reminds me of IPB/XF style.
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on June 07, 2016, 08:40:13 am
I found some. :D

Still playing with it. Will get back to you later.
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on 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. :)

Title: Re: [Theme] Storm Cloud
Post by: Spuds on June 07, 2016, 07:45:16 pm
 8)  Thanks for finding that, and for the fix.
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on 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. :D

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?).
Title: Re: [Theme] Storm Cloud
Post by: Spuds on June 08, 2016, 07:54:26 am
Go as nuts as you want :D

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.
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on 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.
Title: Re: [Theme] Storm Cloud
Post by: Spuds on 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
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on 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.
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on 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?
Title: Re: [Theme] Storm Cloud
Post by: Spuds on June 08, 2016, 07:42:57 pm
It may be coming from theme.js .... if you are using Pale Moon it (when I did this at least) did not support css "cover" properly ... so I had to jack it up with some JS  :'(  O:-)
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on June 08, 2016, 10:47:28 pm
Ok. So why not just make the anchor roundy and give it hidden overflow? Then just set image width to 100px and height to auto. Should work.
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on June 09, 2016, 03:40:50 am
Ooh dear. I made the mistake of looking at this one on an iPhone sized-screen. It gets more than a tad messy. Given that I never browse on mobile anyway, you may be reaching the limits of my enthusiasm for debugging there. If I'm going to have to put serious work in, I might as well roll my own themes.
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on June 09, 2016, 04:04:54 am
Just making the anchor roundy and setting hidden overflow works. No need for object-fit or javascript. CSS just needs this:

Code: [Select]
.poster_avatar .linklevel1 {
overflow: hidden;
display: block;
height: 100px;
width: 100px;
margin: 0 auto;
border-radius: 50%;
}

With the template being:

Code: [Select]
							<li class="listlevel1 poster_avatar">
<a class="linklevel1" href="' . $scripturl . '?action=profile;u=' . $message['member']['id'] . '">
' . $message['member']['avatar']['image'] . '
</a>
</li>';

Also, syntax error here. You forgot the background-image lead in for the linear gradient, so that declaration gets dropped and in turn the one after it also gets dropped.

Code: [Select]
/* Hover effects for those buttons. */
.linklevel1.active:hover, .listlevel1:hover .linklevel1.active,
.linklevel1:hover .pm_indicator {
background: #DDE0E3; linear-gradient(to bottom, #DDE0E3, #EFF0F3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset;
color: #555;
}

Should be:

Code: [Select]
/* Hover effects for those buttons. */
.linklevel1.active:hover, .listlevel1:hover .linklevel1.active,
.linklevel1:hover .pm_indicator {
background: #DDE0E3;
background-image: linear-gradient(to bottom, #DDE0E3, #EFF0F3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset;
color: #555;
}
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on June 09, 2016, 04:29:21 am
Oh and I'm getting two undefined errors in the log.

Code: [Select]
Type of error: Undefined
8: Undefined index: image
http://127.0.0.1/Elk_latest/index.php?
File: K:/VertrigoServ/www/Elk_latest/themes/elk_theme_storm_cloud/GenericBoards.template.php (boardindex_outer_below sub template - eval?)
Line: 195

Type of error: Undefined
8: Undefined index: 0
http://127.0.0.1/Elk_latest/index.php?
File: K:/VertrigoServ/www/Elk_latest/themes/elk_theme_storm_cloud/GenericBoards.template.php (boardindex_outer_below sub template - eval?)
Line: 189

I haven't touched that template yet. Not me. Someone else dunnit.
Title: Re: [Theme] Storm Cloud
Post by: Spuds on June 09, 2016, 10:40:29 am
QuoteJust making the anchor roundy and setting hidden overflow works. No need for object-fit or javascript. CSS just needs this:
I'll take a look at that ... for some reason I ended up using object fit but don't recall why, and then the JS was needed to cover  yet another Pale Moon issue.  

It may have been small or non square avatars that caused me to use object-ft, but I really don't recall anymore.

I'll check on the template error (you are using 1.0.7 yes?)

Title: Re: [Theme] Storm Cloud
Post by: Antechinus on June 09, 2016, 05:09:46 pm
Yup, 1.07.
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on June 09, 2016, 10:43:37 pm
Yay! Another bug!  ;D

You've set the attachment blocks to a width of 24%. The problem is that it means clicking on the image thumbnail still leaves it as a maximum of 24% wide. IOW, about the same size as the thumbnail was anyway.

Haven't done a fix for this one yet, but it's not hard. While grumbling about this I checked the default theme too. That's had a change which borks the image scaling in attachments, so they now overflow the post div instead of fitting within it. Will also devise a fix for that, if I'm still feeling magnanimous.

/me will be starting to use grumpy emoticons soon. :P
Title: Re: [Theme] Storm Cloud
Post by: Spuds on June 12, 2016, 07:28:57 am
Yeah, I was going to mention this issue but figured you would enjoy finding it for yerself  O:-)

The quick fix is to use the fancybox addon, it works great with that markup, and I know in your loins you are a fan of lightbox's !

I think whats here is mostly the 1.1 markup which was done around the simple lightbox in place of the "expand in place and mess up the page layout" expand in place version we had in 1.0 ... which of course does no good since this is a 1.0 theme.  I'll take a shot at incorporating the changes you suggested in the other thread to fix this and allow the old expand in place js to work.
Title: Re: [Theme] Storm Cloud
Post by: Antechinus on June 12, 2016, 04:45:41 pm
I love finding them if other people love fixing them. :D
Title: Re: [Theme] Storm Cloud
Post by: Mrs. Chaos on August 23, 2019, 08:35:12 am

Hi Spuds, are you also working on an update of this theme for EA 1.1 ? :)
Title: Re: [Theme] Storm Cloud
Post by: Spuds on August 23, 2019, 08:40:51 am
It is ... I'll work on it this weekend
Title: Re: [Theme] Storm Cloud
Post by: Spuds on September 02, 2019, 05:29:17 pm
I made some updates so this works with 1.1, get that version at the theme site (link is in the first post of this thread).   I made some updates for the mobile stuff, but as indicated that is one area that still needs work.  Anyway this is a good start :D
Title: Re: [Theme] Storm Cloud
Post by: Mrs. Chaos on September 03, 2019, 08:51:08 am

Great, thank you! I will download it immediately. :)
Title: Re: [Theme] Storm Cloud
Post by: radu81 on September 23, 2019, 02:34:59 am
I think there is a little bug here 8)  (or at least I see it with Firefox 69)
Title: Re: [Theme] Storm Cloud
Post by: Spuds on September 24, 2019, 07:10:39 pm
Humm, yeah that does not look right :P .... I'll have to take a look, probably this weekend.