-
AuthorPosts
-
Bob Meetin Friend
Bob Meetin
- Join date:
- September 2014
- Posts:
- 130
- Downloads:
- 0
- Uploads:
- 12
- Thanks:
- 6
- Thanked:
- 5 times in 1 posts
February 3, 2012 at 6:37 pm #173517I’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
khoand Friendkhoand
- Join date:
- February 2011
- Posts:
- 4500
- Downloads:
- 0
- Uploads:
- 179
- Thanks:
- 169
- Thanked:
- 1166 times in 1060 posts
February 3, 2012 at 7:20 pm #436826You 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 FriendBob Meetin
- Join date:
- September 2014
- Posts:
- 130
- Downloads:
- 0
- Uploads:
- 12
- Thanks:
- 6
- Thanked:
- 5 times in 1 posts
February 4, 2012 at 2:40 pm #436923That 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 user says Thank You to Bob Meetin for this useful post
AuthorPostsViewing 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
Jump to forum