I would like to know how can I edit CSS files(ex:Logo size, Logo path)
I am using Grantry v4.1.24 and Joomla 3.3.1
See the example of how to change Logo;
#rt-logo {
background: url("/qatarclean/joomla_gantry/images/logo.png") no-repeat scroll 50% 0 transparent !important;
}
#rt-logo {
height: 140px;
width: 267px;
}
How can I find the CSS location for this and how to edit this?
in Firebug it is only showing the only the folder path.
I have created gantry-custom.css file and inserted above data. It doesn't work.
See the attached picture;
Also I want to know how to remove some lines from selected CSS file;
Thanks in Advance,
Sameera Silva
The Gantry Framework uses compiled LESS files. Rather than editing these directly, it is recommended (as you have done) that a custom CSS or custom LESS file is created so that your changes are not overwritten by a template update.
The use of !important might be the reason your override is not working.
You can get around this using CSS specificity as explained by Henning on the RocketTheme Forums at: http://www.rockettheme.com/forum/configuration-and-security/209832-want-nail-how-2use-template-name-custom-css-file-correctly#1028846
For more information on CSS specificity Henning recommends: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know
In this particular case, the following should fix the issue you are having:
div#rt-logo {
background: url("/qatarclean/joomla-gantry/images/logodf.png") no-repeat scroll 50% 0 transparent !important;
}
Related
I'm trying to reduce the height of a footer in my WordPress Website.
Apparently (check the picture linked) the style is directly in the div but I failed finding it in my WP files.
Can anyone help me with this?
Capture of the html inspector
When dev tools show styles like this. Its an indicator it's being controlled by JS.
element.styles{
position: relative;
height: 122px
}
As your JS is loading after your css (as it should be), you need to override the property after JS is called. This is one of the few times you should add !important to your css. So to override the JS height you need something like this
.site-footer .widget-area{
height: 400px !important;
}
I am trying to change my products image on hover in woocommerce in wordpress !!!
I tried some plugins I saw like Woocommerce Product Image Flipper & Magni Image Flip for Wocommerce but they are not working for some reason and I tried the solutions you are suggested here in some similar questions .
So do you know another plugin free or not I dont care or do you know maybe an other solution with CSS maybe I dont know
I am using
Wordpress Version : 5.3.2
Wordpress Theme : Flatsome
Woocommerce Version : 3.9.2
Thank You for helping and sorry for my English :)
ok #st3ph3n92 it is working for me !!!
I just write custom css for the 10-20 products I have online every day so for now I am fine !!!
Now in the future I hope there is plugin to do this job ^^
Thank you again for your help #st3ph3n92
#N. Mar, Yes, the custom URL I used was only as an example. With background-image: url("img2"), that would select img2 if it is the same folder as your CSS file. However, if your images are kept in a separate folder, for example "images", the CSS might be background-image: url("images/img2").
There is a StackOverflow post on folder paths here that might be quite useful: What does "./" (dot slash) refer to in terms of an HTML file path location?
Because you're using WooCommerce, I imagine how you're images are stored is a little different. This article might shed some light on it: https://enviragallery.com/where-does-wordpress-store-uploaded-images/
If you want this to be automatic on Wordpress, you will need to use PHP. The issue is that you cannot use PHP in CSS. Instead, you would need to add the styles inline or in the head of the theme's html (as opposed to a separate stylesheet) and then use PHP to reference the image. This is a good bit trickier. There's another Stackoverflow post on that here: CSS background images in WordPress
if you have access to the CSS, you could try setting the image as the background of the div it is in. You could then use the :hover selector to set a new background image.
You can see this on the CodePen here: https://codepen.io/St3ph3n92/pen/BaopGQx
Or run this snippet:
.image-holder {
height: 300px;
width: 300px;
border: 3px solid black;
margin: 0 auto;
background-image: url("https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
background-size: contain;
}
.image-holder:hover {
background-image: url("https://images.unsplash.com/photo-1514218953589-2d7d37efd2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")
}
<div class="image-holder"><div>
I hope this helps.
Thank you St3ph3n92 for your answer
So can I change this code with something like this ???
.product-image {
height: 770px;
width: 1155px;
border: none;
margin: 0 auto;
background-image: url("img1");
background-size: contain;
}
.product-image:hover {
background-image: url("img2")
}
<div class="product-image"><div>
I mean that I want something more automatic cause I have 700+ products so I cant insert custom URLS for each one !!! I need a code so on hover my main Products image change with the second image from Product Gallery
Thanks again for your answer !!!
I had the same issue on some of my websites with the same configuration as yours.
Until a few days ago, I had that flipping effect on my products. It was by default, I didn't install any plugin for this feature. Today I noticed that it's not working anymore.
I managed to solve this issue by disabling Autoptimize plugin. I don't know if you use the same plugin, but maybe my answer will help you.
It's being imposible for me to change the color of the menu bar of my website: vayapollo.com
I want to change it, but I've tried all. At the css archives of my theme I can't find this code:
#branding, .post-afterbar-a.in-post-top, .horizontal-vote a.up span {
background-color: #ededed;
}
I want to change the color #ededed to #000 (black). I've tried to find it at PHP or javascript archives but nothing!
The route that google chrome is giving to me is (index):64 but at the index.php file isn't the code.
Thanks, it will be a help for me!
Actually this css comes from admin
If you are not able to find it you can add new css to overwrite this css in your css file
#branding, .post-afterbar-a.in-post-top, .horizontal-vote a.up span {
background-color: #000 !important;
}
Hope it will work
I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?
The site I work on has a lot of images that contain text. This includes buttons and navigation.
To support localization I include 2 css-files. One that has non language specific properties (font, colour ...) and one that has language specific properties. There is only 1 language specific file served to the user depending on his choosen language.
The language specific file (/content/en/Site.css , /content/de/Site.css ..) has information about background images
div.topHeader p#searchHeader
{
background: url(/images/de/headers/search_lo.gif) no-repeat scroll center center;
}
This works smoothly but I will have a lot of duplicate code. In english the css will be:
div.topHeader p#searchHeader
{
background: url(/images/en/headers/search_lo.gif) no-repeat scroll center center;
}
I will have a couple of languages thats why it would realy pay out to optimize this. Is there a better way to do this?
Just extract out only language specific part from the main CSS to a new CSS for each language and include that CSS in your page dynamically. In this way do don't have to manage lots of CSS classes.
You can try consolidating all external graphics references in separate CSS and referencing it separately in your code.
If you mean form paths in your CSS dynamically, well, you could write a handler to process this particular request for your CSS, read it on the server-side from the file, replacing all language marker parts as required (document.Replace("{lang}", "de")) and then serve the modified CSS back. But it would require some work.
Rather than having different CSS files for each language you could one file, site.css.aspx or similar and process the file, output the paths based on the language supplied POST/GET variables or in the accept headers.
See similar question here
For a start you could use background-image instead of background to save repeating the repeat, positioning, scrolling and colour information.
To really optimise it I would simply dynamically serve the css based on the user's localisation. eg: through a php script or something. You could just do something like background-image: url(/images/<?=$lang ?>/headers/search_lo.gif).
not sure but u can have something like this ,
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__en.gif) no-repeat scroll center center; }
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__de.gif) no-repeat scroll center center; }
where last word after __(dauble underscore) will added dynamically
as
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__{%lang%}.gif) no-repeat scroll center center; }
An easy solution would be to apply a class or ID to the body tag in the HTML based on their locale. Then in the stylesheet you could do something like:
div.topHeader p#searchHeader
{
background: no-repeat scroll center center;
}
body.en div.topHeader p#searchHeader
{
background-image: url(/images/en/headers/search_lo.gif);
}
body.de div.topHeader p#searchHeader
{
background-image: url(/images/de/headers/search_lo.gif);
}
There's still going to be a bit of duplication, but you've reduced the amount of CSS you have to write for each localisation.
You can create dynamic CSS with PHP or similar. Here's a PHP example:
index.html:
<link rel="stylesheet" type="text/css" media="screen" href="style.php">
style.php:
<?php
header("Content-type: text/css");
$lang = $_SESSION['however_you_are_detecting_lang'];
?>
body {
background-image:url(images/<?=$lang?>/image.png);
}
that will fetch images/en/image.png or images/de/image.png