what is the best way to edit the foundation.min.css file? I'm finding changing the colours a real problem.
Philip
How would I go about changing my search bar from a color to an image background? I've been trying to edit my css file to do this, and can when I inspect the element in chrome but can't find the location to edit or maybe code to write.
Thanks
Shaun
Hi Shaun,
You can style the search box through ".pt_se input", so for a background image, add to your html/default.css for example;
.pt_se input {
background-image: url("/images/bg.jpg");
}Hope this helps!
Cheers,
David.
--
PriceTapestry.com
I forgot to mention I am using a ramos theme and the css is set from the admin. It overrides everything else, I tried to find this code in its css but it is different than default.css. So the code above didn't change anything. The code in the ramos theme is more like.
"section.search":
{
"descr": "Search Bar",
"bgColor": "1ABC9B"
Would I be able to change the BGcolor to BG-image or something?
Hello Shaun,
You would need to contact Ramos Themes support for help specifically relating to one of their templates however since the text box should be the only input element on your site with name="q" you can target it directly in CSS using input[name="q"] for example;
input[name="q"] {
background-image: url("/images/bg.jpg") !important;
}Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Hello Philip,
The best approach is normally to override framework based CSS within your own CSS file. The Responsive HTML plus template include the file html/default.css after foundation.min.css and you'll notice that it already contains some override styles - look for the following comment at line 252;
/* foundation overrides */So let's say for example if you wanted to change the colour of the "Visit Store" button (or any button using the success class selector (which are actually <a> tags with the "button" class, you could add the following:
a.success {background-color: red !important;
}
The un-minified version of the Foundation CSS is in the distribution which you can download from here;
http://foundation.zurb.com/cdn/releases/foundation-5.5.2.zip
- upload css/foundation.css to the /html/vendor/ folder of your Price Tapestry installation, and then edit html/header.php and look for the following code at line 22:
<link rel='stylesheet' href='<?php print $config_baseHREF; ?>html/vendor/foundation.min.css' />...and REPLACE with:
<link rel='stylesheet' href='<?php print $config_baseHREF; ?>html/vendor/foundation.css' />Hope this helps!
Cheers,
David.
--
PriceTapestry.com