I have a php variable called MULTILANGUEwith a value define as true if the website has many languages and false if not.
The thing is I am using css files where I have some links like this
.fabricant .scroll:before {
content: "";
display: block;
width: 30px;
height: 18px;
background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
But the link is not the same depending if multilangue is true or false.
So I would like to make a condition for the url inside this css but I don't know how I can do that.
The obvious solution would be having a css file for both cases... but this would be redundant with a lot of duplicated code which is really bad.
The obvious solution is to have two CSS rules for the different backgrounds, and adding the appropriate class to elements dynamically in PHP. I repeat: you don't want dynamically generated CSS files.
.fabricant .scroll:before {
...
background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
}
.fabricant.multilang .scroll:before {
background-image: url("../assets/img/picto/arrow-up.svg");
}
<div class="fabricant <?php if ($isMultiLang) echo 'multilang'; ?>">
CSS doesn't has conditionals, you can use different classes so depending your variable you can call...
.fabricant.es .scroll:before {
...
}
or
.fabricant.en .scroll:before {
...
}
and use different content in each class..
You could embed different css files depending on your MULTILANGUE variable:
<link href="<?= MULTILANGUE?'multilangue.css':'non_multilangue.css' ?>" rel="stylesheet">
and in each css file you can put the url directive, changing it for multilanguage or not:
.fabricant .scroll:before {
background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
}
Related
How can I include a custom css stylesheet to some pages?
I have /wiki/Home_Page with standard css and Vector theme, but I'd like some page to have a different css file. Right now I'm editing Common.css like that:
.rootpage-Page1 {
background-image: url("...");
background-color: black;
color: white;
}
.rootpage-Page1 .gallerytextwrapper {
background-color: rgba(40,40,40,0.8) !important;
}
.rootpage-Page1 a {
color: lightblue;
}
.rootpage-Page2 {
background-image: url("...");
}
The CSS extension form the MediaWiki website doesn't works. I see the {{#css}} tags in my articles. It's mainly changing the colors of some stuff to fit the theme of the article and it's subpages.
TemplateStyles would be one option; it allows the use of a (relatively) safe, sanitized subset of CSS on wiki pages.
I am developing my first plugin in wordpress and using background-image in style tag:
<head>
<style>
.remove {
border: solid;
background-image: url(icon-remove.jpg);
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
display: block;
font-size: 14px;
height: 20px;
padding-top: 40px;
text-align: center !important;
}
</style>
</head>
My plugin path is:
..www/wpsample/wp-content/plugins/sample
The Image file is present in same directory (/sample)
but it showing me error in console as 404 and the path it is looking for is
http://localhost/wpsample/wp-admin/icon-remove.jpg
How do I specify correct path for image file ?
You need to use the wp_enqueue_style command to tell WP where the file is:
wp_enqueue_style('myStyle' //--- name
//--- location of css file relative to this file
, plugin_dir_url(__FILE__).'css/myCSS.css'
, array()
);
This is required because people can install WP and set the folders to different names. The wp_enqueue_style will handle this for you.
Alternatively, embed the CSS within the same file.
If you want to use background-image in wordpress plugin, You should use relative css path to the stylesheet. Example:
background-image: url("../wp-content/plugins/sample/icon-remove.jpg");
Or you can add full url in url():
background-image: url("http://localhost/wpsample/wp-content/plugins/sample/icon-remove.jpg");
For more information read this link: W3
After trying many solution finally this works for me
background-image: url("<?php echo plugins_url().'/sample/icon-remove.jpg'?>");
I need help with adding an image, as the background, to a Bootstraps jumbotron in the Codeigniter Framework for PHP.
I currently can add an image to Codeigniter no problem with the following code:
<img src="<?php echo base_url('image/test.jpg'); ?>">
I can also use my CSS file to change the background of the jumbotron with the following code:
.jumbotron {
color: black;
text-align: center;
background-color: red;}
however, I am not sure how to get the css file to add my image to the background of the jumbotron. I have tried the following:
.jumbotron {
color: black;
text-align: center;
background-image: <?php echo base_url('image/test.jpg'); ?> }
.jumbotron {
color: black;
text-align: center;
background-image: url('image/test.jpg');}
.jumbotron {
color: black;
text-align: center;
background-image: 'image/test.jpg'}
Nothing that I try seems to work. I do have my images folder under the project and not in the application folder. I can get the images to display anywhere on my page-that is not the problem. But getting them as the background in the jumbotron does not work.
The easiest thing is to apply it in your view to the Jumbotron.
Try something like this in your view:
<div class="jumbotron" style="background-image: url('<?= base_url('image/test.jpg'); ?>')">
...
</div>
You can still do the rest of your styling for the background image e.g. background-size in CSS for your jumbotron.
CSS files won't be parsed by PHP unless you specifically change your server to parse them or output them from PHP files with a CSS extension.
The background image when manually specified in CSS in your example wouldn't have worked because you had a relative path to specify the image location. E.g. the browser would have looked for the picture at /css/image/test.jpg rather than /image/test.jpg. If you specif background-image: url('/image/test.jpg') in your CSS it should work.
I was wondering if anyone can help. I am trying to add PHP code, which is retrieving an image from a database, into CSS.
I have the small section of CSS code on my example.php page and need to have different images for backgrounds depending on what variables were posted to the example.php page.
The terrible code that I have come up with is as follows
<style>
.par-surround {
background-repeat: no-repeat;
background-image:<?php <img src=<?=$subject['picture']?>border="0" width="740px" height="auto"/> ?> ;
background-position: center top;
}
</style>
I don't know if this can be done or if I have to do it a completely other way. Any help would be appreciated, thank you.
It can be done but you need to output proper css to do this.
background-image does not take (invalid)html image tags:
<style>
.par-surround {
background-repeat: no-repeat;
background-image: url(<?=$subject['picture']?>);
background-position: center top;
}
</style>
The reasodin is correct. You just ned to have a valid PHP code:
<style>
.par-surround {
background-repeat: no-repeat;
background-image: url(<?php echo $subject['picture'] ?>);
background-position: center top;
}
</style>
Also make sure $subject is defined and has a value, BEFORE you output the CSS code.
My scenery: I have Drupal 7 with a Omega theme installed.
My issue: I have to set a random background for a specific zone of my css (section-header).
I have 4 separated css files because of the responsive design, and the file name is the same but the only difference is the _mobile _narrow _normal _wide postfix.
I have set the background in the css file with some simple lines:
#section-header {
background: url(../images/sf_header_wide.jpg) no-repeat top center;
height: 390px;
margin: 0;
padding: 0;
}
I need to add more than one image for the background, and I would like to know if there was possible to import the file name from an external source (my template php file for example) and obtain something like this without adding the background lines to the template.php file, because i have separated css files for the responsive design
#section-header {
background: url("../images/<?php echo $fileimage; ?>_wide") no-repeat;
height: 390px;
margin: 0;
padding: 0;
}
Is it possible to obtain what i need?
I don't recommend doing it this way as web browsers are going to be caching your CSS files so if you want it to change each time, it will not. Besides that, this is not a normal practice,
There are a few things you could do instead, though. One would be within the page header itself, just generate that style sheet like so
<head>
<link rel="stylesheet" type="text/css" href="primaryStyleSheet.css" media="screen" />
[...]All other head stuff, imports, responsive style sheet stuff here
<style>
/* Define this style AFTER the other CSS files are imported to be sure it loads */
#section-header {
background: url("../images/<?php echo $fileimage; ?>_wide") no-repeat;
height: 390px;
margin: 0;
padding: 0;
}
</style>
</head>
Additionally, you could add !important to each of CSS definitions (ie. height: 390px !important;)