VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: Brockney on October 27, 2016, 18:24:28 PM

Title: Colour of Display modal popup upon 'Add to cart'
Post by: Brockney on October 27, 2016, 18:24:28 PM
Hi there,

My site has a black background and the modal popup has a white background and white text.

Do I change the colour settings in Virtuemart or in Joomla?

Here is a screenshot with the pop up and another where I have highlighted the text with the mouse.

Help is appreciated :)
Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: Brockney on October 27, 2016, 18:46:27 PM
Sorry, I should have mentioned my VM version it is 3.0.18 and I have Joomla 3.6.4

The site is www.emporiumvape.com

Cheers
Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: Jörgen on October 28, 2016, 06:46:27 AM
Hello

This is a CSS problem. You could try to add something like this

#fancybox-content a,
#fancybox-content .h4 {
  color: black;
}


regards

Jörgen @ Kreativ Fotografi
Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: Studio 42 on October 28, 2016, 12:56:06 PM
Or change the modal background ;)
Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: Brockney on November 02, 2016, 11:28:14 AM
Thank you so much, I have learned something here (although not yet solved the problem)

I found by right clicking on the live site and viewing the page source I could actually change the text colour from their but it doesn't save it of course. Gave me a bit of extra confidence and understanding though!

In the back end of the site I could not find the css file or where to change the modal background.

I looked here and checked every css file but couldn't find it. Where would it be?
Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: jenkinhill on November 02, 2016, 12:17:41 PM
You can use Firebug to identify any file.  http://forum.virtuemart.net/index.php?topic=116620.0

But all you need to do is to apply a css override, ususally to your Joomla template.css
Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: Brockney on November 02, 2016, 13:55:02 PM
Firebug is brilliant, thanks Jenkinhill!

I have found the code with it and did an edit to get it how I want it. I just can't find the code in the back end to make it a permanent part of the site. Is there anything in Firebug that can give me a hint?

Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: Ghost on November 02, 2016, 14:06:56 PM
Add #fancybox-content{background:#000} to your custom CSS file. Do note this will affect all Fancybox windows.
Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: Brockney on November 02, 2016, 14:33:09 PM
Thanks Ghost.... this will be ideal but I can't find any css file related to the fancybox (I have checked the code for all of these in the screenshot)

I don't mind where and how I edit it (and will probable laugh at myself when I do!)

Thank you all so much for helping me with this
Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: Jörgen on November 02, 2016, 15:08:43 PM
Hello

You don´t have to edit and actually change any CSS. You have to add this in the file that is loaded last. Usually the template.css or some other te,plate assigned file. Does Yoy template have any setting in the Control panel for this ?
If it hasn´t add it to the end of template.css and remember to update this You update Your template :)

regards

Jörgen @ Kreativ Fotografi
Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: jenkinhill on November 02, 2016, 15:17:24 PM
The style Ghost suggested is an override so it can be added to any .css file as long as it loads after jquery.fancybox-1.3.4.css

It does look like your template loads a lot of custom css which is usually configurable in the template style editor, but if that is beyond you then simply add it to the end of the file at /templates/diverseshop/css/template.css but it will make the background of all fancybox popups black. So test!
Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: Brockney on November 02, 2016, 17:44:50 PM
Guys, I'm really learning a lot from this and thank you, I have delved into parts of the structure that are completely new to me and am learning a little bit as I go along too so thank you  ;D

I have added the code to the template.css as suggested and it worked! Very happy!

Just one last bit I am still trying to figure out, where the code is for the Billing Address Information. Had a good look through using Firebug and found some of the color coding but again cannot find it in the back end of the site

Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: GJC Web Design on November 04, 2016, 11:16:45 AM
it is shown in Firebug - that's what it is for

but as mentioned already .. css works anywhere.. Cascading Style Sheets!

put it in the last -- will always work

put !important after the rule - will always work . (as long as there isn't another !important later) - if so just define your target more precisely

why not look up basic css in w3 schools or something - this forum isn't for basic web skills.. it is for VM

Title: Re: Colour of Display modal popup upon 'Add to cart'
Post by: Brockney on November 10, 2016, 15:14:38 PM
Many thanks, great suggestion and I appreciate your help and support  :D