" /> change joomla top part in css

    + 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,093
      Thank Post
      457
      Thanked 150 Times in 95 Posts
      Rep Power
      71

      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,093
      Thank Post
      457
      Thanked 150 Times in 95 Posts
      Rep Power
      71
      *bump*

    3. #3

      SYSMAN_MK's Avatar
      Join Date
      Sep 2005
      Posts
      4,005
      Thank Post
      489
      Thanked 1,340 Times in 728 Posts
      Rep Power
      428
      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,093
      Thank Post
      457
      Thanked 150 Times in 95 Posts
      Rep Power
      71
      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,093
      Thank Post
      457
      Thanked 150 Times in 95 Posts
      Rep Power
      71
      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,093
      Thank Post
      457
      Thanked 150 Times in 95 Posts
      Rep Power
      71
      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
      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
      52
      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 10:05 AM. Reason: Finished off a comment with a semi-colon, doh!

    11. Thanks to mossj from:

      jeffy (3rd July 2009)

    SHARE:

    Similar Threads

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