Tutorial - Native Theme - bitweaver - Web Application Framework and CMS

Technical_Documentation » Tutorials » Tutorial - Native Theme

Hey everyone, I want to learn how Xing makes his cool templates and styles for bitweaver. Xing uses CSS instead of tables for bitweaver... I am familiar with CSS, but not as expert as the master Xing himself...

This tutorial will serve as a way to understand the CSS tricks, and document the process inorder to help other CSS newbies out there who also want to create their own style for bitweaver.

The Native Theme

1) Create your beautiful photoshop images.
2) Slice them up, and use CSS to position them instead of tables - Xing positions things using:

tags
example:

#wrap1 {background:transparent url('images/bar.png') repeat-x 0px 18px;}

This will repeat bar.png in the horizontally, and position it at 0,18

The Logo
Next, Xing places the logo on the page by using another div tag called: tikitop

#tikitop {background:transparent url('images/bar_logo.png') no-repeat left;
height:100px;
width:900px;
margin-left:auto;
margin-right:auto;}

Xing, could you help me out with the explanation of why you made the width 900px when the image itself is only 100x100?
this width is a declaration for the container, not for the image. why the container is made 900px wide — I don't know. probably for some layout/positioning reasons, like fitting the site name and slogan inside or something

Research Update:

April 5th - Hi everyone,

Ive been experimenting with the CSS dropdown menus found in Xings Native theme.

Ive managed to edit themes/force/top_bar.tpl and themes/mystyle/mystyle.css enough to be able to change the color of each individual drop down menu.

I have a three questions though- that maybe Xing or Spiderr can help me with —

1) There seams to be a 2px visible gap between random my menu items...
(see www.eslteacherlink.com) and I cant seam to get rid of it..

yes, I've noticed this strange behaviour too, but on some stage of modifying the menu css it disappeared. unfortunately I can't track what exactly I did to get rid of it. one hint could be that this bug is broser-specific: if reveals differently in different browsers. try setting line-heights, margins and padding in pixels and see if it works

2) Also, how can I change the positioning of the topbar that the menu is on? I would like to position it 5px from the top of the page.

get the #nav container (or #bittopbarwrap) to be at the beginning of a source-code of the template. then use margin or padding for #nav to adjust. you can also try position:absolute (in this case you don't need to change the template) or position:relative

3) How can I change the size of it so that the tiki menus fit inside of it?

the size of the sub-level menus is declared in css. If I remember correctly, it's 14em or something. adjust the number to your needs

4) Is it possible to have image rollovers as the menu headings? Ie: For "blogs" Categories, Forums, My bitweaver - have an image rollovers

if you want to have uniform image rollovers for all the items — then it's easy. look at that small + and - signs in a current jill theme — they are done with background images swapping on :hover state. If you need unique rollovers for each menu item, it will be harder. my idea is to edit each module menu template by adding an image rollower before

tag and suppress original text of the menu item(either with css or by deleting the text from template). there might be some more "elegant" solutions though

/dspt

Example for newbees: How to change logo in some theme

TWEAKING NATIVE THEME

Web Developer firefox extension

From last dreamweaver ( V8 ), with a local php/mysql server like EasyPhp, you can preview and tweak CSS pretty easily.
The best Wysiwyg Css editor to me is StyleMaster because of that unique feature: you can load local Css styleSheets and preview them dynamicaly with an URL ( yourplace.com )

native_all.css where you will find all GENERALS declarations
native_screen.css where you will find screen-media complements ( others included medias are: print and handheld )
native_layout.css where all relative to div placements are described.
native_cssmenus.css which are the declarations for the navigation bar.

WebDeveloper Firefox extension

In the toolbar, choose Outline and then Outline current element
Now, each Div Zone you will mouseover, will highlight AND TELL HIS CSS D.NAME!
Once you've discovered that this "big hugly text" CSS is ".header h1", just use the 'find' function of notepad to change it!