+ Post New Thread
Results 1 to 8 of 8
EduGeek Joomla 1.5 Package Thread, change joomla top part in css in Projects:; I really dig the new joomla template, But I would like to change the top part of the template at ...
  1. #1
    PEO
    PEO is offline
    PEO's Avatar
    Join Date
    Oct 2007
    Posts
    2,096
    Thank Post
    457
    Thanked 152 Times in 96 Posts
    Rep Power
    72

    change joomla top part in css

    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
    Attached Thumbnails Attached Thumbnails change joomla top part in css-newheader.png  

  2. #2
    PEO
    PEO is offline
    PEO's Avatar
    Join Date
    Oct 2007
    Posts
    2,096
    Thank Post
    457
    Thanked 152 Times in 96 Posts
    Rep Power
    72
    *bump*

  3. #3

    SYSMAN_MK's Avatar
    Join Date
    Sep 2005
    Posts
    4,012
    Thank Post
    490
    Thanked 1,345 Times in 731 Posts
    Rep Power
    429
    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.

  4. Thanks to SYSMAN_MK from:

    PEO (14th June 2009)

  5. #4
    PEO
    PEO is offline
    PEO's Avatar
    Join Date
    Oct 2007
    Posts
    2,096
    Thank Post
    457
    Thanked 152 Times in 96 Posts
    Rep Power
    72
    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?
    Attached Thumbnails Attached Thumbnails change joomla top part in css-peo-attempt.png  

  6. #5
    PEO
    PEO is offline
    PEO's Avatar
    Join Date
    Oct 2007
    Posts
    2,096
    Thank Post
    457
    Thanked 152 Times in 96 Posts
    Rep Power
    72
    ps an addinional mofule called sitemenu was added to the modules

  7. #6
    daboroe's Avatar
    Join Date
    Aug 2007
    Posts
    108
    Thank Post
    2
    Thanked 7 Times in 7 Posts
    Rep Power
    16
    PEO

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

    thanks

    m. brown

  8. Thanks to daboroe from:

    PEO (16th June 2009)

  9. #7
    PEO
    PEO is offline
    PEO's Avatar
    Join Date
    Oct 2007
    Posts
    2,096
    Thank Post
    457
    Thanked 152 Times in 96 Posts
    Rep Power
    72
    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.

  10. #8
    mossj's Avatar
    Join Date
    Dec 2008
    Location
    Leicester
    Posts
    1,466
    Thank Post
    157
    Thanked 189 Times in 174 Posts
    Rep Power
    53
    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...
    Last edited by mossj; 2nd July 2009 at 11:05 AM. Reason: Finished off a comment with a semi-colon, doh!

  11. Thanks to mossj from:

    jeffy (3rd July 2009)



SHARE:
+ Post New Thread

Similar Threads

  1. All Change At The Top
    By russdev in forum General Chat
    Replies: 14
    Last Post: 6th June 2009, 11:30 PM
  2. Joomla Contact Us Top Menu
    By Fontayne56 in forum EduGeek Joomla 1.5 Package
    Replies: 8
    Last Post: 14th May 2009, 03:10 PM
  3. Replies: 1
    Last Post: 30th January 2009, 10:23 AM
  4. CSS Edit in Edugeek Joomla Template
    By bensewell in forum Web Development
    Replies: 2
    Last Post: 5th July 2007, 10:11 AM
  5. Top 11 Geek Pickup Lines (Part 1)
    By Geoff in forum Jokes/Interweb Things
    Replies: 5
    Last Post: 5th December 2005, 01:28 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •