change joomla top part in css

**PEO** · 13th June 2009, 08:59 PM

I really dig the new joomla template, But I would like to change the top part of the template

at the moment the default code is this

PHP Code:


<!-- Header /-->

<div class="headerbg">

    <div class="containerheader">

        <div class="headerbg1">

            <jdoc:include type="module" name="search" />

        </div>

        <div class="headerbg2">

            <div class="headerbg21">

                <a href="index.php" title="Axe Rescheek - 1st November Joomlaxe Templates">

                    <img src="templates/<?php echo $this->template ?>/images/logo.png" alt="Axe Rescheek - 1st November Joomlaxe Templates"/>

                </a>

            </div>

            <?php if ($this->countModules('topmenu')): ?>

            <div class="headerbg22">

                <div id="topmenu">

                    <jdoc:include type="modules" name="topmenu" style="XHTML" />

                </div>

            </div>

            <?php endif; ?> 

        </div>

    </div>

</div>

If you look at my diagram this is how I would like my top part to look

I've got zero idea on how to code this and was wondering if someone could help me out?

lots of rep for those that help... cheers

**PEO** · 14th June 2009, 10:10 AM

*bump*

**SYSMAN_MK** · 14th June 2009, 12:44 PM

Hummmm not a simple thing to do. You need extra module positions added to the template to achieve what you need.

I'll take a look when I have so spare time.

**PEO** · 14th June 2009, 06:16 PM

Hi ok thanks for that,

I've added another position to the xml file and edited the following php and css code

PHP Code:


<body>

<!-- Header /-->

<div class="headerbg">

    <div class="containerheader">

        

       <?php if ($this->countModules('sitemenu')): ?>

            <div class="headerbg33">

                <div id="sitemenu">

                    <jdoc:include type="modules" name="sitemenu" style="XHTML" />

                </div>

            </div>

            <?php endif; ?> 

        

            <div class="headerbg21">

                <a href="index.php" title="Axe Rescheek - 1st November Joomlaxe Templates">

                    <img src="templates/<?php echo $this->template ?>/images/logo.png" alt="Axe Rescheek - 1st November Joomlaxe Templates"/>

                </a>

            </div>

            <div class="headerbg1">

            <jdoc:include type="module" name="search" />

        </div>

        <div class="headerbg2">

            <?php if ($this->countModules('topmenu')): ?>

            <div class="headerbg22">

                <div id="topmenu">

                    <jdoc:include type="modules" name="topmenu" style="XHTML" />

                </div>

            </div>

            <?php endif; ?> 

        </div>

    </div>

</div>

Code:

.headerbg{
	width: 100%;
	margin-top: 0px;
}

.headerbg33{
	width: 650px;
	padding-left: 320px;
	padding-top: 0px;
	float: left;
	padding-bottom: 40;

}



.headerbg2{
	width : 950px;
	height: 93px;
}

.headerbg21{
	width: 300px;
	padding-top: 40px;
	float: left;
	height: 93px;
}

.headerbg1{
	width: 180px;
	padding-left: 600px;
	height: 30px;
}

.headerbg22{
	width: 300px;
	padding-top: 0px;
	float: left;
	

}

I've used the topmenu for rhe sitemenu until I create another menu to the site menu its just a temp till I get everything positioned. See screen shot for current progress

Im struggling with moving the search up so it inline with the jogo but centred, and the bottom menu needs to move to the right.

any ideas?

**PEO** · 14th June 2009, 06:18 PM

ps an addinional mofule called sitemenu was added to the modules

**daboroe** · 16th June 2009, 02:10 AM

PEO

you just added another module position for the links above the logo correct?

thanks

m. brown

**PEO** · 16th June 2009, 09:06 AM

Yep I added an additional module for the sitemenu.

I've really tried to figure this out formyself. Im not sure how tables are coded with css or what the <DIV> tags mean.

**mossj** · 2nd July 2009, 10:39 AM

The div tag is a container, its supposed to be used instead of tables for layout purposes.

Right first of all to make coding easier we change the color of the divs to display where they are and how big they are.

Code:

.headerbg{
	width: 100%;
	margin-top: 0px;
            background-color: grey;
}

.headerbg33{
	width: 650px;
	padding-left: 320px;
	padding-top: 0px;
	float: left;
	padding-bottom: 40;
             background-color: red;

}



.headerbg2{
	width : 950px;
	height: 93px;
 background-color: yellow;
}

.headerbg21{
	width: 300px;
	padding-top: 40px;
	float: left;
	height: 93px;
 background-color: green;
}

.headerbg1{
	width: 180px;
	padding-left: 600px;
	height: 30px;
 background-color: blue;
}

.headerbg22{
	width: 300px;
	padding-top: 0px;
	float: left;
 background-color: brown;	
}

That should give you a clear idea of how the css is working (screenshot please), I think this CSS should get you further towards your goal.

Code:

.headerbg{
	width: 100%;
	margin-top: 0px;
}

.headerbg33{
	width: 650px;
	padding-left: 320px;
	padding-top: 10px;
	float: right;
	padding-bottom: 10px;

}




.headerbg21{
	width: 300px;
	padding-top: 40px;
	float: left;
	height: 93px;
}

.headerbg1{
           margin-top: ;
/* If its too high add px, too low add negitive px IE 10px or -10px */
           float: right;
	width: 300px;
	padding-left: 600px;
	height: 30px;
}

.headerbg2{
	width : 950px;
	height: 93px;
}



.headerbg22{
            direction: ltr;
/* Should change the link direction back to left too right */
	width: 950px;
	padding-top: 0px;
	float: left;
text-align: left;
	

}

Okay that should produce some interesting results. Again screenshots would be helpful and please excuse basic errors as I didn't refrence any of this (I ussually open up every CSS file I've done and copy/past bits of code out of each)... It may just randomly go overwhere

but thats the nature of css...

LinkBack

Thread Tools

Search Thread

change joomla top part in css

Thanks to SYSMAN_MK from:

Thanks to daboroe from:

Thanks to mossj from:

Similar Threads

All Change At The Top

Joomla Contact Us Top Menu

New Edugeek template, How do I change the size and colour of the top menu?

CSS Edit in Edugeek Joomla Template

Top 11 Geek Pickup Lines (Part 1)

Thread Information

Users Browsing this Thread

Posting Permissions