Centrer image header

Phoca Gallery - image gallery extension
User avatar
jean-marie60
Phoca Member
Phoca Member
Posts: 30
Joined: 31 Dec 2017, 15:22

Centrer image header

Post by jean-marie60 »

Bonjour

Comment centrer l'image de mon header ?
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Centrer image header

Post by Jan »

Hi, which image and which header do you mean? Can you paste a screenshot of what you exactly mean?

Jan
If you find Phoca extensions useful, please support the project
User avatar
jean-marie60
Phoca Member
Phoca Member
Posts: 30
Joined: 31 Dec 2017, 15:22

Re: Centrer image header

Post by jean-marie60 »

https://screenshots.firefox.com/KxLcWdo ... froissy.fr

Centrer la bannière du haut (bleu,blanc, rouge)
User avatar
jean-marie60
Phoca Member
Phoca Member
Posts: 30
Joined: 31 Dec 2017, 15:22

Re: Centrer image header

Post by jean-marie60 »

Salut
Je viens aux nouvelles, savoir si un membre à la solution.

Merci à vous.
pmleconte
Phoca Newbie
Phoca Newbie
Posts: 3
Joined: 01 Sep 2018, 15:08

Re: Centrer image header

Post 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
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Centrer image header

Post 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
User avatar
jean-marie60
Phoca Member
Phoca Member
Posts: 30
Joined: 31 Dec 2017, 15:22

Re: Centrer image header

Post by jean-marie60 »

Bonjour

Merci pour vos réponses, j'ai mis { left:25% } ce qui me convient.
pmleconte
Phoca Newbie
Phoca Newbie
Posts: 3
Joined: 01 Sep 2018, 15:08

Re: Centrer image header

Post 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
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Centrer image header

Post by christine »

Hi Pascal,

thank you for the interesting discussion and help 8)

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
Post Reply