TEMPLATE again - and i think somekind of how to

from offical side would be nice.

I would like to have the sys_main_menu (i think this is the right line) smaller 

Where can i change the width of the sys main menu and sys mm ???

I cant find the exact location. I suppose i have to override this value in my own template. But how?

I suppose the actual value is width=100% as the top menu is covering the whole width.

I really would like to dig into "creating my own template". But i am a little confused about a those different files like for example 

top_menu.css / general.css / index.css

Can anyone tell me :

1. the exact location of my problem

2. What could i read (look at) in order to learn it?

You can copy the base menu CSS into a new template; Dolphin will then read the values from your new template (when you set it as the template to use in the admin).  You should get a copy of Firebug or use the Inspect element in Chrome to help in adjusting your CSS; you can work on it on the fly and then when you have it correct, edit the stylesheet and write in your new values.

first off - use an element inspector such as that which is included in firefox, chrome, or safari (right click in the area you want to change, click Inspect Element). Make sure to turn off all caching so that you can see exactly what page needs to be changed. Then, change the corresponding page in the custom template. If there is not a corresponding page in your custom template, then find a page called custom.css or create your own custom.css and place your code changes there.

sys_main_menu and sys_mm have the pages width as min-width. In order to reduce it you can decrease the pages width in Dolphin admin panel->builders->pages builder. In that case all main blocks on that page will reduce their width. You can set a different amount of links visible outside of 'more' tab in top menu in Dolphin admin panel->settings->templates->settings or set it constant in your template scripts file. Replace/remove styles that are applying to those classes in "navigation_menu.html" file.

There is a little guide for better understanding of templates structure:

http://www.boonex.com/trac/dolphin/wiki/DolDesign

Also it would be better to get a free template from the market and study its structure first.

 As far as creating a custom template - it is really not that hard.

1 - create a duplicate of the UNI or the ALT template and call it what you want. So, the folder would be named tmpl_whatever.

2 - In your templates/tmpl_whatever/scripts/BxTemplName.php change $sTemplName, $sTemplVendor, and $sTemplDesc values to fit your template name.

3 - copy the _header.html page from templates/base/ to templates/tmpl_whatever

4 - in this _header.html file, add a line just above the </head> similar to this:

<link href="templates/tmpl_whatever/css/custom.css" rel="stylesheet"/>

5 - Create a blank file in your templates/tmpl_whatever/css called custom.css

6 - Go into Admin section - Settings - Templates and set your new template as default.

7 - using an element inspector and with caches off, find whatever you need to change, and only place the changes in your custom.css file.

Example: I want to change my sys main logo section from the current color to black (current look.png). I open the element inspector and highlight the section I want to change so that the css styling shows on the right side (sys main logo.png). You can play with making different changes and see what your site will look like. Once you have gotten the desired results, copy the css styling from the right to your custom.css file. But keep in mind - do not include things that are not changed (sys menu logo changed.png and custom css file.png).

There is no need for all the other css files. Using the one custom.css and identifying it in your template _header.html file shuld be enough and a lot easier. You can place any css style changes here, even those that are specific to a module.

<div class="sys_main_menu" style="min-width:__main_div_width__;">
    <div class="sys_mm" style="width:__main_div_width__;">
        <div class="sys_mm_cnt bx-def-margin-sec-leftright">
            <bx_injection:injection_top_menu_before />
            <table class="topMenu" cellpadding="0" cellspacing="0">
                <tr>
                __main_menu__
                </tr>
            </table>
            <bx_injection:injection_top_menu_after />      
            <div class="clear_both">&nbsp;</div>
        </div>
    </div>
</div>

<div class="sys_sub_menu" style="width:__main_div_width__;">
    <div class="sys_sm_cnt bx-def-margin-sec-leftright">
        <bx_injection:injection_sub_menu_before />
            __sub_menu__
        <bx_injection:injection_sub_menu_after />
    </div>
</div>

 The html template file that gets parsed for the main menu is located:  /templates/base/navigation_menu.html

 The uni or alt templates that come with Dolphin won't have this file in location: /templates/tmpl_uni/   or  /templates/tmpl_alt/

If you want to override the file used by default, you need to place a copy of it in your /templates/tmpl_yourtemplate/  folder

The classes highlighted in red are what you are looking for.

__main_div_width__ is a template key that will be replaced by Dolphin, and is determined by a datbase entry.  In order for you to gain complete control over these items, delete the text shown in blue above.  Then you will be free to style the width any way you want to.

If you don't want to do that, you can add something like this to top_menu.css

.sys_main_menu {
width: 1000px;
min-width:1000px;
}

.sys_mm {
width:900px;
}

As an alternative, you can do this to make sure your new settings are used:

.sys_main_menu {
width: 1000px !important;
min-width:1000px !important;
}

.sys_mm {
width:900px !important;
}

In any case, you must override the min-width rule in addition to the width rule.