I've developed a joomla template which has this code in its css file:
#slide-1{
background: url(../slide-1-bg.jpg) 0 0 no-repeat;
}
which is working as expected: I have the background image in my home page. Now I would like to change this based on the image choice made in the admin part of the template by reading a variable.
At top of my index.php file before html document information starts I have:
$slide6bgimg = $this->params->get('slide6bgimg', '');
and further to use it in the html doc definition inside the head tag as:
<style>
#slide-1{
background: url(<?php echo $slide6bgimg;?>) 0 0 no-repeat;
}
</style>
this in practice failed. I then tried to test it without php code with my relative path altered:
#slide-1{
background: url("slide-1-bg.jpg") 0 0 no-repeat;
}
which is also a fail. My index.php is in the same folder (template folder) where my image is, so that must not be a problem as long as I understand. Also, before the code of slide-1, I have color code for css reading out of my template admin (by php echo the variable) and it is working correctly. Only the background image is no way working. I tried every possible way I could think of and searched the google but no chance. There must be something I absolutely don't know!
Please help.
The image url should be relative to the location of the css file and not the index.php file.
Related
I'll try to explain the issue the best I can: I have two css uploads methods. The first one is with link rel and is working fine.
The second one (for performance issues), goes inside the css file and print directly the css into the page.
<!-- <link rel="stylesheet" href="<?php echo URL_SITE; ?>style/index.css" /> -->
<style>
<?php
$urlstyle = URL_SITE.'style/index.css?m='.(int) IS_ON_MOBILE;
$style = file_get_contents($urlstyle);
echo $style;
?>
</style>
There is absolutely no doubt about what is loaded. Those two methods returns the same css.
As an example we can use this part of the css
.wrapper-accueil .scroll:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
As you can see, there is an url inside.
When trying to load the css with the first method, the path is fine. Everything works fine.
But here comes the issues, when I try my second method writting this css inside the file where it's called. The url path of the css is wrong. (I shouldn't have the first ../ to make it works.
But here is the thing. Even if this code shouldn't be working with the second method. The file is loaded properly with no problem. And I can't understand why it's working. (And the cache is cleared ne doubt about that neither).
More stranger things, when I upload the website on server and i'm no longer in localhost, then there is indeed an issue and the file isn't found as it should be.
So working in localhost while it shouldn't. Not working in server while it should indeed not be working.
But I have something more stranger again, I got an other website. Same framework (that means same folder/file structure), same css file, same way of including the file. And with this one using the second method, the file is found in localhost and in server too...while it shouldn't be working with none of them.
I hope you have any idea cause I'm lost at this point. Thanks.
.wrapper-accueil .scroll:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: url("../../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
May be you have a folder containing picto has on another folder
I'm not sure I get 100% what your problem is, but it seems that you load your css with relative paths from two different starting points:
Loaded with link:
www.example.com/path/to/your/application/style/index.css
=> this loads the asset from:
www.example.com/path/to/your/application/assets/img/picto/arrow-down.svg
Included in site:
www.example.com/path/to/your/application/site.php
=> this loads the asset from:
www.example.com/path/to/your/assets/img/picto/arrow-down.svg
^^^
note the missing path due to "../" in your svg path
Maybe this is the answer to your problem, feel free to clarify if I didn't get you correctly! Please also check the developer console, especially the "Network" tab in Chrome and see what exactly is requested and double check the paths there.
I have a css for my site on wordpress
body {
background: #e5ddc8 url(http://fabioide.com/frederiksminde/wp-content/uploads/2014/10/fredshotel-headbgg.png) top left repeat-x;
}
I want to change the url to a more consistent code by using function because if ever I change my site location it will not detect the url since i change the url. what is the right call to output the site url of my site.
body {
background: #e5ddc8 url(/wp-content/uploads/2014/10/fredshotel-headbgg.png) top left repeat-x;
}
I try to use this code but nothing happens the image doesn't load. I also tried the get template directory and get_url but the php doesn't seem to work inside my css.
That's because beginning a url with / means from the root of the website, and your website appears to be inside a subdirectory. In example two, your site is looking for this file at http://fabioide.com/wp-content...... etc. instead of http://fabioide.com/frederiksminde/wp-content.
The easy fix would be to not begin the css background url line with a /. So instead of:
background: #e5ddc8 url(/wp-content/uploads/2014/10/fredshotel-headbgg.png) top left repeat-x;
}
it should be:
background: #e5ddc8 url(wp-content/uploads/2014/10/fredshotel-headbgg.png) top left repeat-x;
}
That should do it, depending on the url rewriting going on. For instance, if you're on page:
http://fabioide.com/frederiksminde/category/page it would look for the file in http://fabioide.com/frederiksminde/category/page/wp-content, etc. So if you could let me know if your css is a php file, you could capture the siteurl from the database and then echo that there like this:
background: url('<?php get_site_url(); ?>'/wp-content/etc...);
You'd have to connect the css file to the wordpress core I think though to get access to that function.
You should be using relative url in your css - ( relative to where the css ) .
for example
if you had your image and css folder in same directory, then
url('../images/my/path/to/image.jpg');
** Also - php won't work in your .css - howver you could use .htaccess to parse the file as php if you needed to .
Placed the image on my themes folder under images using the FTP
then change my css to this
body
{
background: #e5ddc8 url(images/fredshotel-headbgg.png) top left repeat-x;
}
That path would be relative to Css folder , do it would be looking in css/images - you need to do ../images - that would move up one level
A new client recently contacted me to do some updates to her wordpress website, after her webhost updated her version of wordpress due to security issues. The update disrupted some code on the login page of the site so that it displayed incorrectly. I went in and removed the referenced images for the login logo and background and then tried to find the source code. When I inspected the page with firebug I got the following:
#login {
background-image: url("http://www.descaid.com/wpcontent/themes/oceanic/images/login.png") >!important;
background-repeat: no-repeat;
min-height: 500px !important;
padding-right: 7px;
width: 600px !important;
}
This chunk of code needed to be removed as it was overriding other rules, so I, of course, looked to the right of this block of code to see what stylesheet was being referenced, or if it was something in the custom css plugin or whatever. Firebug indicated that this code was on line 25 of "wp-login.php #3". #3? What does that mean? I opened the wp-login.php file and couldn't find this code anywhere in it. It was not in the style.css file for the theme, either. I did several google searches and hunted and pecked around in the files for about 3 hours to no avail and I'm now pretty exasperated. Any help would be greatly appreciated. The page in question is: http://descaid.com/wp-login.php
It seems like this can't be some duplicate/triplicate php file, but that the code is being referenced through the php file from somewhere, I just can't figure out where.
Wordpress minifies all the CSS-files automatically. These files are located in the directory wp-content/themes/[theme]/. The easies solution would be to just open all of the CSS-files and look for the reference.
These vary from template to template, but beginning with style.css could be smart.
It means the relevant css is located in the source code in <style>..</style> tags and not inside this file as you think.
It is likely being generated by one of your WordPress plug-ins. You could disable all your plug-ins and see if that bit of CSS disappears. If so, turn each plug-in back on one at a time until it comes back. That will at least narrow your search to files in that plug-ins folder.
I have a script that updates a CSS file based upon some user input from an html form.
The script performs a str_replace and searches the CSS file for "tags". eg-
html,body {
background: {bgcolor} url(../images/bg.jpg) repeat-x;
color: {textcolor};
}
This works great but obviously breaks that CSS file. Originally it didn't matter but because of a new feaature in my project, I need to use that CSS file.
So I was wondering if there were any better alternatives to this? I was thinking maybe something like:
html,body {
background: #fff /*{textcolor*/ url(../images/bg.jpg) repeat-x;
color: #fff /*{textcolor*/;
}
So I could then use the comment symbols within the tag as well which means my CSS file isn't broken. Only problem is how would I replace/remove the hex as well?
Presuming that you've already got the script in place which replaces the tags with their respective values, why not do something like this:
1: Create a style.php file which loads style.css
2: style.php uses your already created function to replace the tags with your default values
3: style.php sets the header as header('Content-type: text/css');
4: style.php echoes out the string that has been modified
Then rather than calling style.css throughout your script, call style.php instead.
With preg_replace():
preg_replace("/\3[\w\d]{3,6}\s\/\*\{textcolor\}\*\//", $str_hex_code, $str_css_file)
can someone please tell me why the background image is not displaying in my php code.
#wrap-iframe{
background-image: url(bg_01.gif);
background-repeat: no-repeat;
border:0 none;
min-width:760px;
min-height: 700px;
}
this is the CSS i have. the div box is displayed flawlessly. the image url is correct. if i inlcude the image through the tag, it shows up.
i was not this bad at CSS...:-(
Note that the image path must be relative to the stylesheet. If your stylesheet is in a different directory than the page, you must adjust the path in url() accordingly.
You can right click the DIV in Firefox and click "show background image". It will take you to the URL where firefox is looking for the image, and you can see whether it's correct or not.
I recommend using an "absolute" path. Start with a forward slash and describe the path from the HTML root forwards, i.e. /images/bg_01.gif would resolve to http://yourdomain.com/images/bg_01.gif
I always put quotes round the filename too, though they may not be 100% necessary:
background-image: url("/images/bg_01.gif");