Public Forums 71,145 posts

[davidunwinubs13 Friend davidunwinubs13Join date: February 2009Posts: 9Downloads:0Uploads:3 Thanks: 3]

#170913

First of all I would like to thank the developers for a great product the T3 Framework.
I use the standard default layout -in JA_T3_blank as it suites my needs.
The one thing I would like to to is fix the width in the user1-10 blocks.
The reason for this is that if you only use one of the blocks in a page it displays at 100% width,.
if you use two on a page they display width 50% each.
What I would like to do is fix the width of each block at 20%. so if I display one user block in the page it only take 20% rather than 100%
How can I do this in the block code below ( I am not a coding expert!)?

Thanks to anyone who can help
Here is the code
——-
<?xml version=”1.0″ encoding=”utf-8″?>
<layout name=”desktop”>
<!–Extra css load for this layout–>
<stylesheets>
</stylesheets>
<blocks name=”top” style=”xhtml”>
<block name=”absolute” type=”modules” style=”raw”>absolute</block>
<block name=”top-panel” type=”modules” style=”raw” main-inner=”1″>top-panel</block>
<block name=”header” type=”header” main-inner=”1″></block>
<block name=”mainnav” type=”mainnav” main-inner=”1″></block>
<block name=”cpanel” type=”usertools/cpanel”></block>
<block name=”topsl” type=”spotlight” main-inner=”1″>user1,user2,user3,user4,user5</block>
</blocks>
<blocks name=”middle” colwidth=”20″>
<block name=”left1″>left</block>
<block name=”right1″>right</block>
</blocks>
<blocks name=”bottom” style=”xhtml”>
<block name=”botsl” type=”spotlight” main-inner=”1″>user6,user7,user8,user9,user10</block>
<block name=”navhelper” type=”navhelper” main-inner=”1″></block>
<block name=”footer” type=”footer”></block>
</blocks>
</layout>
——- End of code

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#425686

Hi

Have you tried to manage the positions with the specialwidth function ?

<blockquote>Spotlight parameters

Total width

Expression: <block name=”bottom-spotlight” type=”spotlight” totalwidth=”95″ …>user6,user7,user8,user9,user10</block>
Purpose: this setting will override the default width of the entire spotlight (100%) with the value you set here. In the expression above you can see a 95% width for the bottom-spotlight block.

Custom width

Expression: <block name=”top-spotlight” type=”spotlight” special=”left” specialwidth=”25″>user1,user2,user3,user4,user5</block>
Purpose: – this will override the default 20% width for a single position within the layout, it could be the one in the right side, it could be the one in the left side, but let’s examine these parameters closer:

special=”left” – this defines where is the module we want to use the custom width: left or right
specialwidth=”25″ – this defines the new width value for this module within the spotlight block. </blockquote>

[davidunwinubs13 Friend davidunwinubs13Join date: February 2009Posts: 9Downloads:0Uploads:3 Thanks: 3]

#425789

Hi, thanks so much for responding so quickly.
I don’t quite understand the code you put up (This due to my ignorance:(() or maybe I did not explain myself very well, again my apologies.
Let me explain:
I would like each of the User1-5 positions to take up 20% of the total width of the blockname=topsl and User6-10 positions to do the same in blockname=botsl no matter how many of the user1-5 and user6-10 positions are actually used.
I understand that the “special=left or special=right” would apply to user1 and user5 respectively but not user2,user3 and user4. How could I achieve setting all the user1-5 to say 20% fixed width?

Could you maybe modify my code in the first part of the discussion to show me how to do this?

Many thanks

David

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#425987

Paste this into your templates/your_template_name/css/template.css file


#ja-topsl .main .ja-box-left{
width: 20% !important;
}
#ja-topsl .main .ja-box-center{
width: 20% !important;
}
#ja-topsl .main .ja-box-right{
width: 20% !important;
}


Do the same for the bottom spotlight


#ja-botsl .main .ja-box-left{
width: 20% !important;
}
#ja-botsl .main .ja-box-center{
width: 20% !important;
}
#ja-botsl .main .ja-box-right{
width: 20% !important;
}


Cheers
Frank | PixelZombie

[davidunwinubs13 Friend davidunwinubs13Join date: February 2009Posts: 9Downloads:0Uploads:3 Thanks: 3]

#426044

I tried the code as you said here is the area of template.css
——————————————————————
/* SPOTLIGHT
——————————————————— */
#ja-topsl .ja-box, #ja-botsl .ja-box {
background: url(../images/dot-1.gif) repeat-y right;
}

#ja-topsl .ja-box-right, #ja-botsl .ja-box-right {
background: 0;
}

#ja-topsl .ja-moduletable, #ja-botsl .ja-moduletable {
margin-top: 10px;
margin-bottom: 10px;
}

#ja-topsl div.ja-moduletable h3,
#ja-botsl div.ja-moduletable h3 { border-bottom: 0; padding-bottom: 0; }

/* Top spotlight —*/
#ja-topsl .main { padding: 0; }
#ja-topsl .main-inner1 { padding: 10px 0; border-bottom: 1px solid #ccc; }
#ja-topsl .main .ja-box-left{width: 20% !important;}
#ja-topsl .main .ja-box-center{width: 20% !important;}
#ja-topsl .main .ja-box-right{width: 20% !important;
}

/* Bot spotlight —*/
#ja-botsl .main { padding: 0; }
#ja-botsl .main-inner1 { padding: 10px 0; border-top: 1px solid #ccc; }
#ja-botsl .main .ja-box-left{width: 20% !important;}
#ja-botsl .main .ja-box-center{width: 20% !important;}
#ja-botsl .main .ja-box-right{width: 20% !important;
}

/* MISCELLANOUS
———————————————————– */
However, it did not to make any difference.
I put a test module into user10 only and it still displayed at 100% width.
Have I missed something out or is something else overriding this code?:confused:

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#426053

I think I’ve made a mistake here.
Can you try to input the width in pixels?

#ja-topsl .main .ja-box-left{
width: 150px !important;
}
#ja-topsl .main .ja-box-center{
width: 150px !important;
}
#ja-topsl .main .ja-box-right{
width: 150px !important;
}

Try to use Firebug for firefox. It displays if anything is overwriting the width.
And provide a link to your site please 😉

Cheers

[davidunwinubs13 Friend davidunwinubs13Join date: February 2009Posts: 9Downloads:0Uploads:3 Thanks: 3]

#426178

No that didn’t work either, when I use Firebug I see the following
<div id=”ja-botsl” class=”wrap “>
<div class=”main”>
<div class=”main-inner1 clearfix”>
<div class=”ja-box column ja-box-full” style=”width: 100%;”>
<div id=”Mod158″ class=”ja-moduletable moduletable clearfix”>

If I manually change the width percentage from 100% I see the user width change.

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#426183

If you publish just one module in the spotlight the class is ja-box-full and has 100%. I didn’t recognized that. so you have to add


#ja-topsl .main .ja-box-full{
width: 150px !important;
}


Try percentages and pixel value for the width. If you don’t want to divide between full, left, center and right spotlight you can use:


#ja-topsl .main .ja-box{
width: 150px !important;
}


[davidunwinubs13 Friend davidunwinubs13Join date: February 2009Posts: 9Downloads:0Uploads:3 Thanks: 3]

#427463

Ok Entered the code like this: Assume I got the position right?

/* Top spotlight —*/
#ja-topsl .main { padding: 0; }
#ja-topsl .main-inner1 { padding: 10px 0; border-bottom: 1px solid #ccc; }
#ja-topsl .main .ja-box-left{width: 150px !important;}
#ja-topsl .main .ja-box-center{width: 150px !important;}
#ja-topsl .main .ja-box-right{width: 150px !important;
}
#ja-topsl .main .ja-box-full{
width: 150px !important;
}

/* Bot spotlight —*/
#ja-botsl .main { padding: 0; }
#ja-botsl .main-inner1 { padding: 10px 0; border-top: 1px solid #ccc; }
#ja-botsl .main .ja-box-left{width: 150px !important;}
#ja-botsl .main .ja-box-center{width: 150px !important;}
#ja-botsl .main .ja-box-right{width: 150px !important;
}
#ja-botsl .main .ja-box-full{
width: 150px !important;
}

But still the same problem. Attaching my template.css

---

Attachments:

1. template.zip

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#427488

Hi David,
I’ve tested the code again and it’s working perfectly. Your template.css looks good from here. Tested it also. I’ve noticed that the site (link you sent me via pm) doesn’t have any modules in top or bottom spotlight published. Please publish them and see if it’s working.
In adition, please tell me what browser you are using.

Cheers
Frank

[davidunwinubs13 Friend davidunwinubs13Join date: February 2009Posts: 9Downloads:0Uploads:3 Thanks: 3]

#427499

Hi Frank,
This is a test site at the moment. Go to the site now and you will see a module at the bottom spotlight which is headed ‘ User10Position’
That is the only module in the user10 position. I am not using user6,7,8 or 9 at this point.
Neither am I using the top spotlight yet.
You will see the module takes up 100% of the space. I am using both Chrome and Firefox browsers and I have test in IE. All render the module at 100%?

Thank you for taking so much trouble over this. I can’t thank you enough.

Kind regards
David

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#427550

No trouble at all David 🙂
Okay I checked the site and the css code


#ja-botsl .main .ja-box-full{
width: 150px !important;
}


is not in there.

Here’s what you have to do 🙂

The CSS join minify and compress feature is active. So every css file is merged into one and doesn’t get updated as you upload the changed files. Disable this feature and make shure to configure the template to development mode. No files are cached that way.

Make shure you’ve uploaded the right file (just in case :p )

Cheers

1 user says Thank You to pixelzombie for this useful post

1. davidunwinubs13

[davidunwinubs13 Friend davidunwinubs13Join date: February 2009Posts: 9Downloads:0Uploads:3 Thanks: 3]

#427558

Frank, The Problem was entirely mine:-[
I had edited the template.css offline and then I thought I had FTP’d it back to the web site, but the FTP had failed. I did the FTP again, this time it worked and now your code works!

Can I ask one final thing? Remember I am not an expert unlilke yourself:)
Can you explain how this code works on the spotlights
/* Bot spotlight —*/
#ja-botsl .main { padding: 0; }
#ja-botsl .main-inner1 { padding: 10px 0; border-top: 1px solid #ccc; }
#ja-botsl .main .ja-box-left{width: 150px !important;}
#ja-botsl .main .ja-box-center{width: 150px !important;}
#ja-botsl .main .ja-box-right{width: 150px !important;}
#ja-botsl .main .ja-box-full{width: 150px !important;}

I assume “ja-box-left” refers to the width of User6 position if all positions are used?
I assume “ja-box-right” refers to the width of User10 position if all positions are used?
I assume “ja-box-center” refers to the width of User7, 8 & 9 positions if all positions are used?
What exactly does the “ja-box-ful” affect? is it all User6-10 positions?
Any explanation on how your code works would be much appreciated by me and others who have posted similar questions?

Nochmals vielen Dank für Ihre Hilfe
Mit freundlichen Grüßen

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#427588

I knew it! 😀
Something must have gone wrong with the new files 😉

The way the spotlight works is quite simple. The css classes depend on how many modules you display. For each module displayed the width of 100% (of the whole spotlight) is divided through the amount of modules. So one module is 100%, two makes 50% each and three makes 33,33% each and so on…

Please note the #ja-botsl in the sample code. Replace that with #ja-topsl if you want this to work in the top spotlight too.

One module

For example you just have one module published in the module position “user 1” it gets the class .ja-box-full with a default width of 100%. In order to change that you have to overwrite that width with the css file and the !important statement behind it. !important overrules every other width the element has. It doesn’t matter if the witdth is applied directly in the html code or in another css file. Therefore we added


#ja-botsl .main .ja-box-full{width: 150px !important;}

to overwrite the default width of 100% with 150px. You can also use percentages to do this.

Two modules

For example you have at least one module published in the module position “user 1” and one in “user 2” they get other classes.

“user 1” gets .ja-box-left and “user 2” gets .ja-box-right with a default width of 50% each. Thats why we added


#ja-botsl .main .ja-box-left{width: 150px !important;}
#ja-botsl .main .ja-box-right{width: 150px !important;}


Three and more modules

For example you have at least one module published in the module position “user 1” , one in “user 2” and one in “user 3”:

“user 1” gets .ja-box-left, “user 2” gets .ja-box-center and “user 3” gets .ja-box-right with a default width of 33.33% each. If you add more than 3, every module position between the first and the last get the class .ja-box-center with the calculated default width (100% / amount of modules). Thats why we added


#ja-botsl .main .ja-box-left{width: 150px !important;}
#ja-botsl .main .ja-box-center{width: 150px !important;}
#ja-botsl .main .ja-box-right{width: 150px !important;}


To make every module in the spotlight the same width regardless how many positions you have, and save some code, you can just add


#ja-botsl .main .ja-box{
width: 150px !important;
}


I hope this makes the way, the spotlight work clear and helps others to implement it.

Cheers (thanks for the kind german words, but you don’t need to 😉 )
Frank

2 users say Thank You to pixelzombie for this useful post

1. davidunwinubs13
2. steinar

[davidunwinubs13 Friend davidunwinubs13Join date: February 2009Posts: 9Downloads:0Uploads:3 Thanks: 3]

#427733

Frank, Thank you for the clear explanation, It is very useful for me and I am sure that others using the template will find it just as useful.
Kind regards

David

[Author]

Posts