Line up header elements?

How do I line up the header elements? The current style is very old school.

I know I have to edit sub_header.html and do some css changes to the corresponding classes, like changing the float and adding width percentage.

Could someone enlighten me please? I really want to learn how to do this.

One of the best tools to use is Firebug plugin for FireFox (I don't like the built in ones for the browsers; firebug is better).  You can see the code and classes that is controlling the element you are inspecting.  If you are caching the CSS, then you won't get the CSS file that the class or id is in; but you will get the name so you can then do a search in the CSS files for that class/id. Or, go into the backend (admin) and turn off CSS caching.

I use PSPad for editing; the only drawback is that there is no Linux version.  You can search through all the Dolphin files for a search string; I have used that to help try and find where I need to change things many times.

I know where to do the changes but not exactly what do do.

Im actually trying to make it similar to https://soundcloud.com/

I got the main body and all fine, just the menu is a little...well..

OK, went there.  Are you talking about the black bar at the top of the site?  You want the bits and pieces in your header to be in a row?  PM me your site and I will take a look at what you currently have and see if I can offer some help.

I noticed that you also mention menu, that is not in the top header but in the sub header.  What dolphin version are you using?  7.1 has a service menu in the top header, do you want that menu in the header and the normal menu as well?

Give me some details.

But ya, basicaly im trying to line up the top elements of Dolphin (search, menu, logo and the profile / account / logout section).

Im not trying to do a exact clone of soundcloud but just the idea of having the elements lined up would be great. I have firebug and I use developer tools to check for the classes.

So basically we have the CSS files which are mainly top_menu.css , general.css and default.css and a sub_header.html file. It is a little tricky to make things fluid in the top part for all screens.

OK, first I told you wrong; for Dolphin the header is the HTML header for the page.  The top bar on Dolphin is _sub_header.html.  I would have probably named them differently to avoid confusion but I was not asked

sub header code from the 7.1 Final zip

<bx_include_auto:_header.html />

    <bx_injection:banner_left />
    <bx_injection:banner_right />
    __extra_top_menu__
    <div class="sys_main_logo" style="min-width:__main_div_width__;">
        <div class="sys_ml" style="width:__main_div_width__;">
            <div class="sys_ml_wrapper bx-def-padding-sec">
                <bx_injection:injection_logo_before />
                __main_logo__
                <bx_injection:injection_logo_after />
            </div>
        </div>
        <bx_injection:banner_top />
    </div>
    <bx_injection:injection_between_logo_top_menu />
    __top_menu__
    <bx_injection:injection_between_top_menu_content />
    <!-- end of top -->

    <div class="sys_main_content" style="width:__main_div_width__;">
        <div class="sys_mc_wrapper bx-def-margin-sec-leftright">
            <div class="sys_mc">

                <!--[if lt IE 8]>
                <div style="background-color:#fcc" class="bx-def-border bx-def-margin-top bx-def-padding bx-def-font-large">
                    <b>You are using a subprime browser.</b> <br />
                    It may render this site incorrectly. <br />
                    Please upgrade to a modern web browser:
                    <a href="http://www.google.com/chrome" target="_blank">Google Chrome</a> |
                    <a href="http://www.firefox.com" target="_blank">Firefox</a> |
                    <a href="http://www.apple.com/safari/download/" target="_blank">Safari</a>
                </div>
                <![endif]-->
               
                <!-- body -->
                <bx_injection:injection_splash_before />
                __main_splash__
                <bx_injection:injection_content_before />

The navigation menu is in navigation_menu.html

<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>

Now, if you want to relocate the navigation menu, you need to move the key for the navigation menu to the _sub_header.html template file.

Ya but lining it all up is not easy. Relocating the menu is done with __top_menu__  in sub_header.html

The difficulty is alining search and that other little account menu thing with the drop down menu.

The way I would approach this is to not try working with the Dolphin template, write your own _sub_header.html and your own CSS classes to handle the placement; add them to bottom of the style sheet that normally handles this.  Then use what HTML tags you think you need; such as surrounding the elements in divisions that you can control the top; margin; padding; or using an unordered list <ul><li> and then controlling how things are floated or positioned.  You can look at the originals to see what keys you need to include but write your own template(s) to handle this.

When i have some time i will whip something up for you.

This should actually be quite easy. Problem will be putting everything on one line may require the number of items on the menu be decreased. Unless your want it 2000 or more px wide.

On my site I liked the idea of the service menu but wanted it to be custom.  So I removed the service menu, but kept the template and hand coded the service menu anchor tags.  I wanted nice pretty icons with rollover effects so that mean a special class.  The main menu was hidden as it needs to be there to create the sub menu that appears; if you remove the top menu, you lose the sub menus.  Then I created a new main menu with just the top level items I wanted to have displayed, again with pretty icons with rollovers.  Again, this menu was hand coded.

 Uh, could you look at the problems I am having and perhaps shed some light on them?

Can you like draw me a picture of where you want everything?

 I have seen some of your posts, i post when i have answers. Your questions are not exactly easy.

here a screenshot

Deano, this is a very bad a photoshop example which I took from the demo page. It is just so you can see the position. If you could kind of tell me how to do that or if you could post a raw sample code I would be really happy.

I would do the fine tuning, such as making it work for all screen resolutions etcetera. It would be a liquid 80% header. I just need to figure out how to line them up :D

What is on the left of that screenshot. Is that where the logo is to go?

Yes Deano, that black area is the logo. It should say "Logo". Somehow everytime I export text in my image editor it gets black :(

Ok. this is giving me more of a headache then i thought. To many elements are using the same injection point in the template making positioning them a bit of a problem.

I will need to see if i can isolate each of the elements. This may take some time.

I got it so it looks good on the index page. http://www2.deanbassett.com/ that is until you either log in or go to a page that has the sub menu section in it. Which screws up the works.

How did the sub menu get into the sub header block?  That is what I am seeing.  It should not be there and is what is messing up the layout.

The sub menu is generated as part of the main menu. And yes. It should be there. Thats how it's designed. It's part of the menu system so makes sense. Just does not work for what he wants to do.

Some code changes will need to be done to separate them into different template injection points instead of both of them using the __main_menu__ key.

This is something i may not take the time to do. It's going to be a lot of work and i have to much to do already.

So this is one that i may have to pass on due to what has to be done to get it to work.

Im very close to solving the issue. If it is reliable enough I will post it here ok?

I have been doing the same thing recently. The easiest thing to do is drop everything into navigation_menu.html. Having it split across the 2 files is a pain. Merging them makes it much easier to set up wrapper divs for styling...

See my screen print, different effect, very similar problems and solutions....

 
Could you post a sample of the code in the html file so that I could have an idea how you wrapped them up?

Up :D

Well, I'm not going to post the entire file. Quite appart from anything else, My menu is not table based (Dunno who thought of that one) but also, without being funny, based on another post, we'll be in direct competition! ;)

You want something like this...

<div class="wrappername">

   <table class="topMenu" cellpadding="0" cellspacing="0">

      <tr>

          __main_menu__
      </tr>
   </table>

</div>

<div class="anotherwrapper">

   __another_key__

</div>

<div class="yetanotherwraper">

   __yet_another_key__

</div>

and so on

I understand now. You wrap up each of those keys. Thanks alot for the example ;)

Go back through and find where I posted this.  This is nothing new.