Oxwall Software Documentation design

IPC

2012-10-24T10:58:18+00:00

IPC

IPC - Info Picture Content. This type of displaying the content is used in Forum topics, Upcoming events, Blogs, etc.

CSS styles:

Picture: ow_ipc_picture, .ow_ipc_picture img
Info: ow_ipc_info,
Title: ow_ipc_header,
Content: ow_ipc_content,
Toolbar: ow_ipc_toolbar.

Oxwall Design Elements

2013-05-01T06:25:06+00:00

Oxwall Design Elements

Here you will find elements that Oxwall user interfaces consist of. As a theme designer you are responsible to stylize these elements in an aesthetically and functionally satisfying way so the users get the best experience possible. Please keep in mind that this list can change since we never stop optimizing Oxwall design.

Boxes

A standalone piece of content, including but not limited to widgets, may be displayed using boxes. Box as interface element.

There are 4 types of boxes in Oxwall:

Box with Cap

CSS styles:

Box Cap: ow_box_cap, ow_box_cap_right, ow_box_cap_body
Box: ow_box, ow_box_bottom_left, ow_box_bottom_right, ow_box_bottom_body, ow_box_bottom_shadow
Box menu: ow_box_menu, active
Box toolbar: ow_box_toolbar_cont, ow_box_toolbar

Box without Cap

CSS styles:

Box: ow_box, ow_box_bottom_left, ow_box_bottom_right, ow_box_bottom_body, ow_box_bottom_shadow

Empty Box with Cap

CSS styles:

Empty Box: ow_box_empty

Empty Box without Cap

It can be just a piece of content without wrapping and cap.

Buttons

Standard button

CSS styles:

input[type=submit], input[type=button]

Button list

CSS styles:

ul.ow_bl
ul.ow_bl li
ul.ow_bl a

Label button

CSS styles:

a.ow_lbutton, span.ow_lbutton

Located under the page title. Has different options for the content.

CSS styles:

ow_content_menu_wrap
ow_content_menu
.ow_content_menu li
.ow_content_menu li a

=Bold Text

Context Action

A button, a segment of buttons, a dropdown that shows up on any object to allow some context actions upon it.

CSS styles:

ow_context_action_block
ow_context_action
ow_context_action_value
ow_context_more
ow_context_action_list
.ow_context_action_list a
ow_alt2
ow_border

ContextAction button as an interface element.

Floatbox

Special popup window used for smaller interfaces without page reload, etc.

CSS styles:

Box with border: floatbox_container
Cap: floatbox_header
Content body: floatbox_body
Bottom of facebox: floatbox_bottom
Facebox background: floatbox_overlayBG

Main menu is a horizontal “ul”: ow_main_menu. Every item (“li”) has its own css class which is generated by PHP code. You can't add this class or rename, but you can see it in source code after adding the item (or use Firebug).

CSS styles:

Main: base_main_menu_index
Join: base_base_join_menu_item
Members: base_users_main_menu_item
Photo: photo_photo
Video: video_video
Blogs: blogs_main_menu_item
Events: event_main_menu_item
Chat: tinychat_main_menu_label
Forum: forum_forum
Links: links_main_menu_item

Photo list

CSS styles:

ow_photo_list
ow_alt1, ow_alt2 - color of the row
ow_photo_list_item
ow_item_set5 - item width
ow_photo_list_item_thumb
ow_photo_rate

Sort control

CSS styles:

sort_link

User list

CSS styles:

ow_user_list
ow_alt1, ow_alt2 - color of the row
ow_user_list_item
ow_item_set3 - item width
ow_user_list_picture
ow_avatar
.ow_avatar img
ow_user_list_data

CSS styles:

ow_video_list
ow_alt1, ow_alt2 - color of the row
ow_video_list_item
ow_video_thumb
ow_video_list_item img
ow_video_item_rate
ow_video_item_title

design:facebox

2012-10-24T10:58:48+00:00

Facebox consists of:

Box with border (css class=“floatbox_container”),
Cap (css class=“floatbox_header”),
Content body (css class=“floatbox_body”),
Bottom of facebox (css class=“floatbox_bottom”),
Facebox background (css class=“floatbox_overlayBG”).

How to create/customize themes for beginners

2013-07-02T07:41:58+00:00

How to create/customize themes for beginners

NOTE: This tutorial was created and prepared by our community leader Max. Thank you!

Requirements

To create a new theme, you need:

A base theme
A text editor (personally, for example notepad++)
A FTP client (like Filezilla) if you want work online
A plug-in who help you to know which line to edit (like Web developer for Firefox , I.E., Chrome)

It's recommended to works on a local installation. It’s easier, faster and more safely.

Files preparation

First, download the base theme you want and upload it in ‘ow_themes’

Next, you have to enable DEV_MODE to see your changes. To do it, open 'ow_includes/config.php' :
At line 45, replace :

define('OW_DEV_MODE', false);

define('OW_DEV_MODE', true);

And save. If DEV_MODE is false, modify images and CSS in ow_themes/ will don't change anything.

Work with CSS

First, go to Admin panel → Appearance → Choose Theme, and choose your theme.
Click on ‘Activate’ and back on your dashboard.

Now, you have the theme which will be edit. You should have installed browser's plugin to edit page's CSS.

Right click on your site, choose Web developer → CSS → See the styles of a particular element.
You must have now red border on each element you are hover like this :

If you click on an element, a window is opening at the bottom of browser like this :

This window contains the choose style element. For example, click on the title’s website.
The begin isn’t interesting for us. DON’T TOUCH ANYTHING ON THIS PART.
The important is :

a (line 107)   a means hypertext links
{ 
     color: #3366cc;   Color of selected element 
}   
 
a:hover (line 112)   a:hover means you are hover hypertext links 
{ 
}
 
   .ow_header .ow_logo a (line 232) 
{
     color: #999999;   Color of header 
}

There are some parts of the file ‘base.css’
For example, we will change the color of hypertext links :
Open the theme you downloaded earlier, and edit ‘base.css’
Go to line 122. You must have this :

a:hover { }

You have nothing between embraces. We will apply a color to hypertext links when you are hover them.
Insert this between embraces :

color: #000000;

To have this :

a:hover 
{
 color: #000000; 
}

Each command of a CSS file finish by a “;”

Save your file and upload it into : 'ow_themes/yourtheme/base.css'

Why don't we put in ow_static/ folder ? Because it’s the ‘cache’ of your theme. If you upload image or modify CSS in it, it will be displayed immediatly but if DEV_MODE is true, cache is disable and ow_static/ will be overwritten.

Back to your website and refresh the page.
Tadaaaa! If you’re hover a link, its color change to black :)
Now you have to edit your CSS like you want.

Edit CSS

In this section, we will learn to edit CSS.
There are two methods to edit the CSS, each with advantages and disadvantages. We will see in detail these methods :

By Admin Panel
By manually edit base.css

1. By Admin Panel

Oxwall gives to you the possibility to edit the layout content without modify anything. To edit CSS with Admin Panel, go to the Admin Area → Appearance → Edit Theme :

Click on 'CSS' tab :

The page 'Edit CSS' is like this :

In top of page : Full content of base.css theme. You can't edit it in this text area (Read only).
Bottom : The text area where you can add your own CSS code.

Please Note :

Custom CSS wrote in this page is generated by server, not present in files
Custom CSS is read AFTER base.css, then each command wrote in custom CSS have priority. For example, if base.css defined size text 11 pixels and you set size text 13 pixels in custom CSS, text will be write in 13 pixels size.

Advantages : Quick Edit - No changed file
Disadvantages : No file output - Code often repeated

This method is recomneded if you want only modify an existing theme and you begin with CSS, but if you want create a theme, this solution is not appropriate.

2. By edit base.css

The second method to edit CSS is to modify the base.css.

Remember : You have to enable DEV_MODE in config.php to see changes.

To do it, open 'ow_themes/mytheme/base.css' with your text editor.
Modify what you want, and upload it in 'ow_themes/mytheme/'

With this solution, you have to find which line to edit and replace it.

Advantages : Clean code - Can export theme
Disadvantages : Longer and harder than admin panel

This method is recomended if you want to create your own theme and for advanced users.

Learn CSS

This part in development

Export theme

Okay, you have now what you want. But the theme’s name is always the same and you can’t export it.
How to do it? First, create a folder with the name you want. This name will be the name of your own theme.
Put in this folder :

Your base.css
The folder ‘images’ with your own pictures
The folder ‘master_pages’
theme.xml. Open ‘theme.xml’ with notepad and edit lines how you want like name, author etc.

You can now upload the folder you created in ‘ow_themes’ and activate it in admin panel !

Oxwall Design

2015-09-15T09:30:51+00:00

Oxwall Design

Here's the table of contents for Oxwall Design documentation section.

Overview

Interface design - This is for developers who need to implement user interfaces in Oxwall plugins.

Theme design - This is for designers who create Oxwall themes.

Oxwall Interface Design

2015-09-15T09:31:35+00:00

Oxwall Interface Design

All about developing user interfaces for Oxwall.

According to Oxwall design principles, user interfaces are implemented in plugins (not themes). These instructions in document serve more for plugin developers than for theme designers. We make it possible for you to build your functionality consistent with established Oxwall interface paradigms. This will be a result of integrated user experience which is our ultimate goal.

Boxes

Box is used to display a standalone piece of content. Box as a design element.

Has optional parts such as:

Box cap

Usually contains the title of widget and its icon.

Usually used for various selections and/or modes of content display.

Usually used for summary info and/or further actions with content.

Buttons

Standard button

Used for main form actions, standalone actions and is prominently displayed with unambiguous captions. Big size is recommended.

Button list

Used for group actions upon objects. Color coding may be applied for highlighting the meaning of an action. Modest size is recommended.

Label button

If it's used as a button, appears with mouse over effect. It can be used in profile view, forum and around the avatar area; small size is recommended.

Context Action

A button or a block of buttons with optional dropdown menu. Usually more important content is in a block of buttons and less important is placed in the dropdown menu. It is often placed in the top right corner of a container. In case your plugin logic requires it, you can change the position. Use the dropdown menu with mouse over effect. Context action as a design element.

Forms

Form submit

Oxwall forms may contain more than one action button. There are two types of form submit actions: positive (including neutral) and negative.

Positive submit action:

Example: Submit, Save, Register, Create, Add etc. Additional positive actions can be used as an alternative for a main action. For example, creating a blog post you can let user choose either to Publish or to Save as draft. When there are both main and alternative actions are together, it's recommended to highlight the predominating action by a CSS class, to indicate which is obviously the main.

Negative submit action:

Example: Cancel, Reset, Delete etc. Negative actions used to be before positive submit actions and are usually highlighted with special CSS class in order to prevent user from pressing it unintentionally.

Note: We use standard buttons for regular forms.

Example

In order, to develop a form for creating the blog post. We would need a Publish button, below the form:

We have to give users an option to save it for future as well; let them edit the content later, till the time they would like to publish it. An alternative action is to Save as draft. The presence of the alternative action, requires the choosing of a main action. So we apply a special “positive” CSS style for the main action, which in this case would be Publish. In this theme we highlighted the button label with orange colour:

Form sections

Forms sections are groups of table entries united by one topic. Examples of form sections can be found in Profile view or Join forms. Look at Basic and Appearance sections in this example:

Profile edit form:

Profile view form:

Form sections are useful to make a huge form readable and to help users find related info easier.

A floatbox with a confirmation text and a button offering a referential action. The Cancel button is absent, to prevent the undesired accidental clicking. We've put an X-close for canceling the action option. (Esc button cancels it as well)

Sort control

The buttons to sort the content by several options. The first option is always default. The options label names have to be as short as possible and contain preferably less than 4-5 options to avoid the blocks of buttons grow out of the space.

Content menu is a tabbed selection of content and is used for displaying alternative or additional content for this page. Often content menu is used as an extension of site navigation, providing content hierarchy beyond main site menu.

Console

Console is a persistent collection of interactive controls that help users receive real-time information and perform actions related to their account from every part of the site. The console is typically placed in the top right corner. Console button behavior may differ, as some link to a popup window (ex. Sign in), others link to other pages (ex. Sign up button links to Join page), etc.

Console buttons before signing in:

Console buttons after signing in:

All console buttons have hover state. All the console buttons have clicked state, except the buttons linked to other pages or popup windows.

Some buttons may contain dropdown menus. Dropdown menu presence may or may not be hinted with an arrow-shaped graphic. Dropdowns may be activated on hover and/or click events.

Console counters

Console buttons may contain counters (Mailbox, Notifications and Invitations). Counters are displayed as highlighted indicators and numbers. They have two states, new (e.g., a new message, new invitation, new notification) and seen (seen, but not read yet).

The New indicator only lasts until the first click, and then it can change to the seen state (I've received a new invitation but I haven't acted upon it yet). If there's no reason for the seen stage, counter disappears completely.

Console list items

Console items may have lists inside, and the items of those lists may have the new and seen states:

Some list items may not only contain text, but also pictures and links. In cases like the invitation list, there may also be additional buttons (like accept and ignore in this example).

Feedback messages

Feedback messages are bright-colored messages that appear for a few seconds to give user site feedback about a just completed action.

Feedback messages contain error, warning, or confirmation text information; each type of these has its own color. The “x” (close) button closes a feedback message instantly.

Annotation message

Annotation messages are similar to feedback messages but are displayed persistently in the webpage flow. An annotation message has a warning icon and can't be closed.

You can use an annotation message to make an important warning before some action, or to inform about the result of the action, if it deserves to stay persistenly on the page (e.g. no results for your search).

Lists

List is a table that contains various items your plugin may have. Usually lists contain thumbnail photos, links and a text, with table rows differentiated by alternating colors. You can find examples of lists in Members, Photos, and Videos pages.

User list (with small avatars):

Photo list (with mid-size picture thumbnails):

Video list (with mid-size picture thumbnails and info):

Paging

Used for navigating and display the current location in the paged data. Previous/next icons are present if there are more than 2 pages of data.

Icons

When developing your plugins, you may need various icons for boxes, buttons, etc. Here's what Oxwall offers:

Standard icon set:

Tiny icon set:

Please note that every theme may have its own icons, although the sets should be identical to the ones in the Theme StyleGuide.

Oxwall Design Overview

2015-09-15T09:31:16+00:00

Oxwall Design Overview

Designers and developers who want to create Oxwall themes and plugins need to read this overview before getting down to work. Oxwall employs its own unique approach to design. Here we put together principles that we used when developing Oxwall design framework.

Design Principles

1. Plugin-theme common design language

We developed and standardized design language that plugins and themes should use. This is a set of controls, CSS classes, decorators, and interface paradigms that should be safe to follow when you want to create a compatible plugin or theme. You can ignore those at your own peril if you do some ad-hoc work with Oxwall but if you plan to develop some work that is to stay you should care about that.

If some themes and plugins found to be incompatible it means somebody didn't follow our guidelines. Needless to say, it's frustrating for users when something “doesn't work”. Since design is all about details it's really hard to get those straight, let alone cross-theme and cross-plugin. Following our guidelines will help you achieve that.

Non-complying will result in plugin and theme incompatibility, bad rates in Oxwall Store, and overall bad user experience. If you follow this language you will end up doing more development (fun) work and less maintenance (boring) work.

2. Product design is not template design

Oxwall plugins implement functionality that requires user interfaces. It is developer's work to get those right, according to Oxwall design model. Developing user interfaces is product design and is an inherent part of product development. Developers at Oxwall Foundation don't write a line of code before product designers come up with prototypes that are in line with with Oxwall design language. Theme designer's work in that matter is limited and is reduced to stylization of the pre-defined user interfaces.

This approach creates certain limitations for theme design but benefits are profound. You may have to go to great lengths to make an Oxwall site unrecognizable (primarily by hacking the hell out of CSS) if that's your purpose but the real world doesn't need this. Our approach will make all themes and plugins compatible. It will make websites robust and and their looks integrated - free of unfinished, unoptimized details. Making it safe for users to install and upgrade any plugins and themes is our priority. Make it your priority, too!

This approach is different from what you may find in Wordpress. Because of the limited scope they could get away with themes providing all markup and direct function calls. Oxwall functionality is vastly broader, so we created a robust bridge between themes and plugins to bring the order to the heap of 3rd party work.

User interfaces employ standard tools that themes implement. Product design is the main part of the overall design, while theme design in only the icing on the cake.

3. “Undesigned” minimalism

Simplicity is the ultimate sophistication. - Leonardo Da Vinci

A lot of what we call product design lies in optimizing and simplifying functionality, making as little elements for every purpose as possible. Sometimes we even remove features. When you implement a plugin or a theme the questions to ask yourself are:

How can I make it by doing less?
How can I make it and throw less software at user?
How can I make it work without much interference with user?
How can I reduce the number of elements in this feature or theme?

All of this should be implemented in an “invisible” way. This world already has enough complex software and a lot of what people call web-design serves the purpose to “wow” users. This is not what we do. There should be less “software” and less “design” in everything.

—

Instead of creating the product that tries to impress we are creating the one that works. If you develop a them or a plugin as a part of this product you are welcome to follow our lead.

Popup confirmation

2012-10-24T11:00:16+00:00

If you see any type of confirmation in Oxwall it will be Facebox with confirmation text and one button. There shouldn't be another button (ex. “Cancel”) to prevent on clicking the wrong button.

PSD Style Guides

2015-09-23T11:03:38+00:00

PSD Style Guides

Here we have style guides in the form of Adobe Photoshop projects that contain design elements for the existing themes from Oxwall Foundation. Feel free to use these materials for designing your own themes.

Simplicty (default theme) style guide view in Store
Origin: style guide view in Store

Responsive design

2015-04-30T06:59:58+00:00

Responsive design

We have compiled a basic list of requirements for the creation of responsive Oxwall themes, after encountering several cases when developers appear to not fully understand what a user-friendly responsive design is.

Total absence of horizontal scrolling.
Single column system.
Theme’s header and logo must be adapted for mobile resolution and display correctly.
Enlarged font size.
Enlarged interactive control elements.
Adaptable console. Console elements must not overlap and/or go beyond the panel.
Adaptable navigation. It must conform to generally acceptable aesthetic norms, and transform into a compact form if many items are present.
Chat format must change without the loss of any of its functions. Format change is dictated by the enlargement of fonts and all control elements.
Mailbox format must change without the loss of any of its functions. Format change is dictated by the enlargement of fonts and all control elements.
Adaptive Sign-in page, conforming to all preceding requirements.

The Moderation Team will use this requirements list as a reference during the approval of all responsive themes, and retains the right to reject any theme in case of grave violations.

Oxwall theme design

2015-09-15T09:31:54+00:00

Oxwall theme design

Here's your resource about everything related to creating themes for Oxwall.

Designer's goodies

Oxwall Design Elements - The list of elements that you need to stylize when creating an Oxwall theme.
Responsive design - Key elements of responsive design
IPC - Reusable subtemplates with editable markup for various content display.
PSD Style Guides - Download .PSD style guides of some stock themes for easier design.

Misc articles

Articles by contributors:

How to create/customize themes for beginners

Oxwall Software Documentation design

IPC

IPC

Oxwall Design Elements

Oxwall Design Elements

Boxes

Box with Cap

Box without Cap

Empty Box with Cap

Empty Box without Cap

Buttons

Standard button

Button list

Label button

Content menu

Context Action

Floatbox

Main menu

Photo list

Sort control

User list

Video list

design:facebox

How to create/customize themes for beginners

How to create/customize themes for beginners

Requirements

Files preparation

Work with CSS

Edit CSS

Learn CSS

Export theme

Oxwall Design

Oxwall Design

Oxwall Interface Design

Oxwall Interface Design

Boxes

Box cap

Box menu

Box toolbar

Buttons

Standard button

Button list

Label button

Context Action

Forms

Form submit

Example

Form sections

Popup confirmation

Sort control

Content menu

Console

Console dropdown menus

Console counters

Console list items

Feedback messages

Annotation message

Lists

Paging

Icons

Oxwall Design Overview

Oxwall Design Overview

Design Principles

Popup confirmation

Popup confirmation

PSD Style Guides

PSD Style Guides

Responsive design

Responsive design

Oxwall theme design

Oxwall theme design

Designer's goodies

Misc articles