Change the background image of the page

Phoca Templates - templates for Joomla! CMS
christine
Phoca Hero
Phoca Hero
Posts: 2000
Joined: 28 Nov 2010, 17:20

Re: Change the background image of the page

Post by christine » 31 Jul 2019, 22:28

Hi Thierry,

The reason why I wrote about a custom.css is, that your Site is Helix - not Gantry.
OK, your shop is under development with Gantry. This means:

In addition to Jan and your question about CSS:
Adding a Custom Style sheet > custom.scss See here please: http://docs.gantry.org/gantry5/tutorial ... tyle-sheet

Kind regards
Christine

Tags:

jourdaon
Phoca Member
Phoca Member
Posts: 25
Joined: 29 Jul 2019, 19:45

Re: Change the background image of the page

Post by jourdaon » 31 Jul 2019, 23:46

Hi,
Well, my dear friends, there is better, after reading the Gantry tutorial, obviously it could not work, because it was necessary to create a directory and a custom.scss file which did not exist. ..
So it worked almost marvelously, the only problem is that g-main, is not the right place ... :-)
I want to put this image on the outside, not inside.
in the Gantry Base Styles confiration I have a blue color, it is instead of this color that I want to put my image.
I try several things, Mainbody ... ect ... but it does not work ...
There is not a general CSS sheet or I could read the different flags? if not the name of the right place ...
Thank you Christine for the link, and yes my main site is in Helix on a wt_nova_free basis. I would have put Phoca Cart on the same template, but I had a lot of problems with cart icons and other ... so I opt for Premiere hoping it looks a bit like the rest of the site.

Thank you in any case ...
Regards,
Thierry

christine
Phoca Hero
Phoca Hero
Posts: 2000
Joined: 28 Nov 2010, 17:20

Re: Change the background image of the page

Post by christine » 01 Aug 2019, 11:12

Hi Thierry,
jourdaon wrote:
31 Jul 2019, 23:46
So it worked almost marvelously, the only problem is that g-main, is not the right place ... :-) I want to put this image on the outside, not inside.
acc. the demo of Premiere, there are several background "places", those I checked with inspector. Try with this:

Code: Select all

#g-page-surround {
    background-image: url('here your correct path ...etc.jpg');
    overflow: hidden;
}
Kind regards
Christine

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42872
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Change the background image of the page

Post by Jan » 01 Aug 2019, 14:01

Hi, Helix is based on Bootstrap 4. You should be able to use Phoca Cart there without any problems and the information about how to use it will be similar to Astroid framework (Astroid framework is based on Bootstrap 4):

https://www.phoca.cz/documents/116-phoc ... d-template

Image

But of course it always depends on the template and mostly it needs to be customized.

Here you can download overrides for each template:
https://www.phoca.cz/phocacart-extensions/5-overrides

Image

Jan
If you find Phoca extensions useful, please support the project

jourdaon
Phoca Member
Phoca Member
Posts: 25
Joined: 29 Jul 2019, 19:45

Re: Change the background image of the page

Post by jourdaon » 01 Aug 2019, 14:37

Hi,
Thank you Christine! You are at the top !
It works !!
Tell me not to bother you anymore, because I have different modifications to make, on which page of the Premiere demo with the inspector, you have seen these different location, I know a little CSS, I should be able to find what I must ... well I hope
I also have to change the menu and something else ...

I also add this for the backgound image.
#g-page-surround {
     background-image: url ('https://www.misso-shop.com/images/nuage_background.jpg');
   background-size: cover;
height: 100%;
     overflow: hidden;
}

Thank you!
Regards,
Thierry

jourdaon
Phoca Member
Phoca Member
Posts: 25
Joined: 29 Jul 2019, 19:45

Re: Change the background image of the page

Post by jourdaon » 01 Aug 2019, 15:38

Hello Jan,

Yes I understand, Actually, the problem comes from the fact that I only want Phoca Cart icons, only appear on the menu of

the Shop page is not a problem in itself, but when I insert the Phoca Cart Cart module in my menu, instead of displaying the icon, it shows me directly the DIV in the menu ...

With Premiere it went well, I do not master the CMS well, it's new for me, I always developed my sites in PHP, JavaScript and ajax with DreamWeaver and without object mode, I'm more so on the page, will you tell me ...

As I have a shop to shoot, I go to the simplest and most urgent ...

The worst for me is yet to come, with payment modules ...
As I explained, few systems exist at home.
It's a bit middle age here ... Everything works with Western Union, MoneyGram or Orange money.

Cordially.
Thierry

christine
Phoca Hero
Phoca Hero
Posts: 2000
Joined: 28 Nov 2010, 17:20

Re: Change the background image of the page

Post by christine » 01 Aug 2019, 16:43

Hi Therry,
jourdaon wrote:
01 Aug 2019, 14:37
It works !!
that's fine :-)
... on which page of the Premiere demo with the inspector, you have seen these different location, ...
"normal view" will show the default background color: #fff; (see also previous code)

Image

"hovering" with inspector to find wanted place, the background (& segment) becomes blue color. Of course: scrolling up and down etc:

Image

It you would check e.g.: <main id="g-main">, then it will not become "blue".

Kind regards
Christine

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42872
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Change the background image of the page

Post by Jan » 01 Aug 2019, 17:01

It's a bit middle age here ... Everything works with Western Union, MoneyGram or Orange money.
Unfortunately, there are no such paypment plugins yet, so for them plugins must be written.
Mostly if they are not online payments, the standard payment method like "cash on delivery" can be used. If they are online, then the payment plugin must be written for them.

Jan
If you find Phoca extensions useful, please support the project

jourdaon
Phoca Member
Phoca Member
Posts: 25
Joined: 29 Jul 2019, 19:45

Re: Change the background image of the page

Post by jourdaon » 01 Aug 2019, 19:58

Hello Christine,

Yes, it's good I found and done, just about everything I wanted ...

I still have a joke in the menu gantry, to change the color of the icons.
The default gray icons I do not like ... for the rest it will be fine like that ...

Thank you for all this advice, help and info ...
I think I understood the general operation of Gantry.

Cordially.
Thierry

jourdaon
Phoca Member
Phoca Member
Posts: 25
Joined: 29 Jul 2019, 19:45

Re: Change the background image of the page

Post by jourdaon » 01 Aug 2019, 20:05

Hello Jan,

Yes, I know that this kind of module does not exist, it does not need a special script, because it's just displaying a phone number and a Name ... there is no redirection, just a logo.

I would look after, if I can create a module that does this, I would refer to one of your modules, yes, "cash on delivery" seems good
To do that.

Cordially.
Thierry

Post Reply