Is it possible to somehow import the image base64 from another file? or save the url to a variable and import it to CSS? since the code is very long and it does not seem clean in this way.
Thank you for your help guys.
index.css
.column {
margin: calc(var(--grid) / 2);
border: var(--borderWidth) solid #fffddd;
border-radius: var(--borderRadius);
background-image: linear-gradient(rgba(0, 0, 0, 0.769),rgba(0, 0, 0, 0.961)),url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QDWRXhpZgAATU0AKgAAAAgABAEPAAIAAAASAAAAPgEQAAIAAAAMAAAAUIKaAAUAAAABAAAAXIdpAAQAAAABAAAAZAAAAABOSUtPTiBDT1JQT1JBVElPTgBOSUtPTiBENTEwMAAAAAAKAAAMgAAFgpoABQAAAAEAAACigp0ABQAAAAEAAACqiCcAAwAAAAICgAAAkAMAAgAAABQAAACykgoABQAAAAEAA...
What you could do is to use var() CSS from inside another CSS file that you can import .
File myCssVar.css
:root {
--mybguri64: url(data-image/jpeg;base64, ... ) ;
}
Your CSS file
#import url(myCssVar.css);
.column {
background-image: linear-gradient( ....), var(--mybguri64) ... ;
}
It will make your CSS easier to read.
Looks like from your edit you almost had it .
Background-image's URL is a string value. Of course, you can store it in another file, import it and use js to inject it dynamically.
The best solution to that is to use the server side script with an inline css to make this happen. to make this happen. lets say the backend language is php. and your pages are made up of 3 templates components. It could be in different backend languages either ASP.net, Javs, php, node... but i'm using php here since i'm vast in it. just follow through its quite simple and direct.
base64ImageFile.php - the file with the base64image variable it could be more than 1
header_template.php
footer_template.php
application.php
then in your base64Images.php you have this there..
<?php
$base64Img ='data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7';
$base64Image2 = 'data:image/png;base64,sgw....';
$base64Image3 = 'data:image/png;base64,sgw....';
$base64Image4 = 'data:image/png;base64,sgw....';
?>
**in my header_template.php, add the template to the beginning of the file.. **
<?php
require('base64images.php'); //the images are rendered here..
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
li {
background:url(<?php echo $base64Img; ?>) <!-- and used here --->
no-repeat
left center;
padding: 5px 0 5px 25px;
}
</style>
</head>
in my footer_template.php
<!--- footer elements/scripts go here --->
<script src="...."></script>
<script src="..."></script>
</html>
application.php - file, merge template components to build page here
<?php require('header_template.php'); ?>
<body>
.......body content coes here...
</body>
<?php require('footer_template.php'); ?>
this way you can re-use and seperate the components and even seperate images into different files and call them. in your file instead of typing it out. or even multiple images... but the CSS must be inline with the HTML..
Related
I am wondering if is possible to perform this action:
I have a site (Wordpress built on Elementor). I will periodically add some content on the site, and once I add/change content on page can I force refresh somehow for all that users that are watching that page?
The question may not be for stackoverlow but looking for help as I wasn't able to find what I am looking for.
An answer to this question is in plugin called Force Refresh
https://wordpress.org/plugins/force-refresh/#installation
Posting an answer as it may help someone else.
Force reload is something your user can hate. I would like to suggest different approach: Create JavaScript/jQuery code to periodically check eg. if some file exists. Once you want to reload the page, just create the file.
The example should be extended of checking if user already reloaded the page to avoid showing the notice bar again, even the file still exists. You can use cookies for that purpose.
The code below is just to demonstrate the idea, it si not a complex solution.
jQuery(function($) {
//check on load - shloud be removed
checkFileExists();
//call function every 5 minutes
setInterval(function() {
checkFileExists();
}, 1000 * 60 * 5);
//check if a given file exists
function checkFileExists() {
var http = new XMLHttpRequest();
http.open('HEAD', "https://file-examples-com.github.io/uploads/2017/02/file_example_JSON_1kb.json", false);
http.send();
if (http.status === 200) {
$("#notice-bar").show();
//you can reload the page here, just uncomment the line below
//location.reload(true);
$("#notice-bar").show();
} else {
//File doesn't exists
$("#notice-bar").hide();
}
}
//reload page once the link is clicked
$('#reload').click(function() {
location.reload(true);
});
});
#notice-bar {
position: absolute;
display: none;
top: 0;
width: 100%;
height: auto;
text-align: center;
padding: 0.5em;
background-color: #FFDDA9;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="notice-bar">
<p>New version available. Please reload the page.</p>
</div>
</body>
</html>
I want to make a mechanism that will display the css file depending on the url address
example
if url = www.domain.com/our.php then we print <style> background: red; </style> if not, <style> background: blue; </ Style>
chciałbym to umieśćić między <head>
In PrestaShop you can do this stuff directly in your template files, you have many helper variables available:
https://devdocs.prestashop.com/1.7/modules/creation/displaying-content-in-front-office
search for "Here is a list of Smarty variables"
You can load extra styles here:
/themes/your_theme/templates/_partials/head.tpl
You can do for example:
{if $page.page_name == 'product'}
{literal}<style>body { background: red !important; }</style>{/literal}
{/if}
This will result with a red background on product page.
I have a simple html do display an animation i made in After Effects, but i can't display the animation when loading it locally (data.json). But if i upload the animation through LottieFiles and use the link generated in my html file, it works. Can someone please explain me why i am not being able to load the animation through my data.json instead from the generated link ?
Bellow i put the code i have so far:
<head>
<!-- Meta -->
<meta charset="UTF-8">
<title>Bodymovin Demo</title>
<style>
body {
text-align: center;
}
h1 {
margin-top: 2em;
}
#bm {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Test Animation</h1>
<div id="bm"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
<script>
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: true,
autoplay: true,
// this way works, but if i put 'data.json' which is on the same directory of this file it doesn't work
path: 'https://assets7.lottiefiles.com/packages/lf20_kxQ49M.json'
});
</script>
</body>
I also have a link to my 'data.json' file:
https://drive.google.com/file/d/1xsikpLLQY-7FMV1_S5VelmB2_85LD-oi/view?usp=sharing
Most likely you are getting a CORS error.
For security reasons browsers don't seem to allow you to load JSON files stored on your computer, it will work as long as the .json file is hosted online.
So through lottiefiles as you've done, or on your web hosting.
Internal CSS works fine but external style sheet isn't working. I end up with the standard page with no styling showing up. The templates served just fine except no CSS.
Created a simple app to eliminate some of the variables but the same issue persists.
root of app
C:\workspace\goworkspace\src\practice3\
GOPATH C:\workspace\goworkspace
//practice3/main.go
package main
import (
"log"
"net/http"
)
func main() {
fs := http.FileServer(http.Dir("static"))
http.Handle("/", fs)
log.Println("Listening...")
http.ListenAndServe(":8080", nil)
}
//practice3/static/example.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A static page</title>
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
<h1>Hello from a static page</h1>
</body>
</html>
//practice3/stylesheets/main.css
body {
background-color: lightblue;
}
h1 {
color: navy;`enter code here`
margin-left: 20px;
}
No errors, everything seems to work fine (including internal css) except for the external css.
I am using ASP.NET MVC 3 with the Razor engine together with the newest version of the Telerik MVC controls.
In telerik.webblue.min.css there are 2 styles, namely t-button and t-state-default. It is implemented on a button element like this:
<button class="t-button t-state-default" type="submit">Apply</button>
I don't want to use a class attribute to specify which styles to use, I want to specify it in my own stylesheet that all button elements must use these 2 styles. I tried the folowing in my stylesheet but it doesn't work:
button,.t-button,.t-state-default{}
So all that I want to have in my markup is:
<button type="submit">Apply</button>
How would I do this?
UPDATE
When I view source this is what I see:
<link href="/Assets/yui_2.9.0/yui/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.common.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.webblue.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/Stylesheets/hbf.css" rel="stylesheet" type="text/css">
In Firebug when I select the button it shows the top most style for this button as:
button, .t-button, .t-state-default {
}
hbf.css (line 26)
This should work.
However, you could place all the styles from
.t-button,.t-state-default {}
into a single rule labeled
button {}
EDIT
I think I see the problem, based on your update. (If I understand it correctly)
This
button, .t-button, .t-state-default {
}
appears in your hbf.css
However, it is styling nothing. button is not able to reference the other styles that way.
The .t-button, .t-state-default are still receiving styles from the telerik.webblue.min.css stylesheet.
In order to make it work, you need to add button to the telerik.webblue.min.css stylesheet.
Updated:
button,
.t-button,
.t-state-default {
border: 1px solid red;
background: #ccc;
width: 100px;
height: 25px;
}
See Demo: http://jsfiddle.net/rathoreahsan/Q2JwE/