1

I'm having a problem with home page not showing up correctly on mobile, images don't scale down and the page looks messed up. However, this only happens when opening the site by typing the address or clicking on the logo. In both of those cases the page opens up with body class "cms-index-index cms-home".

here's the class

here's the mobile version with unscaled pictures, this opens up after clicking the logo or typing the site address in the address bar

If I go to the home page by clicking the HOME link, then it opens up with "cms-page-view cms-home" body class and images scale down on mobile view and all looks well.

here's the class

here's the correct mobile version with scaled images, this opens up after clicking HOME link

I have a few questions

  1. How come the first body class doesn't scale the images? I thought Magento was responsive.

  2. When inspecting element, I don't understand how to tell which file I need to go to so I can edit the things shown on the left. Everything shown on the left is shown as INDEX under "sources" in "inspect element" view (or HOME, when opening it using the HOME link), and there are no files with those names. I also tried searching all files for "cms-page-view cms-home" and nothing comes up. How do I find the files that have the code shown on the left?

  3. I want to change the class from "cms-index-index cms-home" to "cms-page-view cms-home". It solves the problem when I try changing it in the "inspect element" view. But is this the correct solution?

EDIT: I tried the solution and it's not working, posting the details here because I can't format them in the comments

I followed the instructions here to override the block http://code.tutsplus.com/tutorials/understand-overriding-in-magento-blocks--cms-23325

here's my Boomie_All.xml

<?xml version="1.0"?>
<config>
  <modules>
    <Booomie_Page>
      <active>true</active>
      <codePool>local</codePool>
    </Booomie_Page>
  </modules>
</config>

here's my Config.xml

    <?xml version="1.0"?>
<config>
  <modules>
    <Booomie_Page>
      <version>1.0</version>
    </Booomie_Page>
  </modules>
   <global>
    <blocks>
      <page>
        <rewrite>
          <html>Booomie_Page_Block_Html</html>
        </rewrite>
      </page>
    </blocks>
  </global>
</config>

and here's the Html.php (the code you gave with changed function names)

<?php 
class Booomie_Page_Block_Html extends Mage_Page_Block_Html{

    public function getBodyClass()
    {
        /* detect current page is home and return
        * cms-page-view cms-home as body class  
         */
        $action = Mage::app()->getFrontController()->getAction()
        if($action->getFullActionName()=='cms_index_index'):
            return 'cms-page-view cms-home';
        endif;
        return $this->_getData('body_class');
    }
}

Did i do this wrong?

Improve this question

2 Answers 2

Reset to default
1
+50

lalachka

Q1: Magento was responsive

Answer: Magento responsive design depend on it theme.You may be use custom theme,So magento does not responsible for responsive.If you use magento default responsive theme RWD and does not have any customization then your should see responsive Design.

Q3: Class from "cms-index-index cms-home" to "cms-page-view cms-home"

Answer: This body class automatically generate basic of magento logic.You need do some customization you want to change body to cms-page-view cms-home

Solution

For this case,you need Override the Block class Mage_Page_Block_Html .

and at function getBodyClass() return value cms-page-view cms-home when it is home page.

<?php 
class [ModuleNameSpace_ModuleName]_Block_Page_Html extends Mage_Page_Block_Html{

    public function getBodyClass()
    {
        /* detect current page is home and return
        * cms-page-view cms-home as body class  
         */
        $action = Mage::app()->getFrontController()->getAction();
        if($action->getFullActionName()=='cms_index_index'):
            return 'cms-page-view cms-home amit';
        endif;
        return $this->_getData('body_class');
    }
}

enter image description here

Improve this answer
10
  • Yes, I'm using a custom theme that I made by copying rwd theme. I only made slight changes. Anyway, so where do I go to change the class? I can't find where it is. Or are you saying that I can't change it easily? Which file stores it? How can I tell what's shows on the left of the "inspect element"?
    – lalachka
    Commented Apr 21, 2016 at 7:42
  • I'm sorry, I didn't get a notification that you added to the answer. I will test it tonight and respond. Thank you very much! !!!!
    – lalachka
    Commented Apr 24, 2016 at 2:24
  • Also, can you please answer question #2. I should probably post it as a separate question? Trying to understand how to work with INSPECT ELEMENT.
    – lalachka
    Commented Apr 24, 2016 at 2:26
  • it's not working, still loading the old version. see the original question for the details of how i did this
    – lalachka
    Commented Apr 24, 2016 at 6:57
  • In my code,there are issue in system ; missing at $action = Mage::app()->getFrontController()->getAction() and You need to check any other class rewrite ` Mage_Page_Block_Html` class.Also check you have enable magento compiler and if yes then recompile again the system
    – Amit Bera ♦
    Commented Apr 24, 2016 at 12:41
1

If you're comfortable writing code and creating a new Module, follow these instructions to overwrite Mage_Adminhtml_Block_Page class. In your new custom class, add the following method:

/**
 * Remove CSS class from page body tag
 *
 * @param string $className
 * @return Mage_Adminhtml_Block_Page
 */
public function removeBodyClass($className)
{
    $className = preg_replace('#[^a-z0-9]+#', '-', strtolower($className));

    $existingClassNames = explode(' ', $this->getBodyClass());
    if ($i = array_search($className, $existingClassNames)) {
        unset($existingClassNames[$i]);
        $this->setBodyClass(implode(' ', $existingClassNames));
    }

    return $this;
}

From there, you can then add this to your Layout XML:

<reference name="root">
        <action method="removeBodyClass">
            <className>cms-index-index cms-home</className>
        </action>
</reference>

There are multiple solution to add new body class in Magento:

XML Layout File

This is perfect if you want to target a group of pages and give them all a common body class. Here is how you can accomplish it with just a few lines of XML:

<reference name="root">
        <action method="addBodyClass">
            <className>cms-page-view cms-home amit</className>
        </action>
</reference>

Admin Panel

This method involves layout updates, which are text area fields that Magento provides.This is where we can include blocks of XML code that overrides or adds actions for a particular page.

For example, if you go to Catalog > Categories > Manage categories and select the category that you want to add a new class to, within the ‘Custom Design’ tab you will find one of these ‘Custom Layout Update’ text areas.

All you have to do is include the same code snippet provided above, but you can skip the first tag and start from because there is no need to specify which page you’re updating.

CMS Page XML Layout

In the case of category pages, if you want the children categories to have the same body class as their parent category, all you need to do is go to the children category’s ‘Custom Design’ tab and select ‘Yes’ on the ‘Use Parent Category Settings’ option.

Hope you found this answer helpful! Have nice day and happy coding :)

Improve this answer
3
  • 1
    hey, sorry, the other answer was here first :)
    – lalachka
    Commented Apr 25, 2016 at 5:53
  • 2
    @lalachka: It's not about the bounty. It's about sharing knowledgement :)
    – Toan Nguyen
    Commented Apr 25, 2016 at 6:39
  • i appreciate you saying this :) but i feel bad every time i get more than 1 answer, i wish there was a way to award points to both. i will test your answer as well, really curious about it
    – lalachka
    Commented Apr 25, 2016 at 18:43

Your Answer

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

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