Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • Bob Meetin Friend
    #173517

    I’m trying to add 5 new adjacent positions below user7-user10 with varying widths. Through joomla template administrator I edited the ja_droid template, Layouts tab –> Default so that it looks like this:

    <block name="botsl" type="spotlight" main-inner="1">newsletter,user7,user8,user9,user10</block>

    <block name="lower" type="modules" style="raw">user20,user21,user22,user23,user25</block>

    <block name="navhelper" type="navhelper"></block>

    Then I populate some generic content into the 5 modules. Rather than displaying horizontally, side by side, they display vertically. I tried style=”xhtml”, did not fix them to display side by side? So first question, how/where do I update the style to make this work?

    The requirement is to make the positions of varying widths. Say 30% for user20, then say 17% (or so) for the others. What do I need to do to force custom widths as in the attached image? I also may need to adjust the background color from module to module.

    Thx


    1. ahe_example
    khoand Friend
    #436826

    You replace your code

    <block name="lower" type="modules" style="raw">user20,user21,user22,user23,user25</block>
    with


    <block name="lower" type="spotlight" special="left" specialwidth="30" style="raw">user20,user21,user22,user23,user25</block>

    Bob Meetin Friend
    #436923

    That worked pretty good except I had mistyped the position names. I went with:

    <block name="lower" type="spotlight" special="left" specialwidth="35" style="raw">user21,user22,user23,user24,user24</block>

    By viewing the HTML source after enabling the positions I figured out how to style -left, -center and -right. Here is what I went with:

    #ja-lower {
    background: #000;
    color: #fff;
    }

    #ja-lower a {
    color: #fff;
    }

    #ja-lower a:hover {
    color: #ddd;
    }

    #ja-lower .ja-box-left, #ja-lower .ja-box-center, #ja-lower .ja-box-right {
    background: #222;
    margin: 0px;
    padding: 0px;
    }

    #ja-lower .ja-box-center {
    background: #333;
    }

    #ja-lower .ja-box-right {
    background: #333;
    }

    #ja-lower .ja-box-left h3, #ja-lower .ja-box-center h3, #ja-lower .ja-box-right h3 {
    margin: 0px;
    padding: 0px;
    line-height: 1em;
    color: #fff;
    }

    Much thanks…


    1. user21-25
Viewing 3 posts - 1 through 3 (of 3 total)

This topic contains 3 replies, has 2 voices, and was last updated by  Bob Meetin 12 years, 9 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum