Joomla Templates Club 406,261 posts

[gmihailo Friend gmihailoJoin date: November 2009Posts: 10Downloads:0Uploads:1]

#145969

Hi guys,

We are just building a website for our company.

http://www.freeman-intenational.com/site

Our old webmaster has left us in the dark and left, so we decided to purhase a membership on this forum for support.

If you note on our website, we are trying to show 6 boxes using the mod_jacatslwi

We want to highlight 6 of our dj’s artists in this area.

But you will notice they are not lining up neatly.

Can someone please help us fix this. We really want this to look perfect.

Your help would be mostly appreciated.

[prakash Friend prakashJoin date: October 2008Posts: 439Downloads:0Uploads:1 Thanks: 2 Thanked: 146 times in 115 posts]

#323365

is the url correct – it does not seem to work

[gmihailo Friend gmihailoJoin date: November 2009Posts: 10Downloads:0Uploads:1]

#323375

Sorry about that, it sould be:

http://www.freeman-international.com/site

[gmihailo Friend gmihailoJoin date: November 2009Posts: 10Downloads:0Uploads:1]

#323385

can someone please help me out?

I just want the 6 boxes to be evenly spaced between columns and rows so it looks presentable.

im sure this is very easy for a developer but i do not know how to achieve this.

at the moment it seems as if it is trying to put all 6 boxes on one line.

your help would really be appreciated.

[prakash Friend prakashJoin date: October 2008Posts: 439Downloads:0Uploads:1 Thanks: 2 Thanked: 146 times in 115 posts]

#323392

Ok,

The problem is occuring because as there are 6 boxes, what it does is sets the three boxes on the first row.
Then what happens is that the padding for the other box remains, and that is creating the problem as the boxes are shifting a bit to the right.

What you would need to do is modify the script (index.php) a bit. create a new module position and then call the remaining 3 in the row below. this would solve your problem.

the code for modifying can be found here

<!-- TOPBLOCK -->
<?php if( $this->countModules('user5') ) { ?>
<div id="ja-topsl" class="wrap clearfix">
<jdoc:include type="modules" name="user5" style="jamodule" />
</div>
<?php } ?>
<!-- //TOPBLOCK -->

where its written jdoc:include …..user5…

just after that (copy the line and paste it again) then say give module name user5a

now in module positions call 3 images in the 5a position and it will display fine

[gmihailo Friend gmihailoJoin date: November 2009Posts: 10Downloads:0Uploads:1]

#323396

Thanks for that!

I have understood everything you mentioned and done so, except for the final line.

If I go into module position and select the “module position” sorting drop down box, I cannot see a “user5a” option. Is this what you were referring to?

I am a little confused 🙁

[prakash Friend prakashJoin date: October 2008Posts: 439Downloads:0Uploads:1 Thanks: 2 Thanked: 146 times in 115 posts]

#323398

you can write the name user5a there

just click on the dropdown and it will create a blank space where u can type anything…

[gmihailo Friend gmihailoJoin date: November 2009Posts: 10Downloads:0Uploads:1]

#323401

Ahhh yes I just thought of that.

Many thanks for that! They are lining up now!

Now is there a way of putting a linebreak or some sort of gap between the two modules so they aren’t touching and look more presentable?

Also, the widths between the two columns are slightly different. Is there a way of evening them up at all?

Is there a way of pulling the background and horizontal line that ends after the user5 down to the bottom of user5a instead?

I hope that what I have said isn’t too confusing?

[prakash Friend prakashJoin date: October 2008Posts: 439Downloads:0Uploads:1 Thanks: 2 Thanked: 146 times in 115 posts]

#323403

for line break… you can simply add a <br/> just before the new module starts.

i checked the widths are fine…

for the background you will need to modify the css…

[gmihailo Friend gmihailoJoin date: November 2009Posts: 10Downloads:0Uploads:1]

#323405

thanks for all your help so far.

now i need to ask just one more thing.

you will notice that the widths between the columns are slightly different. how can i make them nice and even.

thanks again!

[prakash Friend prakashJoin date: October 2008Posts: 439Downloads:0Uploads:1 Thanks: 2 Thanked: 146 times in 115 posts]

#323406

hi…

like i mentioned in my earlier post…i checked the column widths and they look same to me..no difference.

or please post a screenshot… that would give better idea of what you are trying to convey…

thanks

[gmihailo Friend gmihailoJoin date: November 2009Posts: 10Downloads:0Uploads:1]

#323408

<em>@prbalge 152632 wrote:</em><blockquote>hi…

like i mentioned in my earlier post…i checked the column widths and they look same to me..no difference.

or please post a screenshot… that would give better idea of what you are trying to convey…

thanks</blockquote>

i have posted a screen shot to illustrate my two issues.

again thanks for your support. i really want to fix this. the site needs to be presentable.

---

Attachments:

1. 

[prakash Friend prakashJoin date: October 2008Posts: 439Downloads:0Uploads:1 Thanks: 2 Thanked: 146 times in 115 posts]

#323413

Ok, now i understand the problem.

the fix is simple.

the left width(between 1st and second position) is handled by a fixed spacing.

open the template/jasulfur/css/template.css file

find this line

.ja-catslwi-first {
margin-right: 10px;
}
change the margin from 10 to 15…or 16… this would solve your space problem.

now with regards the problem with spacing between the first row and second row…

instead of using <br/>
write <div style=”height:15px;”></div>

height can be any figure you want…
this will solve the space problem between rows.

[gmihailo Friend gmihailoJoin date: November 2009Posts: 10Downloads:0Uploads:1]

#323439

Excellent! Thanks for all your help. I have all the spacing issues now sorted 🙂

Finally, can you give any direction on what CSS elements need to be edited in order to make the background of user5 stretch down to user5a?

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#323859

Hi gmihailo

In template.css file, you can add following code and style for this position:

#ja-topsl {

}

Additional, you should use firebug add-on of firefox to debug your issue.

[Author]

Posts