Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Joomla Template - but the Joomla works!

    Well after two months of learning Joomla! and messing around with Joomla templates, I struck out on my own. I doubt I have the CSS skill necessary, but I'll pick it up.

    I designed a site in Fireworks, sliced/exported to Dreamweaver, and now I'm trying to convert it to CSS - I'm close!

    The picture below is the design I'm going for, and http://michaelbreed.eyelinegolf.com is what I've got going on. Basically, I'm looking to have a relatively static template with all my joomla stuff in area 5. As area 5 expands, area 6 should be pushed down, and area 4 should lengthen with a white background.

    As you can see, my modules are actually placed and working, so my template problems aren't in Joomla-specific, just CSS layout. Here's my neophyte HTML code (feel free to rip it to shreds):

    Code:
    <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>">
    <head>
    <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
    <?php mosShowHead(); ?> 
    <?php include ("includes/metadata.php"); ?>
    <?php include_once ("editor/editor.php"); ?>
    <link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" /> 
    <script language="JavaScript" type="text/javascript"><!--function MM_reloadPage(init) {  //reloads the window if Nav4 resized  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();} MM_reloadPage(true);//--></script>
    <?php if ($my->id) { initEditor(); } ?> 
    </head>
    <body>
    <div id="wrap_all">
    		<div id="static_left1"></div>
    		<div id="wrap_right">
    			<div id="static_head"></div>
    			<div id="menu_top"><?php if(mosCountModules('top')) : ?><div class="mod_box"><?php mosLoadModules('top', -2); ?></div><?php endif; ?></div>
    			<div id="static_left2"></div>
    			<div id="joom_pane">
    				<div class="clr_float">
    					<?php if(mosCountModules('user1')) : ?><div class="mod_box"><?php mosLoadModules('user1', -2); ?></div><?php endif; ?>
    					<?php if(mosCountModules('user2')) : ?><div class="mod_box"><?php mosLoadModules('user2', -2); ?></div><?php endif; ?>
    				</div>
    				<div class="clr_float">
    					<?php if(mosCountModules('user3')) : ?><div class="mod_box"><?php mosLoadModules('user3', -2); ?></div><?php endif; ?>
    					<?php if(mosCountModules('user4')) : ?><div class="mod_box"><?php mosLoadModules('user4', -2); ?></div><?php endif; ?>
    				</div>
    				<div class="clr_float">
    					<div class="content_box"><?php mosMainBody(); ?></div>
    					<?php if(mosCountModules('right')) : ?><div class="right_box"><?php mosLoadModules('right', -2); ?></div><?php endif; ?>
    				</div>
    				<div class="clr_float">
    					<?php if(mosCountModules('user5')) : ?><div class="mod_box"><?php mosLoadModules('user5', -2); ?></div><?php endif; ?>
    					<?php if(mosCountModules('user6')) : ?><div class="mod_box"><?php mosLoadModules('user6', -2); ?></div><?php endif; ?>
    				</div>
    				<div class="clr_float">
    					<?php if(mosCountModules('user7')) : ?><div class="mod_box"><?php mosLoadModules('user7', -2); ?></div><?php endif; ?>
    					<?php if(mosCountModules('user8')) : ?><div class="mod_box"><?php mosLoadModules('user8', -2); ?></div><?php endif; ?>
    				</div>
    			</div>
    			<div id="static_foot"></div>
    		</div>
    </div>
    </body>
    </html>
    and my rudimentary PHP code (rip it up):

    Code:
    html {
    /* this is a hack to force scrollbars on at all times so that the page does not jump when going from short to long pages */
    height: 100%;
    margin-bottom: 1px;
    }
    
    body {
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    	background-color: #000000;
    	background-image: url(../images/bg.jpg);
    	background-repeat: repeat-x;
    }
    
    #wrap_all {
    	position: relative;
    	width: 769px;
    	margin: 0 auto;
    }
    
    #wrap_right {
    	position: absolute;
    	min-height: 626px;
    	top: 0px;
    	left: 123px;
    	width: 646px;
    }
    
    #static_left1{
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 123px;
    	height: 626px;
    	background-image: url(../images/index_r1_c2.png);
    	background-repeat: no-repeat;
    }
    
    #static_head{
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 288px;
    	height: 41px;
    	background-image: url(../images/index_r1_c3.jpg);
    	background-repeat: no-repeat;
    }
    
    #static_left2{
    	position: absolute;
    	top: 67px;
    	left: 0px;
    	width: 31px;
    	height: 533px;
    	background-color: #FFFFFF;
    	background-image: url(../images/index_r3_c3.jpg);
    	background-repeat: no-repeat;
    }
    
    #menu_top{
    	position: absolute;
    	top: 41px;
    	left: 0px;
    	width: 646px;
    	height: 26px;
    	background-image: url(../images/index_r2_c3.jpg);
    	background-repeat: no-repeat;
    }
    
    #joom_pane{
    	position: absolute;
    	top: 67px;
    	left: 31px;
    	width: 595px;
    	padding: 10px;
    	min-height:513px;
    	background-color:#FFFFFF;
    }
    
    .mod_box{
    	text-align: left;
    	float: left;
    }
    
    .right_box{
    	text-align: left;
    	float: right;
    }
    
    .content_box{
    	text-align: left;
    	float: left;
    	width: 400px;
    }
    
    #static_foot{
    	clear: both;
    	position: absolute;
    	bottom: 0px;
    	left: 0px;
    	width: 646px;
    	height: 26px;
    	background-image: url(../images/index_r4_c3.jpg);
    	background-repeat: no-repeat;
    }
    
    .clr_float{
    	clear: both;
    }
    
    /*Joomla-specific CSS*/
    
    #active_menu{}
    #blockrandom{}
    #contact_email_copy{}
    #contact_text{}
    #emailForm{}
    #mod_login_password{}
    #mod_login_remember{}
    #mod_login_username{}
    #poll{}
    #search_ordering{}
    #search_searchword{}
    #searchphraseall{}
    #searchphraseany{}
    #searchphraseexact
    .adminform{}
    .article_seperator{}
    .back_button{}
    .blog{}
    .blog_more{}
    .blogsection{}
    .button{}
    .buttonheading{}
    .category{}
    .clr{}
    .componentheading{}
    .contact_email{}
    .content_rating{}
    .content_vote{}
    .contentdescription{}
    .contentheading{}
    .contentpagetitle{}
    .contentpane{}
    .contentpaneopen{}
    .contenttoc{}
    .createdate
    .fase4rdf{}
    .footer
    .frontpageheader{}
    .inputbox{}
    .latestnews{}
    .mainlevel{}
    .message{}
    .modifydate{}
    .module{}
    .moduletable{}
    .mostread{}
    .newsfeed{}
    .newsfeeddate{}
    .newsfeedheading{}
    .pagenav{}
    .pagenav_next{}
    .pagenav_prev{}
    .pagenavbar{}
    .pagenavcounter{}
    .pathway{}
    .polls{}
    .pollsborder{}
    .pollstableborder{}
    .readon{}
    .search{}
    .searchintro{}
    .sectionentry1{}
    .sectionentry2{}
    .sectionheader{}
    .sitetitle{}
    .small{}
    .smalldark{}
    .sublevel{}
    .syndicate{}
    .syndicate_text{}
    .text_area{}
    .toclink{}
    .weblinks{}
    .wrapper{}
    Thanks if anyone is inclined to help me out!

    Teddy
    Attached Thumbnails Attached Thumbnails Joomla Template - but the Joomla works!-layout.jpg  

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    The main problem is your use of absolute positioning.

    Keep in mind that an absolutely positioned element does not expand its container.

    Example: Take a look at piece of your markup:
    Code:
    #wrap_right {
    	position: absolute;
    	min-height: 626px;
    	top: 0px;
    	left: 123px;
    	width: 646px;
    
    }
    #joom_pane{
    	position: absolute;
    	top: 67px;
    	left: 31px;
    	width: 595px;
    	padding: 10px;
    	min-height:513px;
    	background-color:#FFFFFF;
    
    }
    #static_foot{
    	clear: both;
    	position: absolute;
    	bottom: 0px;
    	left: 0px;
    	width: 646px;
    	height: 26px;
    	background-image: url(../images/index_r4_c3.jpg);
    	background-repeat: no-repeat;
    }
    Code:
    <div id="wrap_right">
      <div id="joom_pane"></div>
      <div id="static_foot"></div>
    </div>
    In this example, #joom_pane holds your main content. But #joom_pane being absolutely positioned, will not expands its parent (#wrap_right), neither does #static_foot. So #wrap_right stays at 626px.

    Absolute positioning is good when one in advance knows the dimensions of the elements, but this is rarely the case for database-driven dynamic pages.

    For this reason, absolute positioning isn't being used much for creating the basic layout. You probably don't need to use it either.

    I'm not sure if this was much help, but at least you may now see what the problem is.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the advice - it makes complete sense. So I went ahead and removed all my "position: absolute" tags, and as such all of my "left:" and "top:" positioning tags too.

    Now everything is messed up! Can I point you call to my layout graphic above? I don't care about sizes or anything right now - my only question is how one would setup a "table" like that using css and divs. I assume it involves "clear: both" or something.

    Thanks!

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by drokkon View Post
    Thanks for the advice - it makes complete sense. So I went ahead and removed all my "position: absolute" tags, and as such all of my "left:" and "top:" positioning tags too.

    Now everything is messed up! Can I point you call to my layout graphic above? I don't care about sizes or anything right now - my only question is how one would setup a "table" like that using css and divs. I assume it involves "clear: both" or something.
    I think you are on the right track now. Here is what I would do: Combine the 2 slices of 'golf player image' into 1 PNG image. No need for slicing when you use CSS.

    Then eliminate your #wrap_right which holds your page content. You only need #wrap_all.

    As for the 'golf player image', you can use absolute positioning (yes, this is correct usage) within #wrap_all to place it so it partially sticks out onthe left side. That would involve specifying some negative left offset.

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow - that sounds totally right. Guess I have to break out of this table mindset completely! I'll give it a go...

    T

  • #6
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So I made one "carry-all" container, like you suggested.

    Then I took 2, 3, 5, & 6 (4 no longer exists) and: float: right; clear: all;

    I took 1 and: float: left; position: absolute; top: 10px; left: 10px;

    So I thought that absolute was in relation to the parent, which is the container, yet as you can see, my #1 is getting crammed up into the window corner.

    What am I missing?

    Thanks,

    T

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by drokkon View Post
    So I thought that absolute was in relation to the parent, which is the container, yet as you can see, my #1 is getting crammed up into the window corner.

    What am I missing?
    Offsets for an absolutely positioned elements are taken with respect to the elements containing block.

    And the containing block for an absolutely positioned element is the nearest positioned ancestor.

    To get what you want you have to position #wrap_all:
    Code:
    #wrap_all {
    	width: 769px;
    	margin: 0 auto;
    	position: relative;
    }

  • #8
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You are amazing - thank you for helping through my noob-ness!

    T

  • #9
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I'm baaack

    So I figured all of this out last week and went on vacation. Came back, and someone in my company had deleted the folder from the server. Of course, I hadn't yet backed it up. SO - I managed to get the template looking right again, but I'm struggling with my module positions within my joom_pane div:

    Here's the CSS:
    Code:
    #joom_pane{
    	float: right;
    	clear: all;
    	top: 67px;
    	left: 31px;
    	width: 646px;
    	padding: 10px;
    	min-height:513px;
    	background-color:#FFFFFF;
    }
    
    .mod_box{
    	float: left;
    	width: 93%;
    }
    
    .right_box{
    	float: right;
    	width: 93%;
    }
    
    .content_box{
    	float: left;
    }
    
    .clr_float{
    	clear: both;
    }
    Here's the HTML:
    Code:
      <div id="joom_pane">
        <div class="clr_float">
          <?php if(mosCountModules('user1')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user1', -2); ?>
          </div>
          <?php endif; ?>
          <?php if(mosCountModules('user2')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user2', -2); ?>
          </div>
          <?php endif; ?>
        </div>
        <div class="clr_float">
          <?php if(mosCountModules('user3')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user3', -2); ?>
          </div>
          <?php endif; ?>
          <?php if(mosCountModules('user4')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user4', -2); ?>
          </div>
          <?php endif; ?>
        </div>
        <div class="clr_float">
          <div class="content_box">
            <?php mosMainBody(); ?>
          </div>
          <?php if(mosCountModules('right')) : ?>
          <div class="right_box">
            <?php mosLoadModules('right', -2); ?>
          </div>
          <?php endif; ?>
        </div>
        <div class="clr_float">
          <?php if(mosCountModules('user5')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user5', -2); ?>
          </div>
          <?php endif; ?>
          <?php if(mosCountModules('user6')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user6', -2); ?>
          </div>
          <?php endif; ?>
        </div>
        <div class="clr_float">
          <?php if(mosCountModules('user7')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user7', -2); ?>
          </div>
          <?php endif; ?>
          <?php if(mosCountModules('user8')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user8', -2); ?>
          </div>
          <?php endif; ?>
        </div>
      </div>
    Obviously, I'm trying to create 5 rows of 2 columns. All the rows (except the middle one) should have two columns of equal widths - if a module isn't present, then the module next to it should take up the whole row.

    Thanks for any help,

    T

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by drokkon View Post
    Obviously, I'm trying to create 5 rows of 2 columns. All the rows (except the middle one) should have two columns of equal widths - if a module isn't present, then the module next to it should take up the whole row.
    I wouldn't say that it is obvious what you are trying to do?

    On this page of yours: http://michaelbreed.eyelinegolf.com/ I see some sections: 'Latest News', 'Popular', 'Newsflash', 'Polls', 'Who's Online'.

    If they are not placed correctly now, then how do you want them placed?

  • #11
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I'm placing two divs of class "mod_box" within a div of class "clr_float" to try and create a row. Hoping that the two mod_box divs line up side by side and by starting a new "clr_float" div I'll start a new "row."

    T

  • #12
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by drokkon View Post
    Well, I'm placing two divs of class "mod_box" within a div of class "clr_float" to try and create a row. Hoping that the two mod_box divs line up side by side and by starting a new "clr_float" div I'll start a new "row."
    In that case you will need to adjust the width for .mod_box. They are too wide. Try something like this:
    Code:
    .mod_box{
    	float: left;
    	/* width: 93%; */
    	width: 320px;
    }

  • #13
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help - silly me! Of course the widths were an issue. So I'm close, but here's the deal: I want the CSS equivalent of 4x4-cell table using CSS. The way it's working now, however, is because cell 1 is too tall, both 2 and 3 align to the right of it, when only 2 should and 3 should start a new row. Example is here: http://michaelbreed.eyelinegolf.com/ (On the site, "Newsflash" and "Popular" should be row 1, "Latest News" and "Search" should be row 2.)

    And code is here:
    Code:
    .mod_box{
    	float: left;
    	text-align: left;
    	width: 270px;
    	padding-left: 30px;
    }
    
    .mod_clr{
    	clear: all;
    }
    and here:
    Code:
        <div class="mod_clr">
          <?php if(mosCountModules('user1')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user1', -2); ?>
          </div>
          <?php endif; ?>
          <?php if(mosCountModules('user2')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user2', -2); ?>
          </div>
          <?php endif; ?>
        </div>
        <div class="mod_clr">
          <?php if(mosCountModules('user3')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user3', -2); ?>
          </div>
          <?php endif; ?>
          <?php if(mosCountModules('user4')) : ?>
          <div class="mod_box">
            <?php mosLoadModules('user4', -2); ?>
          </div>
          <?php endif; ?>
        </div>
    What's so maddening about this is that I had it figured out at one point, but it was deleted from the server. And now I can't remember what I did. Why can't I grasp this CSS stuff?!?

  • #14
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hmm.. I'm still trying to understand what you are trying to achieve? Do you mean a 2×2 table?

    Anyway, there is no such thing as clear: all in CSS. Maybe you mean clear: both ? Check out the CSS 2.1 Working Draft, Section 9.5.2 about the clear property
    Code:
    .mod_clr{
    	clear: all;
    }

  • #15
    New to the CF scene
    Join Date
    May 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's exactly what I needed to do! Just a simple syntax error on my part. Thanks so much.

    T


  •  

    Posting Permissions

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