Italian newbie wonders about different backgrounds...

Replies to This Discussion

Permalink Reply by Martin Blodau on October 23, 2009 at 6:11am

Hi an welcome to the Joomla! world!

1) Is it possible to set a different background for each page when using one single template? If yes, is there a tutorial for newbies regarding this matter?

- If you really want to only use one single template then you would need to use some php logic in your index.php file of the template. Since you say that you are rather new with this i wouldn't suggest that solution.

An easier way that doesn't require any coding knowledge is to make several copies of your template and use Joomla!'s template manager to assign each version to another menu point. Then you can add different css styling for the page background in each template.

Take a look in the Joomla! backend under "Extensions" --> "Template Manager" and then click on the template name to get to the window where you can connect the template to certain menu points.

2) Is it possible to adapt fullscreen background to whatever screen resolution with CSS only?

- Could you give a more detailed example about this? It's a bit hard to grasp what exactly you are trying to do.

Permalink Reply by Beatriz Lamarca on October 23, 2009 at 6:27am

Hm, apparently I cannot assign default templates... :(

Attachments:

• Schermata 2009-10-23 a 13.23.33.png, 87 KB

Permalink Reply by Beatriz Lamarca on October 23, 2009 at 6:33am

regarding the 2nd question:

Hm, if you see on the homepage: www.galleriaverrengia.it/NEW/homepage the images on the background auto-resize to whatever screen resolution (try resizing your browser window and you'll see what I mean).
To do such thing I used a little script called 'supersized' (http://buildinternet.com/project/supersized/)

Permalink Reply by Ahmad Alfy on October 23, 2009 at 8:39am

I've seen that with some templates from Rockettheme changing the background and color scheme from page to page.

what do you mean to adapt backgrounds on any resolution?

Permalink Reply by Martin Blodau on October 23, 2009 at 8:56am

That is a pretty cool effect.

Edit: Just noticed that the plugin you use for that is using jquery. It's usually good to avoid jquery based stuff on a Joomla! site. It will break every extension that uses mootools (which most extensions do).

Permalink Reply by Beatriz Lamarca on October 23, 2009 at 9:19am

yeah, infact i am only using it on the homepage (which is a simple html - no joomla whatsoever)...
and that is the reason i was wondering if there is any possibility of creating that same effect with CSS only.
i guess not :\

Permalink Reply by Jonathan Lackey on October 23, 2009 at 11:05am

Hey Beatriz,
You're going to be in love once you learn the little templating secrets.

For what you're wanting to do, I think there is an easier way than what has been discussed so far.

You can assign a "Page Class Suffix" to any menu item. Take a look at this screen shot...

You simply assign your page class to the menu item. Then in your template file (index.php) you would do something like this to assign the page class suffix to each page...

You could also do some php logic to load a random class to the page witch you can use to load random backgrounds. We did that on this site... http://visitloscabos.travel

Something else you REALLY want to familiarize yourself with are template overrides if you have not already... http://delicious.com/Creative_Contractor/override

Hope that helps.

Permalink Reply by Rene Kreijveld on October 23, 2009 at 12:08pm

Hi Beatriz, here is how I would solve this. It is also a solution that doesn;t require to create several templates.

First create a custom HTML module for each background variation that you want to use.
Let's for example assume you have three different backgrounds next to the default background.

Go to the module manager: Extensions > Module manager
Click New at the top and as module type choose: Custom HTML
As title type in: Background1.
And here comes the tricky part: In the position dropdown list do NOT select any of the existing module positions, but type in a name for the module position. For Background1 enter module position "background1". The content inside the module is irrelevant.

Save the module, and keep it unpublished for now.

Now, do the same for two other modules called "Background2" and "Background3".
And offcourse, put Background2 module on module position background2.
Put Background3 module on module position background3.

If we look at the list of custom modules, then we see three "Background" modules on their own module positions:

Now for eacht of these modules, open them and publish them and assign them to the pages that you want your specific background to be active. For example if you want background1 to be active on the homepage, then choose the homepage from the Menu Selection. If you want background2 to be active on the newspage, then choose the newspage from the Menu Selection on the Background2 module.

I think it is obvious that you cannot assign two different Backgrounds to the same menu item :-)

Don't forget to publish your Backgrounds modules!

Now comes the second tricky part, modifying the index.php file of your template.
What we are going to do is check in the head part if a module is published for that page and modify the CSS for the body accordingly!

Here is the code:

Add this code just before the closing tag of the head, but at least after the lines where you load your regular css files of the template.

Now the power ofcourse lies in the CSS. You can not only change the background but set a different background image and lots more for each background.
Good luck!

Permalink Reply by Amy Stephen on October 23, 2009 at 2:48pm

Great question! Great designer! Great community involvement! I find myself wondering how long it would take us to put together enough cool stuff to have a little Pro Joomla! Tips manual? Thanks to all!

Permalink Reply by Marco Barbosa on October 23, 2009 at 3:36pm

A cute girl asking for help and everybody jumps in hahaha just kidding :D

Actually that is not HTML either, Beatriz. It's a javascript plugin

Take a look into the source, the one taking care of that resizing is:
""
and

"$('#supersize').supersized();"

And yes, you can use that in any Joomla! template, I can't see a reason why not.

Maybe you'd have to use with the Jquery noconflict mode though because Joomla! runs with Mootools.

I strongly suggest you to use the forums for asking for help as well - not sure if this is the right place.

Permalink Reply by Marco Barbosa on October 23, 2009 at 4:00pm

Oh no, I though you asked how that website achieved that effect.
Reading later carefully and I realized you did not
Sorry, my bad! D:

Now for your REAL questions (heyhey it's almost midnight on a Friday Ok?):
1) Yes, there are many ways you can achieve that. I'd do it like this:
$ItemId = JRequest::getVar('Itemid'); switch($ItemId){ // code here to add style }

Where Itemid is your page id, you can check the id in the menu manager.

2) It's hard with CSS only.I think the best CSS solution for this would be with tables that I read somewhere. Can't find the link now but Google might know it.

Good luck!

Permalink Reply by Stephen Tredrea on October 24, 2009 at 2:36am

Nice. Thank you.

What I've also done one a site is add JRequest::getCmd('option', Null) and JRequest::getCmd('view', Null) as separate classes to the body tag.

This, with Jonathan's tip, gives css control at a component level, view level or page level, depending on the design requirements.

Using Itemid may be an alternative to the page class suffix if you don't want the hassle of providing this for each menu item (although I know how everyone loves the Itemid).

On another site I also added separate classes to the body tag for the existence of modules that affect layout such as 'left' and 'right' and used that to control the width of the middle column.

Small, easy adjustments with powerful results.

• ‹ Previous
• 1
• 2
• Next ›
• Page