Joomla Templates Club 406,261 posts

[mediaartsinc Friend mediaartsincJoin date: November 2007Posts: 2Downloads:0Uploads:0]

#157036

I would like to change the width of the Top Slideshow and make the the right side next to the slideshow 300 pixels wide. If i currently do this through the layouts by increasing the column width from 22 to 30 it also affects the layout for the main content and left and right content below the slideshow.

How can i make the change to the top slideshow and module next to the slide without affect the others below?

[Khanh Le Moderator Khanh LeJoin date: November 2013Posts: 1884Downloads:41Uploads:31 Thanks: 44 Thanked: 203 times in 131 posts]

#365584

The right side module of slideshow is an module in right column, therefore its width equal the width of the right column. The simplest method to increase that module width is inscrease the right column width. You can do that by add width for the right column as bellow:

<blocks name=”middle” colwidth=”22″>
<block name=”content-mass-top” style=”jaraw”>content-mass-top</block>
<block name=”content-top” type=”spotlight”>user1,user2,user3</block>
<block name=”inset2″>left</block>
<block name=”right2″ width=”30″>right</block>
</blocks>

If you just want to increase the width of the right side module of the slideshow, you must move the slideshow and the right module to another block and ajust its width. This is an sample:

<?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=”jaraw” main-inner=”1″>top-panel</block>
<block name=”header” type=”header” main-inner=”1″></block>
<block name=”topbar” type=”topbar”></block>
<block name=”mainnav” type=”mainnav”></block>
<block name=”cpanel” type=”usertools/cpanel”></block>
<block name=”topslideshow” type=”spotlight” special=”right” specialwidth=”30″ style=”jaraw”>content-mass-top,rightmod</block>
</blocks>
<blocks name=”middle” colwidth=”22″>
<block name=”content-top” type=”spotlight”>user1,user2,user3</block>
<block name=”inset2″>left</block>
<block name=”right2″>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>
<block name=”ie-rounded” type=”ie-rounded” no-main=”1″ no-wrap=”1″></block>
</blocks>
</layout>

You can see that the slideshow module (in position content-mass-top) is moved to top area. You could publish the right side module to rightmod position.

In both case, when changing the width of block for slideshow module, you must go to slideshow module manager (in administrator) and adjust its setting to make it suit to new width. For the second case, you also have to apply some style for the slideshow and right side module.

[jamjodesign Friend jamjodesignJoin date: June 2008Posts: 432Downloads:27Uploads:40 Thanks: 59 Thanked: 14 times in 3 posts]

#366325

Hi there, I have made my slideshow bigger – to be exact i have made it the full width of the screen. However the controls for the slideshow seem to mess up? Take a look at the attached screen – look closely and you will see the arrows are still in the original position and also the description only shows 4 descriptions even though I have selected 6 in the backend.

Also I want to keep the original demo layout of the homepage but with the image full width of the screen. So the only change is that the right column gets pushed down? How do I do this in the layout manager? I can only get it to look like the attached with a left colum then a middle section then a right column. I want it to be full screen slideshow and then main body section, left column and then right colum? :-[

---

Attachments:

1. 

[jamjodesign Friend jamjodesignJoin date: June 2008Posts: 432Downloads:27Uploads:40 Thanks: 59 Thanked: 14 times in 3 posts]

#366526

Shameless bump on this because when I change the size of the slideshow the description area and the navigation arrows do not work? :-[

[jamjodesign Friend jamjodesignJoin date: June 2008Posts: 432Downloads:27Uploads:40 Thanks: 59 Thanked: 14 times in 3 posts]

#366597

So the deafing silence I guess is based on the fact you cannot change the size of the slideshow without the controls breaking then ? :confused:

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#366673

Hi,

I set fullscreen for slideshow as following:

– Go to template manage on admin, choose “ja_social” template, clieck “Layouts” tab and edit default layout.
– change


<blocks name="middle" colwidth="22">
<block name="content-mass-top" style="jaraw">content-mass-top</block>
<block name="content-top" type="spotlight">user1,user2,user3</block>
<block name="inset2">left</block>
<block name="right2">right</block>
</blocks>

Remove block name = content-mass-top to
<blocks name="top" style="xhtml">
same


<blocks name="top" style="xhtml">
...
<block name="content-mass-top" style="jaraw">content-mass-top</block>
</blocks>
<blocks name="middle" colwidth="22">
...

– Go to slideshow configuration on admin, change some params
Main Item width = 960
Number of displayed items = 5
Item width = 160
Item height = 165

– Find line code .ja-slidewrap-style2 .ja-slide-thumbs-wrap and .ja-slide-thumbs-wrap ( on file templatesja_socialcssmod_jaslideshow2.css)
remove line

width: 662px !important;
and

width: 100px !important;

– Find line code .ja-slide-buttons span.ja-slide-next ( on same above file )
Change code


.ja-slide-buttons span.ja-slide-next {
background: url(../images/next-slideshow.png) no-repeat right bottom;
height: 27px;
width: 18px;
position: absolute;
right: -700px;
}


To


.ja-slide-buttons span.ja-slide-next {
background: url(../images/next-slideshow.png) no-repeat right bottom;
height: 27px;
width: 18px;
position: absolute;
right: -940px;
}
top: 300px;

screenshot:

[/URL]

[jamjodesign Friend jamjodesignJoin date: June 2008Posts: 432Downloads:27Uploads:40 Thanks: 59 Thanked: 14 times in 3 posts]

#366918

Thanks for this but on other pages – I would like the slideshow to be smaller so if I change the css does this mess with everything else?

[jamjodesign Friend jamjodesignJoin date: June 2008Posts: 432Downloads:27Uploads:40 Thanks: 59 Thanked: 14 times in 3 posts]

#366926

I tested out your Block changes and it does not work – it looks like your screenshot alright which is not exactly correct as now it squashed against the menu and the blue background is extending down the page? Is there a way to make it look exactly like the demo but simply have a full width banner? I make all the changes you asked and it did look like your screen – but it looks kinda bad???

<blocks name=”top” style=”xhtml”>
<block name=”top-panel” type=”modules” style=”jaraw” main-inner=”1″>top-panel</block>
<block name=”header” type=”header” main-inner=”1″></block>
<block name=”topbar” type=”topbar”></block>
<block name=”mainnav” type=”mainnav”></block>
<block name=”cpanel” type=”usertools/cpanel”></block>
<block name=”top” style=”jaraw”>content-mass-top</block>
</blocks>
<blocks name=”middle” colwidth=”22″>
<block name=”top” style=”jaraw”>content-mass-top</block>
<block name=”content-top” type=”spotlight”>user1,user2,user3</block>
<block name=”inset2″>left</block>
<block name=”right2″>right</block>
</blocks>

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#366927

@jamjodesign: you can change style for the slideshow to be smaller, but remember slideshow position, currently i set slideshow position is content-mass-top, and define block


<blocks name="top" style="xhtml">
..
<block name="content-mass-top" style="jaraw">content-mass-top</block>
</blocks>

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#366928

@jamjodesign,

This problems are because your block name is incorrect


<block name="top" style="jaraw">content-mass-top</block>


Please change to


<block name="content-mass-top" style="jaraw">content-mass-top</block>


[jamjodesign Friend jamjodesignJoin date: June 2008Posts: 432Downloads:27Uploads:40 Thanks: 59 Thanked: 14 times in 3 posts]

#366951

Ok I changed like you said but now I am back to the original layout and this is no good because I simply want the slideshow to go full width of the screen and then keep the layout of wide middle inset and right2???? How do I do this. If I change the name of the block element I get what you have in your screenshot – which yes does have the slideshow going full width and yes it has the right layout underneatht the slideshow but the whole background then is messed up??? Can you see in your screenshot what I am talking about – the big blue background you now have behind your slideshow should not be there? Also the slideshow is jammed up against the menu? So what I am saying is your screenshot is not corret that you showed me because of this.

I need the layout to be simply the same as the original demo but with full width slideshow?

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#367059

Hi Jamjodesign,

You can edit block position to resolve your problems as following:
– Edit layout default on location “extensions/template manager/ja_social”, change code


<blocks name="middle" colwidth="22">
<block name="content-mass-top" style="jaraw">content-mass-top</block>
<block name="content-top" type="spotlight">user1,user2,user3</block>
<block name="inset2">left</block>
<block name="right2">right</block>
</blocks>


To


<blocks name="middle" colwidth="22">
<block name="content-mass-top" style="jaraw">content-mass-top</block>
<block name="content-top" type="spotlight">user1,user2,user3</block>
<block name="inset1">left</block>
<block name="inset2">right</block>
</blocks>

Then change your style of slideshow to show full width.

[Author]

Posts