Want to get involved in developing SMF, then why not lend a hand on our github!
Started by Antechinus, June 25, 2014, 02:51:19 AM
QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair
Quote from: Antechinus on June 27, 2014, 03:19:15 AMOk, so on to the next thing: the new-fangled footer sections that are all the rage these days.As with most things, it's always a good idea to check out what other people have done before mutating it to suit yourself. Having done that, I think I've come up with a good solution that is also pretty light on code.Obviously it needs some suitable markup added to the footer area, which in this case is simply another ul. I decided to markup up four <li> columns as I thought this was a reasonable maximum on desktop/tablet. These are not floated either, because floats aren't a good way of handling this bit. The <li>'s are set to display: table-cell; with no width declared. This means they just adjust their width to suit content, like regular table cells do.The advantage here is that you are not bound to displaying a certain number of them. If one is not enabled the remaining ones just sort themselves out, without you having to do anything about it. It makes for a very flexible system.Screenshots below show it in practice. This is just pasted code straight to the template at the moment, but will have admin textareas for the finished theme. If a textarea is empty, a PHP conditional will prevent the display of that column. If there is anything saved in the textarea, the corresponding column will automatically display (this is another good idea I nicked from that Norwegian bloke ).Regarding the input for the textareas, I had an idea which may make things easier for beginners, since typing up custom HTML is a bit of a nuisance. All they have to do is create a new topic (can be hidden and/or temporary) and use that to format the content via the standard SMF editors (either WYSIWYG or BBC). Once it is posted, a simple right click > view source will bring up the HTML output.The post content itself will always be inside div class="inner", so a quick Edit>Find on the page for that will find it straight away. This div can then be copied in its entirety and pasted straight into the admin textarea for the relevant column. The footer CSS already has a small tweak added to strip some unwanted styles from div class="inner", so it will all work nicely. This includes fully functional presentation of standard quotes, and BBC lists, and auto scaling of images, since in terms of markup and CSS the forum just thinks it's another post. The only stipulation here is that to maintain validation and prevent possible glitches, the post id has to be manually stripped from the div's opening tag, leaving just the class. That should be quite easy to handle, even for beginners, if a bit of a readme and a couple of demo shots are provided.
Quote from: Colby67 on June 27, 2014, 04:38:16 AMVery nice. I use floats for this - making the thumbs equal width etc. - but using display: inline-block is interesting, especially since you can still have the inline experience when seeing the large ones. And agreed, most times you just want to see the big image fill the available width. The original should be in a new windows anyway.
Quote from: Colby67 on June 25, 2014, 04:33:15 PMthe move of unread/runread etc. notices to the menu. great idea, not sure if its used in Elkarte? But anyhoo
QuoteThe move of quick-reply icon to the menu. This one I like, it seems always a bit in the way having that one inside the post.
QuoteLooking forward to see it in real action and I am sure there's an audience out there willing to try something new and fresh.(if not holding a gun to their headadmin-section might help )
Quote from: Antechinus on June 27, 2014, 02:49:33 AMI'm mostly just rebelling against the flat design craze
Quote from: Antechinus on June 27, 2014, 04:50:33 AMQuote from: Colby67 on June 27, 2014, 04:38:16 AMVery nice. I use floats for this - making the thumbs equal width etc. - but using display: inline-block is interesting, especially since you can still have the inline experience when seeing the large ones. And agreed, most times you just want to see the big image fill the available width. The original should be in a new windows anyway.I tried floats first, of course, but the catch is they rely on all div heights being equal. This means they break layout badly if you have a mix of ordinary files (PHP, .txt, etc) and image thumbnails, unless you make all divs excessively high for ordinary files, or unless you create extra PHP to split images from other files (which I suppose would be feasible too). Even if you did split images from other files, you could still get layout problems when expanding a thumbnail on click. I just went for the easy, no-fuss option. Call me lazy. BTW, this also has potential for multi column drop menus, among other things. Nice and stable even if section heights vary.
Quote from: Colby67 on June 27, 2014, 05:19:54 AMI tried splitting images/other files..that will make for easier layout design actually..but the PHP code needs to change of course.
QuoteTBH the attachment area always felt a bit rushed, just tacked on elements without any real care for it purpose(other than being..attached ). For example, using one attachment image n as a header..how many times you wished you could just use that above the post? Sure, adding it in the post manually through a IMG tag..but its not the same, and you can't just upload a new one and it would sort it itself out.
Quote from: Carri on June 27, 2014, 06:34:11 AMLooks interesting, retro in some respects, looks like some of the old 1.1 themes out there. Glad it will have some new css bones things under the old hood.