Joomla Templates Club 406,261 posts

[jeroen07 Friend jeroen07Join date: August 2009Posts: 86Downloads:0Uploads:24 Thanks: 14]

#157900

I would like to make an extra module position. I would like to have it right under the article. Actually, the same as the slideshow module position, but then under the article…

How can i do that ?

---

Attachments:

1. 

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#368666

No Problem. Open your templates layouts tab and edit the Default block from

<?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="top-panel" type="modules" style="raw" main-inner="1">top-panel</block>
<block name="mainnav" type="mainnav" main-inner="1"></block>
<block name="header" type="header" 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="35">
<block name="inset1" width="18">left</block>
<block name="content-mass-top">slideshow</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="footer" type="footer"></block>
</blocks>
</layout>

and change to

<?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="top-panel" type="modules" style="raw" main-inner="1">top-panel</block>
<block name="mainnav" type="mainnav" main-inner="1"></block>
<block name="header" type="header" 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="35">
<block name="inset1" width="18">left</block>
<block name="content-mass-top">slideshow</block>
<block name="right1">right</block>
<block name="content-mass-bottom">slideshow2</block>
</blocks>
<blocks name="bottom" style="xhtml">
<block name="botsl" type="spotlight" main-inner="1" >user6,user7,user8,user9,user10</block>
<block name="footer" type="footer"></block>
</blocks>
</layout>

This will give you a new block where you have a module position called slideshow2.

1 user says Thank You to Phill for this useful post

1. jeroen07

[jeroen07 Friend jeroen07Join date: August 2009Posts: 86Downloads:0Uploads:24 Thanks: 14]

#368681

Thanks alot ! And is it possible to display 2 modules here, who each takes 50 percent of the width ?

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#368683

Yep, again quite simple. Please take a little time to read the Wiki as it explains all very well. If you still cannot do it after reading that then just ask and I will post details.

http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides#Block_attributes_and_parameters

[jeroen07 Friend jeroen07Join date: August 2009Posts: 86Downloads:0Uploads:24 Thanks: 14]

#368763

I’ve read it and i can’t see how i can display 2 modules next to each other ? I’m not yet that familliar with the T3 Framework…

I tried this but i came out wrong 🙂

<blockquote><block width=”50%” name=”content-mass-bottom”>slideshow2</block> <block width=”50%” name=”content-mass-bottom”>slideshow3</block></blockquote>

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#368764

Use

<block name="content-mass-bottom" type="spotlight">slideshow2,slideshow3</block>

Where slideshow2 and slideshow3 are your position names. You can name them whatever you want. You may want to style them with css too but we can look at that if required.

[jeroen07 Friend jeroen07Join date: August 2009Posts: 86Downloads:0Uploads:24 Thanks: 14]

#368924

Could you please explain step by step how i can do this ? Then i think i’ll be able to make new module positions in the future.

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#368928

Which part do you need an explanation for? The css styling or where to put the above code?

[jeroen07 Friend jeroen07Join date: August 2009Posts: 86Downloads:0Uploads:24 Thanks: 14]

#368977

Well, CSS I think.

This is how it is now:

This is how I would like to have it:

---

Attachments:

1. 
2. 

[jeroen07 Friend jeroen07Join date: August 2009Posts: 86Downloads:0Uploads:24 Thanks: 14]

#369377

Could someone please help ? It’s quite important…

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#369380

Sorry, I missed this one.

Open layout.css and around line 100 you will find the code


.ja-box-right {
position:absolute;
right:0;

}


change to


.ja-box-right {
right:0;

}


and see if that works.

2 users say Thank You to Phill for this useful post

1. jeroen07
2. David Porré

[jeroen07 Friend jeroen07Join date: August 2009Posts: 86Downloads:0Uploads:24 Thanks: 14]

#369400

Ok, thanks for that, we’re getting close…

Now i would like to delete the border under the h3 title and change the paddings/margins so that it would look like this:

I’ve tried several things but can not chang that h3… It’s between these tags:

<div class="ja-box column ja-box-left" style="width: 50%;">
<div class="ja-moduletable moduletablefrontpageonderaan clearfix" id="Mod117">
<h3><span>Meer nieuws...</span></h3>
<div class="ja-box-ct clearfix">

<!-- START 'DisplayNews by BK 1.7.0' -->

<span class='frontpageonderaan '>
</span><div class='frontpageonderaan ' ><span class='latestnewsfrontpageonderaan '><a href="/component/content/article/37-nieuws/728-eendracht-legioen-trekt-naar-t-kiel" class='frontpageonderaan ' >Eendracht legioen trekt naar 't Kiel</a></span> <span class='createdatefrontpageonderaan '>(26/10)</span>
<div style="clear: both;"></div></div><div class='frontpageonderaan ' ><span class='latestnewsfrontpageonderaan '><a href="/component/content/article/80-voorbeschouwing1011/726-vb-olsa-brakel-eendracht-aalst" class='frontpageonderaan ' >VB: Olsa Brakel - Eendracht Aalst</a></span> <span class='createdatefrontpageonderaan '>(20/10)</span>
<div style="clear: both;"></div></div><div class='frontpageonderaan ' ><span class='latestnewsfrontpageonderaan '><a href="/component/content/article/80-voorbeschouwing1011/721-vb-cappellen-eendracht-aalst" class='frontpageonderaan ' >VB: Cappellen - Eendracht Aalst</a></span> <span class='createdatefrontpageonderaan '>(13/10)</span>
<div style="clear: both;"></div></div><div class='frontpageonderaan ' ><span class='latestnewsfrontpageonderaan '><a href="/component/content/article/81-supportersvergaderingen/722-supportersvergadering-25062010" class='frontpageonderaan ' >3de Supportersvergadering: 25/06/2010</a></span> <span class='createdatefrontpageonderaan '>(25/06)</span>

<div style="clear: both;"></div></div>

<!-- END 'DisplayNews by BK 1.7.0' -->
</div>
</div>

</div>


---

Attachments:

1. 

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#369403

Without seeing the page in question and you posting nice big arrows so I know what parts you want changed it is going to be really hard to work out.

Have you tried using Firebug – http://getfirebug.com/downloads

[jeroen07 Friend jeroen07Join date: August 2009Posts: 86Downloads:0Uploads:24 Thanks: 14]

#369422

Hey phill,

yes i have…

I’ll send you the url and password in PM, site is still offline…

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#369429

I still need an image with big arrows showing exactly what you want to be changed. Did firebug not help?

The line at the bottom is controlled by the following css in template.css around line 256


div.ja-moduletable h3, div.moduletable h3 {
border-bottom:5px solid #DDDDDD;
color:#555555;
font-family:Arial,Helvetica,sans-serif;
font-size:100%;
font-weight:bold;
padding:0 0 10px;
text-transform:uppercase;

}


To change the positioning of the box for less space find template.css and around line 621 change


.ja-mass-bottom {
}

to


.ja-mass-bottom {
position:relative;
top:-20px;

}


[Author]

Posts