web-dev-qa-db-fra.com

Ajuster la résolution de l'écran

J'essaie d'ajuster le corps à chaque résolution d'écran. J'utilise Joomla pour développer un site Web et, comme vous le savez, il a un modèle par défaut avec son propre CSS. Ensuite, j'ai créé des articles nécessitant un fichier CSS différent, à cause des mêmes balises (par exemple, ul, li .. etc.) et j'ai dû définir le modèle comme composant (je l'ai simplement attaché à la fin "tmpl = composant" de l'URL). Malheureusement, c'est un problème car si je souhaite modifier le corps de ces articles, je ne peux pas; En fait, la balise body est devenue "body contentpane", ce qui est complètement différent. J'ai essayé deux méthodes différentes: tout d'abord, j'ai défini un modèle spécifique pour chaque article, mais cela n'a pas fonctionné; J'ai donc essayé d'insérer un modèle vierge, mais je pense que ce n'est pas facile de mettre en place tous les détails. Merci à tous pour l'attention !!

articlescss
2
user2348092

Si votre modèle est configuré correctement, lorsque vous ajoutez une classe de page dans l'élément de menu, il l'ajoute à la page en tant que classe de corps. Vous pouvez donc ajouter des CSS supplémentaires à votre modèle et le préfixer de body.yourpageclass afin qu’il ne soit chargé que sur les pages contenant cette classe dans l’élément de menu.

Voici un exemple: page de voyage personnalisée

Cette page et les autres utilisent une classe de page appelée trip-page (affichez la source et vous pourrez la voir).

J'ai utilisé quelque chose comme ça alors:

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

Votre code variera de celui-ci, mais ce .rt-block est la zone de contenu de l'article et je voulais un arrière-plan personnalisé UNIQUEMENT sur les pages de voyage.

Il existe également un autre moyen de le faire, à savoir coder votre propre modèle afin que quelque chose d'unique se trouve dans la balise body de la page. Le thème de fusée fait ceci avec un commutateur dans le modèle réellement. Vous pouvez théoriquement modifier le modèle de sorte que la catégorie d'article soit chargée dans la balise body en haut, ce qui vous permet d'utiliser des CSS personnalisés sur des catégories entières.

2
Brian Peat

Pour créer des cibles spécifiques pour vos CSS, vous pouvez envoyer en écho différentes variables de page dans une classe de l'élément body, ce qui vous donne un crochet CSS très spécifique pour cibler vos styles.

Au sommet de votre 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', '');
?>

Et sur la balise body:

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

Bien sûr, vous n'avez pas besoin de faire cela pour ajuster l'élément body en fonction de la résolution de l'écran, vous n'avez besoin que de quelques @ media-requêtes dans vos CSS pour le faire.

1
Seth Warburton

Joomla a la possibilité d'attacher une classe de page pour chaque site. Accédez au gestionnaire de menus Joomla et ouvrez un point de menu. Recherchez ensuite le paramètre "Suffixe de classe de page" et définissez votre propre classe css telle que "flat-article-layout". Ensuite, vous pouvez utiliser cette classe pour concevoir cette page particulière dans votre css comme ceci:

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

ou vous essayez des remplacements de modèles:

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

1
Joomla Agency

dans le fichier /templates/your_template/index.php vous pouvez ajuster la balise body pour ajouter les classes dont vous pourriez avoir besoin. Vous pouvez également ajuster la requête multimédia en fonction de la résolution de l'écran.

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

si vous avez besoin de dispositions différentes pour différentes pages avec l'ajout de ?tmpl=component vous pouvez simplement créer un fichier component.php dans le même répertoire (ou n'importe quel nom s'il correspond) pour ajuster la mise en page en conséquence.

1
Jordan Ramstad

En utilisant "tmpl = composant" OR "tmpl = my_new_template_name", vous pouvez avoir de nombreux schémas de présentation différents pour votre site Web en plaçant un fichier dans le répertoire / templates/system/my_new_template_name. php Si vous utilisez "tmpl = composant", vous pouvez modifier / templates/system/composant.php selon vos besoins, faites-le moi savoir si vous avez besoin de plus de conseils.

0
Pramod Kumar