News:

Support the VirtueMart project and become a member

Main Menu

Colour of Display modal popup upon 'Add to cart'

Started by Brockney, October 27, 2016, 18:24:28 PM

Previous topic - Next topic

Brockney

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 :)
Joomla 3.6.4
Virtuemart 3.0.18

Brockney

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
Joomla 3.6.4
Virtuemart 3.0.18

Jörgen

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
Joomla 3.9.18
Virtuemart 3.4.x
Olympiantheme Hera (customized)
This reflects current status when viewing old post.

Studio 42


Brockney

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?
Joomla 3.6.4
Virtuemart 3.0.18

jenkinhill

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
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

Brockney

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?

Joomla 3.6.4
Virtuemart 3.0.18

Ghost

Add #fancybox-content{background:#000} to your custom CSS file. Do note this will affect all Fancybox windows.

Brockney

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
Joomla 3.6.4
Virtuemart 3.0.18

Jörgen

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
Joomla 3.9.18
Virtuemart 3.4.x
Olympiantheme Hera (customized)
This reflects current status when viewing old post.

jenkinhill

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!
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

Brockney

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

Joomla 3.6.4
Virtuemart 3.0.18

GJC Web Design

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

GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

Brockney

Many thanks, great suggestion and I appreciate your help and support  :D
Joomla 3.6.4
Virtuemart 3.0.18