¿Cómo puedo saber qué archivo .css se usa para una determinada plantilla?

Question

¿Cómo puedo saber qué archivo de estilo se usa para una determinada plantilla? Porque para las plantillas de pago de facturación/envío, se utiliza un archivo CSS. Pero cuando quiero modificar la plantilla para la página de dirección del cliente (cuando está en la cuenta del cliente, modificando la dirección), aparentemente las clases que tengo en ese CSS no se aplican. Y quiero saber qué CSS se usa, por ejemplo, para escribir en el registro de la ruta al cierto archivo de estilo, por lo que sé dónde modificar mi diseño.

Answer 1

Como Fabian ya hablaba de manijas de diseño, pensé que podría ofrecer una respuesta potencial diferente. En casi cualquier navegador en estos días (mis capturas de pantalla usarán Chrome), eche un vistazo al inspector web.

Digamos que queremos darle a este cuadro de texto un borde rojo. Tonto, lo sé. Usaré el sitio web de Royal Academy Shop para estas imágenes, pero la tuya también lo hará bien.

Bueno, si hago clic derecho en él y selecciono "Elemento Inspect", mencionaré al inspector, mirando ese cuadro. Eche un vistazo al lado derecho, debajo de la pestaña Estilos, verá una lista de todas las reglas CSS, así como las líneas y archivos en los que se aplican. Las reglas que se anulan se cruzan. Probablemente encontrarás tu regla fronteriza allí.

Simplemente busque dónde se define realmente el borde y reemplácelo en ese archivo.

Answer 2

No sabe qué archivo CSS se usa.

Manijas de diseño y archivos XML de diseño

Magento trabaja con los llamados "manijas de diseño" que agrupan las acciones en el diseño. Cada página incluye algunos de ellos, solo eche un vistazo a app/design/frontend/base/default/layout, hay muchos archivos XML con las manijas de diseño como nombres de nodos en los primeros nodos infantiles:

• defecto
• checkout_onepage_index
• checkout_onepage_review
• catalogsearch_term_popular

etc. Esos manejan acciones grupales, como agregar archivos CSS y JS:

<catalogsearch_advanced_index translate="label">
    <reference name="head">
        <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
    </reference>
</catalogsearch_advanced_index>

Dependiendo de la página que esté viendo, los diferentes controladores y bloques agregan estos manijas y al final, la página se basa en ellos.

Responder

Entonces, para responder a su pregunta, debe verificar, qué manijas de diseño se incluyen y qué archivos CSS incluyen.

Y no olvide verificar si los fils se fusionan o no :)