Page 1 of 1
Centrer image header
Posted: 26 Aug 2018, 20:51
by jean-marie60
Bonjour
Comment centrer l'image de mon header ?
Re: Centrer image header
Posted: 27 Aug 2018, 14:36
by Jan
Hi, which image and which header do you mean? Can you paste a screenshot of what you exactly mean?
Jan
Re: Centrer image header
Posted: 27 Aug 2018, 15:57
by jean-marie60
Re: Centrer image header
Posted: 01 Sep 2018, 00:08
by jean-marie60
Salut
Je viens aux nouvelles, savoir si un membre à la solution.
Merci à vous.
Re: Centrer image header
Posted: 01 Sep 2018, 15:43
by pmleconte
Bonjour Jean-Marie,
Il ne s'agit pas d'un problème Phoca Gallery, mais d'un problème lié à votre template Phoca Be.
Au niveau de l'entête, il y a 2 positions qui sont prévues : le logo et la Bannière (position 15 que vous n'utilisez pas), donc il est séparé en 2 parties prenant chacune la moitié de l'écran, donc, votre logo prend toute la partie gauche.
Si vous souhaitez centrer votre image, il va falloir modifier votre template en ajoutant dans le fichier templates/phoca_be/css/template.css la ligne suivante en début de fichier :
.phoca-header .container .col-md-6 { left:20% }
Cette modification peut se faire au travers de l'administration Joomla de votre site en allant dans le menu "Extensions", "Templates" puis sous menu "Templates". Sélectionnez votre template Phoca_be et vous obtiendrez la liste des fichiers du template. En colonne gauche, cliquez sur le répertoire css qui vous montrera alors le fichier template.css. Cliquez sur template.css et vous obtiendrez un éditeur où vous pourrez entrer la ligne ci-dessus. Cliquez ensuite sur le boutone vert "Enregistrer", puis ""Fermer le fichier" et à nouveau sur "Fermer" pour revenir à votre administration.
Cela décalera votre image de 20% vers la droite, donc, à peu près au centre.
Remarque: vous pouvez modifier ces 20% si l'image n'est pas assez au milieu en fonction du type d'écran sur lequel vous visualisez votre site. J'ai essayé 25% sur des écrans 1024x780 et cela fonctionne correctement.
Pascal
Re: Centrer image header
Posted: 01 Sep 2018, 17:26
by christine
Bonjour Pascal,
thank you very much for investigation and useful information concerning amendments of CSS in the backend.
The result of: .phoca-header .container .col-md-6 { left:20% } or similar other, I already had before is: It becomes not responsive and have a look at the right scrollbar (after temporary change).
Maybe there could be changed the position? (index.php of template or xml). I don't know - sorry, that's why there was no answer yet.
Will inform Jan about.
Thank you and kind regards
Christine
Re: Centrer image header
Posted: 02 Sep 2018, 11:11
by jean-marie60
Bonjour
Merci pour vos réponses, j'ai mis { left:25% } ce qui me convient.
Re: Centrer image header
Posted: 03 Sep 2018, 08:59
by pmleconte
christine wrote: 01 Sep 2018, 17:26
Bonjour Pascal,
thank you very much for investigation and useful information concerning amendments of CSS in the backend.
The result of: .phoca-header .container .col-md-6 { left:20% } or similar other, I already had before is: It becomes not responsive and have a look at the right scrollbar (after temporary change).
Maybe there could be changed the position? (index.php of template or xml). I don't know - sorry, that's why there was no answer yet.
Will inform Jan about.
Thank you and kind regards
Christine
Hi Christine,
With the suggested updates, it will still be responsive as phocaheader uses class $h0 which contains "col-xs-12 col-sm-6 col-md-6". Of course, it's not perfect on large screens.
It's an quick and dirty solution and it will be wiser to update index.php file, but I'm not sure it's our friend's php knowledge level.
By the way, It will be nice to include custom.css file in your template, so we don't have to update template.css file (which is as bad as updating index.php file in case of a template update).
Best regards,
Pascal
Re: Centrer image header
Posted: 03 Sep 2018, 14:25
by christine
Hi Pascal,
thank you for the interesting discussion and help
With the suggested Code concerning responsive: When checking e.g. with Strg+Shift+M, the logo img of phoca-header is not centered.
Jean-Marie could add following:
Code: Select all
@media only screen and (max-width:500px) {
.phoca-header .container .col-md-6 {
left:0%
}
}
of course: could. If wanted. The problem of the scrollbar still exist.
By the way, It will be nice to include custom.css file in your template, so we don't have to update template.css file (which is as bad as updating index.php file in case of a template update).
You are right, it's useful to add e.g. a custom.css file. It depends also on template. For instance: Protostar (standard) has implemented in index.php and in the backend, one can add the user.css:
Code: Select all
// Check for a custom CSS file
JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));
// Check for a custom js file
JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));
For Helix e.g. it's custom.scss ... and so on.
Thank you & kind regards
Christine