« Previous postNext post »

State of the Evolution - June 2014

Posted on June 1, 2014 by fplanque in b2evolution.net

You might have noticed a slight redesign of the b2evolution.net site header.

This was long overdue but was only made possible recently after we finally converted 100% of the pages of this site to be served dynamically by b2evolution.

So, now, of course, such a change is trivial as we only have the site_header file to modify in order to achieve this. But imagine that before that, the site had grown progressively since 2003 with many pages beeing static Dreamweaver files, others being handled by other software like phpBB (now integrated into b2evolution) and many sub-domains (likes skins, plugins, etc.) being handled by spearate installs of b2evolution, spearately installed and customized by contributors on separate servers. They all had the best intentions at the time but it had turned into a maintenance nightmare.

Now everything is back on one single b2evolution v 5.1.1 install. Maintenance will be easier and evolving the global site design/architecture will be easier too.

5.1.1

Speaking of 5.1.1, it is already available to test in the demo section. (Note: for security reasons, the demo runs on a separate server — sorry if it’s a bit slower soemtimes — but the demo homepage is on the main server).

A new downloadable release of 5.1.1 will be made available before June 15th.

A little bit of CSS

Regarding the recent design changes, you may have noticed the little triangle under the currently active main “tab” (which don’t look, like tabs anymore ;):

State of the Evolution - June 2014
Active tab highlighted with a triangle

In case you’re wondering this is achieved with a little white square that is rotated by 45 degrees in CSS. The square itself is added dynamically by CSS using a :after selector.

The actual CSS code looks like this:

CSS

ul.b2evo_main_menu li.current a:after
{
    content: '';
    display: block;
    position: relative;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */    
    transform: rotate(45deg);
    left: 46%;
    top: 5px;
    width: 7px;
    height: 7px;
    background-color: #fff;
    border-left: 1px solid #888;
    border-top: 1px solid #888;
}

Changes to come

The header itself will still change some more. This was merely a transitional change. But it already looks more modern, don’t you think? ;)

Another thing we changed: we got rid of the “Extend” tab. Most of its contents have been moved to the “Downloads” tab. The rest has been moved to the “About” tab.

If you haven’t noticed before, you will also find the whole Downloads section has changed a lot.

What do you think should be the next area to get a design change on this site?

CSS Day 2014

State of the Evolution - June 2014

If you’d like to meet up, we’ll be at CSS Day 2014 in Amsterdam this Wednesday.

7 comments

Comment from: Abdul Saboor [Visitor]  
Abdul Saboor

Are these modifications or we can design a page like this with the text above????

06/01/14 @ 20:39
Comment from: fplanque [Member]  

The source snippet above is for the white triangle only. You can see the full page code with the developer tools of your browser.

06/01/14 @ 21:04
Comment from: Abdul Saboor [Visitor]
Abdul Saboor

thanks

06/02/14 @ 08:13
Comment from: Abdul Saboor [Visitor]
Abdul Saboor

what are the uses/importance to me after i logged in to b2 evolution?

06/02/14 @ 08:14
Comment from: Sri Larim [Visitor]
Sri Larim

b2evolution now incorporated phpBB?

06/02/14 @ 20:40
Comment from: fplanque [Member]  

@Sri : b2evolution now includes a complete Forum/Bulletin Board management system equivalent to phpBB but it’s not the same code. This one is fully integrated into the b2evolution core and follows the same security standards.

06/02/14 @ 21:20
Comment from: fplanque [Member]  

@Abdul : I don’t understand your question.

06/02/14 @ 21:33