2

I'm trying to adjust the body for every screen resolution. I'm using Joomla to develop a website, and as you know it has a default template with its own CSS. Then I created some articles that need a different CSS file, because of same tags (for example ul, li.. etc) and I've should set the template like component (I did that simply attaching "tmpl=component" at the end of the URL). Unfortunately that's a problem because if I'd like to edit the body in these articles I can't; infact the body tag has become "body contentpane" that is completely different. I tried two different ways: first of all I set a specific template for every article but it didn't work; so I attempted to insert a blank template but I think it's not easy to set up all the details of that Thanks everyone for the attention!!

Improve this question
1
  • 1
    By the way, I think the question needs to be a little clearer. Part of it has to do with loading css for specific pages, and the other part mentions screen resolutions. Those are really 2 independent issues.
    – Brian Peat
    May 17, 2014 at 1:42

5 Answers 5

Reset to default
2

If your template is set up correctly, when you add a page class in the menu item it adds it to the page as a body class. So you can just add extra css to your template and prefix it with body.yourpageclass so it only loads on the pages that have that class in the menu item.

Here's an example: Customized Trip Page

This and the other trip pages use a page class called trip-page (view the source and you can see it).

I used something like this then:

body.trip-page .box3.nohover .rt-block {background-image: url(../../../images/IMT/trip-page-overlay-plane.png);}

Your code will vary from this, but that .rt-block is the article content box and I wanted a custom background ONLY on the trip pages.

There's also another way to do this, and that is to code your own template so that something unique is in that body tag on the page. Rocket theme does this with a switch in the template actually. You could theoretically mod the template so that the article category loads into the body tag at the top, allowing you to use custom css on entire categories.

Improve this answer
1

Joomla has the ability to attach a page class for every site. Go to the Joomla Menu Manager and open a Menu point. Then search for the "Page Class Suffix" setting and put your own css class like "flat-article-layout". Then you can use this class to design this particular page in your css like this:

.falt-article-layout ul li{list-style:none;}

or you try Template Overrides:

http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

Improve this answer
2
  • And with this method could I "delete" the template (for that specific page) and make my own CSS ?
    – user2348092
    May 16, 2014 at 15:14
  • No you can't. But you can override the template css with your own styles for this particular page.
    – Joomla Agency
    May 16, 2014 at 20:23
1

in the file /templates/your_template/index.php you can adjust the body tag to add classes you may need, with media queries you can adjust it based on the screen resolution.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

if you need different layouts for various pages with appending ?tmpl=component you can just create a file component.php in the same directory (or any name as long as it matches) to adjust the layout for that.

Improve this answer
1

To create specific targets for your css you can echo various page variables to a class on the body element, giving you a highly specific css hook to target your styles to.

At the top of your index.php:

<?php
$app = JFactory::getApplication();
// Detect the active variables
$option   = $app->input->getCmd('option', '');
$view     = $app->input->getCmd('view', '');
$layout   = $app->input->getCmd('layout', '');
$itemid   = $app->input->getCmd('Itemid', '');
?>

And on the body tag:

<body class="<?php echo $option . " view-" . $view . " layout-" . $layout. " itemid-" . $itemid . "";?>">

Of course, you don't need to do this to adjust the body element based on screen resolution, you only need some @media-queries in your css to do that.

Improve this answer
0

By using "tmpl=component" OR "tmpl=my_new_template_name" you can have many different layout schemes for you website by putting a file in the directory /templates/system/my_new_template_name.php. If you are using "tmpl=component" then you can modify /templates/system/component.php as per your requirements. Let me know if you need more guidance.

Improve this answer
1
  • Sorry but I can't understand what you are suggesting. Meanwhile I thought to remedy with a JQuery solution (even if it doesn't work too). What do you think about?
    – user2348092
    May 16, 2014 at 12:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.