FG's [url=http://manual.b2evolution.net/Tag_skin_container]container names[/url] ;)

¥

Using standard names will ensure that bloggers don't lose their widgets + widget configurations when they switch from one skin to another.

It also ensures that the next skin will have widgets where the previous skin did even if the next skin is designed around something entirely different.

The answer is to get rid of containers. Call widgets directly where you want them, style them with 'user friendly' classes (instead of code-driven concatenated classes), and let the end user edit the files if they want something other than what the skinner provided.

Or break the stranglehold that containers & current settings have on widget placement and styling, but for me for now I'm happy getting rid of containers.

¥åßßå wrote:

FG's [url=http://manual.b2evolution.net/Tag_skin_container]container names[/url] ;)

¥

Ah there.

My questions, comments, and reactions (I guess I'm the one on the commenting side lol):

1) "Numbering of the sidebars should typically go from left to right, top to bottom"
- This still put some problems, especially for a "Top" "sidebar". The top sidebar will definitely be named after NT_('Sidebar'), so it will be either NT_('Sdebar 2') or NT_('Sidebar 3'), and so on.

:: A "Top" sidebar is not really the NT_('Header') and/or NT_('Page Top'). When I was experimenting with layouts and what not, the Top sidebar always come out as separate from 'Header' and 'Page Top' when it comes to [1] defining the purposes of each container; [2] ease of use for the end-user; [3] better layout control.

:: Additionally, if Theme 1's 'Sidebar 2' is a left sidebar, but Theme 2's 'Sidebar 2' is a Top sidebar (which is horizontally designed with other css stuff), then that's a problem. Or vice versa.

:: In my opinion, it is better to name them according to the 'sidebar's positioning. As with my proposal above, "BarTop"; "BarLeft"; "BarRight"; and "BarBottom". So the "Top Sidebar" stays as such and mixture is avoided, which will be a pain on the user end.

2) it makes almost no sense at all on those skins with the "sidebar" being at the bottom or the top. It is still "side" content though (in a figurative way)
- Exactly. 'Some' English speakers, especially us HTML nerds, we know that top and bottom are still 'side' so a "Top Sidebar" and "Bottom Sidebar" is technically correct, both in the designers perspective and the English language.

:: However, and I did encounter this a few times already, there are many English speakers and non-English speakers who gets confused, and I either have to explain it by words or send them a graphical mock-layout so they understand. I'm not against explaining, but I believe that such questions doesn't really need to be asked. And since we can not blame them, coz outside the technical circle, the top and bottom sidebar are 'figuratively' correct. If they don't understand it 'figuratively', then they will ask.

:: So again, I found the solution to separate each layout section as "BarTop"; "BarBottom"; "BarLeft"; and "BarRight".

-----

By naming the 'sections' based on where in the layout these are located instead of simply 'sidebar', we solved both #1 and #2 (and other quirks that we may come across in the future).

And at the same time, it is easily understandable to the regular user, especially when that regular user is trying to figure out the class names used and other HTML stuff s/he is not knowledgeable.

So we can come up with:

• BarTop

• NT_('BarTop-01')

• NT_('BarTop-02')

[/list:u]

• BarLeft

• NT_('BarLeft-01')

[/list:u]

• BarRight

• NT_('BarRight-01')

• NT_('BarRight-02')

• NT_('BarRight-03')

[/list:u]

• BarBottom

• NT_('BarBottom-01')

• NT_('BarBottom-02')

• NT_('BarBottom-03')

• NT_('BarBottom-04')

[/list:u] [/list:u] PS No, I'm not debating ;) Just suggesting by giving different scenarios and possible alternative solutions. And I really hope the container-naming convention is still negotiable at this beta stage. EdB wrote:

Using standard names will ensure that bloggers don't lose their widgets + widget configurations when they switch from one skin to another.

It also ensures that the next skin will have widgets where the previous skin did even if the next skin is designed around something entirely different.

The answer is to get rid of containers. Call widgets directly where you want them, style them with 'user friendly' classes (instead of code-driven concatenated classes), and let the end user edit the files if they want something other than what the skinner provided.

Or break the stranglehold that containers & current settings have on widget placement and styling, but for me for now I'm happy getting rid of containers.

That's going to back to pre v2.x. I actually thought of that myself, it is more convenient, especially that, v2.x doesn't have the feature allowing us to move the widgets between containers. On my production site, my ads are hard-coded. I don't want to create and edit the widgets for every blog... I wish we'll have "global widgets" in the future ;)

Laibcoms wrote:

Top Sidebar

I was with you with left bar sidebar 1 and left bar sidebar 2 .... and even, right bar sidebar 3 ..... but a top sidebar? :|

¥

¥åßßå wrote:

Laibcoms wrote:

Top Sidebar

I was with you with left bar sidebar 1 and left bar sidebar 2 .... and even, right bar sidebar 3 ..... but a top sidebar? :|

¥

Lol.. I know :p

Just want it to be 'future-proof', dunno who will create a design with a 'top sidebar'. Since we've seen 'bottom sidebar' designs, then maybe someone out there will create a 'top sidebar' :p And if there will be one in the future, it will be better if we define this early the basic name of that 'top sidebar' :p hehehe....

But playing widely with my imagination:
We currently have containers for:
Header = well header stuff, like blogname and blog tagline goes here
Page Top = could be a horizontal banner here
Menu = horizontal menu

Now add Top Sidebar or which I prefer to call "BarTop" (with SidebarTop [Sidebar right, etc.] is too long already)
BarTop-01 = Latest Posts
BarTop-02 = Featured Article

;)

Yep, the design I'm thinking for this example is commonly seen on CMS themes/skins like Xaraya and PostNuke.

Bottom SideBars are cool :)

also : bPosts top, bPosts bottom and or WrapperTop, WrapperBottom

John wrote:

Bottom SideBars are cool :)

also : bPosts top, bPosts bottom and or WrapperTop, WrapperBottom

lol.. I was upgrading Emerald and Midnight skins yesterday morning when I encountered those css classes and thought of the same thing.. hehe...

-----------
Anyway, if the naming convention is still negotiable, we just have to choose which term to use:

"SidebarTop; SidebarLeft; SidebarRight; SidebarBottom"
vs
"BarTop; BarLeft; BarRight; BarBottom"

It is now more of seperating them by 'sections' instead of a continous 'left to right and top to bottom' counting/numbering (the current naming convention).

I really prefer the "Bar" prefix instead of "Sidebar" :p

Guess what? Someone gave me this layout:

[url=http://picasaweb.google.com/laibcoms/Blogging/photo#5185042122903908834]http://lh6.google.com/laibcoms/R_T4Vtkf8eI/AAAAAAAAB2Q/L0hzoGmJCiU/s800/sample-001.jpg[/url]

Current guidelines:

Numbering of the sidebars should typically go from left to right, top to bottom.

The reason we don't use names such as 'left' and 'right' is:

1. it makes less sense on a 3 column setup
2. it makes almost no sense at all on those skins with the "sidebar" being at the bottom or the top. It is still "side" content though (in a figurative way).

Problem: 01 to 04 will mostly likely be vertical in length, so if 01 to 03 is the top part (example above: Sections A, B, and C), then a problem for the non-geeky users.

The only solution I can think of is really to "group" the "sides" as I suggested last year. But this year, I found a better solution/way, welcome Option #2.

OPTION #2: to make it more simpler and easier to follow:
BarVert (BarVertical) - Sections 'D' and 'G'
BarHori (BarHorizontal) - Sections 'A', 'B', 'C' (& BarBottom if it is in the layout)
BarCentHori (BarCenterHorizontal) - Sections 'E', 'F', 'H', 'I', 'J'
BarCentVert (BarCenterVertical) - in the example above, this should be between BarCentHori and at the sides of the body (I think I saw a site with this "BarCentVert" layout a few days ago)
* With this second option, we still follow "Left to Right then Top to Bottom".

Grouping: BarVertical; BarHorizontal; BarCenterHorizontal; BarCenterVertical

I actually like Option #2, the reasons:
1) All vertical containers can be interchanged (left, right);
2) All horizontal containers can be interchanged (top, bottom);
3) All center-horizontal containers can be interchanged (center: top, bottom);
4) All center-vertical containers can be interchanged (center: left, right)

I can't think of any other "grouping" other than those four above, unless some wild layout designer can think of another and show us the layout..... The layout example above was designed for a community portal, in other words, CMS-type layout/site.

Of course, this is not fool proof, but at least this gives us an easy way of grouping the columns or bars.

So yah, I vote for Option #2. I'll use those for the skins I ported, which I guess will not be qualified for b2evo hosting/repository ;) :p

PS
BarVert, BarHori, BarCentHori, and BarCentVert are just suggestions. If anyone can think of better names for these groups, please share.

Anyway, just sharing my encounter with a wild layout design and my proposed solution ;) The naming is still not-good though :p

Okay dig this: containers show up in alphabetical order when visiting the widgets subtab, but we as humans tend to think of things as top-down left-right. So it would make more sense to give containers names that will make the widget page flow the way the page will actually flow.

So for example
A - Full width tippy top header
B - Top left header under header
C - Top center header under header
D - Top right header under header

and so on and so on until you finally get down to ...
L - Full width bottomest footer

----------

Currently my widgets show my footer on top and my header above my page top, which is actually completely upside down ;)

Plus for the "explaining to those who don't intuitively understand the terminology" thing, wow the image idea is worth a million explanations :D

Oh hey I've got a start on "global widgets" somewhere on my hackblog. It doesn't do global widgets yet, but it's on the drawing board. Like, be able to pick a widget from a "mother blog" and say "go forth and replicate in all existing blogs with a matching container name" or something like that. Right now all it can do is replicate all widgets from one blog to many, but it can't do it selectively.

A feature can be made from your example, making the widget-tab present its content based on the actual layout of the active skin. Probably with drag-n-drop feature.

Now that you mentioned it, the real problem, there is no option for moving widgets from one container to another, and well, "global widgets". But then again, it is something for a future version of b2evo.

But while waiting for those features, the problem still exist. "sidebar" and "sidebar_2" on other skins can or may be a fixed "square" section somewhere else.

Currently, indirectly, the skins must conform to: "sidebar" and "sidebar_2" must always be a vertical section either/both left or right. If you have a "top" sidebar on-top of your "left/right" sidebar, we have to forget about "top-to-bottom".

:p

Laibcoms wrote:

... Currently, indirectly, the skins must conform to: "sidebar" and "sidebar_2" must always be a vertical section either/both left or right. If you have a "top" sidebar on-top of your "left/right" sidebar, we have to forget about "top-to-bottom".

:p

Um... only if you WANT your skin to conform to this naming convention. It's not like it's the law or anything yah?

EdB wrote:

Laibcoms wrote:

... Currently, indirectly, the skins must conform to: "sidebar" and "sidebar_2" must always be a vertical section either/both left or right. If you have a "top" sidebar on-top of your "left/right" sidebar, we have to forget about "top-to-bottom".

:p

Um... only if you WANT your skin to conform to this naming convention. It's not like it's the law or anything yah?

Yah, for skins not targeted for distribution ;)
Anyway, I think that's the compromise. "sidebar" to "sidebar_4" should be exclusive to vertical sidebars. Any additional sidebars can start from sidebar_5.

Something like this:

Numbering of the sidebars should typically go from left to right, top to bottom.

* "sidebar" to "sidebar_4" is reserved for vertical layout sidebars (ie. Left and/or Right Sidebar; 1L-1R; 2L-1R; 1L-2R; 2L-2R). This way, when the end-user changes skin, everything is in the right place.

The reason we don't use names such as 'left' and 'right' is:

1. it makes less sense on a 3 column setup
2. it makes almost no sense at all on those skins with the "sidebar" being at the bottom or the top. It is still "side" content though (in a figurative way).

The reason we don't use names such as 'left' and 'right' is:

1. it makes less sense on a 3 column setup

If you're willing to accept that statement at face value then it's okay to name containers based on an arbitrary structure. Personally I find that completely wrong, but hey my view is equally arbitrary. To my way of thinking, if you have two sidebars then clearly one is to the left of the other (and the other is to the right of the one), so how can it be that it makes *less* sense to use left and right on a 3-column skin?

But hey go with what works for you!

EdB wrote:

If you're willing to accept that statement at face value then it's okay to name containers based on an arbitrary structure. Personally I find that completely wrong, but hey my view is equally arbitrary. To my way of thinking, if you have two sidebars then clearly one is to the left of the other (and the other is to the right of the one), so how can it be that it makes *less* sense to use left and right on a 3-column skin?

But hey go with what works for you!

Yes of course, but I'm more thinking of the end-user who will be or may want to use different skins. More interoperability (if thats the right word) between skins, less repetitive clicks if you know what I mean.

I dunno, most end-users are not as techy and as patient as us ;)

Ok, this is my final proposal and is for v3.x onwards.

---------------------------------------------------------------------------
Left and Right sidebars - these are the narrow sidebars positioned on the left and/or right side of the content
- Sidebar
- Sidebar 2
- Sidebar 3
- and so on...
: Numbering - Left-to-Right and Top-to-Bottom

Wide sidebars - these are the sidebars positioned on the left and/or right side of the content that encompasses the total width of the narrow-sidebars above (see Firebug and Pixeled themes for example - http://laibcoms.asia/blog/laibeus or http://laibcoms.asia/blog/labox )
- Sidebar-w
- Sidebar-w 2
- Sidebar-w 3
- and so on...
: Numbering - Left-to-Right and Top-to-Bottom

Bottom and Top sidebars
- Sidebar-h (for horizontal)
- Sidebar-h 2
- Sidebar-h 3
- and so on...
: Numbering order - Left to Right and Bottom to Top
:: Reasoning: the Bottom sidebar is more popular it is only appropriate to start numbering horizontal sidebars at the bottom to cater to existing blogs.

Why such naming?
The major and #1 reason is "End- User". Give the end-user the easiest customization as much as possible.
#2: Multi-skin blogs which are usually blogs that allows their users to switch between different skins

Bottomline, imagine a blog with different skins sharing the same sidebar names. Everytime a user changes skin, his/her widgets will fly all-over the blog.

Simplest example:
Current "spec" if you will
- Numbering should be from Left-to-Right and Top-to-Bottom

Skin #1:
- Sidebar - a narrow sidebar located on the right side of the content
- Sidebar 2 - a narrow sidebar located on the right side of Sidebar
= in other words, we have 2 sidebars on the right side of the content

Skin #2, based on the current "spec"..
- Sidebar - a wide sidebar located on the top-right side of the content
- Sidebar 2 and Sidebar 3 - two narrow sidebars on the right side of the content, just below Sidebar (which is the total width of these two narrow sidebars)

= What happens in this scenario, everytime the end-user switches skins, s/he has to re-arranged his/her widgets because these two skins positions Sidebars 1 to 3 differently.
= But, we can not say that Skin #2 violated the current 'spec', because Skin #2 followed it - "Left-to-Right and Top-to-Bottom" = We have 3 "Right" sidebars (ie Left-to-Right), 1 Top and 2 Bottom (ie Top-to-Bottom).

BUT
if the naming will be as I proposed above, Skin #2 will be like this:

Skin #2:
- Sidebar-w - a wide sidebar located on the top-right side of the content
- Sidebar and Sidebar 2 - two narrow sidebars on the right side of the content, just below Sidebar-w (which is the total width of these two narrow sidebars)

This final proposal is as generic as it can be.
- No distinguishing factor between Left and Right sidebars as in the previous proposals = it will always be "Sidebar; Sidebar 2; Sidebar 3; and so on, to Sidebar X-infinite
- No distinguishing factor between Top and Bottom sidebars as in the previous proposals = it will always be "Sidebar-h; Sidebar-h 2; Sidebar-h3; and so on, to Sidebar-h X-infinite
- We can keep narrow and wide sidebars separate by naming wide sidebars as "Sidebar-w" = it will always be "Sidebar-w; Sidebar-w 2; and so on"
- It is, to some extent, will degrade. Example, a user can choose not to put widgets on Sidebar-w, then nothing will show up. His/her regular Sidebar and Sidebar 2 will still show up just fine. It won't be "Skin #2: current 'spec'" in the above example.
- Now, we just have 3 groupings = Sidebar group; Sidebar-h group; and Sidebar-w group

I am using this naming and numbering convention for Firebug and Pixeled themes I converted from WP. Going to use it for all my future conversions. I can easly switch between skins without worrying too much about my widgets appearing elsewhere the new skin doesn't intend to.

http://laibcoms.asia/blog/laibeus
http://laibcoms.asia/blog/labox