how can i correctly implement html and css to wordpress site? inserting into html section caused this:
enter image description here
enter image description here
and i want it to look like this: check pic
enter image description here
i dont want other text to be in box shadow
* {
box-sizing: border-box;
}
div.cenovy_box {
width: 100%;
outline: 1px solid #f2f1f1 !important;
box-shadow: 0px 5px 10px #d3d3d3;
float: left;
}
div.fotkavboxe {
display: flex;
float: left;
width: 30%;
margin-left: 50px;
}
h1.nadpis_p {
border-bottom: 2px solid #20d796;
font-family: "poppins";
text-align: center;
padding-bottom: 10px;
}
div.tlacidlo {
clear: both;
width: 30%;
display: flex;
}
.k_predajcovi {
font-family: "poppins";
background-color: #000000;
color: #ffffff;
font-size: 20px;
cursor: pointer;
padding: 10px 20px;
border: solid #000000 2px;
opacity: 1;
transition: 0.3s;
}
.k_predajcovi:hover {
color: #000000;
background-color: #fff;
opacity: 1;
}
p.cena_v_boxe {
width: 30%;
font-size: 25px;
font-family: "poppins";
float: left;
}
img.fotka {
background-color: #000000;
border: 2px #555;
opacity: 1;
transition: 0.3s;
}
img.fotka:hover {
color: #fff;
opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="cenovy_box">
<div class="obsah">
<h1 class="nadpis_p">Brutálna vychytávka</h1>
</div>
<div class="fotkavboxe">
<a href="https://www.banggood.com/Xiaomi-Redmi-Note-10-Pro-Global-Version-6GB-128GB-108MP-Quad-Camera-6_67-inch-120Hz-AMOLED-Display-33W-Fast-Charge-Snapdragon-732G-Octa-Core-4G-Smartphone-p-1828679.html?cur_warehouse=HK&ID=62464446304721&rmmds=search"
target="_blank"><img class="fotka" src="https://imgaz.staticbg.com/thumb/large/oaupload/banggood/images/FE/BE/525e460f-581a-46ee-b737-1fe3d9492492.jpg.webp" alt="redmi note 10" style="width: 200px; height:200px;"></a>
</div>
<div class="cena">
<p class="cena_v_boxe">20€</p>
</div>
<div class="tlacidlo">
<button class="k_predajcovi" onclick="window.location.href = 'https://www.google.sk';">
K predajcovi
</button>
</div>
</div>
</body>
</html>
can you please help mw with inserting this code into articles? i want to adding it into articles just html (css will be in custom css settings) i am unable to code my own plugin, so this how i am making this
How to Upload an HTML File to WordPress
1) Navigate to your Admin Dashboard.
2) Click 'Pages' in the left sidebar.
3) Choose an existing page or create a new one.
4) Click 'Add Block.'
5) Add a 'File' block.
6) Choose your HTML file.
Related
I am working on a chatbot at the moment and trying to connect a GUI I have been working with to the project.
It is running smooth but my output is a little messed up; in particular, the chat boxes should alternate between the user and the BOT, but they are stacking on top and not formatting correctly.
I want to fix this issue, but keep the screen dividing in half down the middle so that the bot outputs are on the right and the users on the left. I just need to get them to alternate back and forth.
I've tried anchoring the newest box with a margin-top, tried setting a counter variable to update the placement of each new box, etc., but am having trouble spacing them relative to each other.
Below is the code without the backend work. So, this won't run perfect but it should get the setup I have across...
Here is the CSS code:
body {
font-family: Cambria;
color: rgb(122, 4, 4);
background-color: rgb(136, 175, 175);
}
h1 {
color: black;
margin-bottom: 0;
margin-top: 0;
text-align: center;
font-size: 40px;
}
h2 {
color: black;
font-size: 20px;
margin-top: 3px;
text-align: center;
}
#user_chatbox {
margin-left: 0;
margin-right: auto;
width: 50%;
margin-top: 30%;
}
#bot_chatbox {
margin-left: 50%;
margin-right: auto;
width: 50%;
margin-top: 10%;
/* height: 80%; */
/* background-color: pink; */
/* border-radius: 10px; */
}
#userInput {
margin-left: auto;
margin-right: auto;
width: 95%;
margin-top: 150px;
}
#textInput {
width: 92%;
border: 3px solid Black;
border-bottom: 3px solid #660096;
font-family: Cambria;
font-size: 16px;
}
#buttonInput {
padding: 10px;
font-family: Cambria;
font-size: 72;
}
.userText {
color: rgb(0, 0, 0);
font-family: Georgia;
font-size: 16px;
text-align: left;
line-height: 20px;
}
.userText span {
display:block;
width:auto;
background-color: rgb(87, 201, 152);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
.botText {
color: Black;
font-family: Consolas, monaco, monospace;
font-size: 16px;
text-align: left;
/* line-height: calc(29 + var(--chatbox_spacing))px; */
line-height: 20px;
}
.botText span {
display:block;
width:auto;
background-color: rgb(73,196,199);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
... and here are the .html with .js code (within index.html) that is updating the blocks to be printed out with new information (input from the user and a reply from the bot):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Analysis Chatbot</h1>
<!-- The main chat environment for interacting with the bot. -->
<div>
<!-- The text of the bot. -->
<div id="bot_chatbox">
<p class="botText"><span>Welcome! How can I help you analyze your dataset?</span></p>
</div>
<div id="user_chatbox"></div>
<!-- The input text of the user interacting with the bot. -->
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message">
<input id="buttonInput" type="submit" value="Send">
</div>
<script>
function getBotResponse() {
var rawText = $("#textInput").val();
var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
$("#textInput").val("");
$("#user_chatbox").append(userHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
$.get("/get", { msg: rawText }).done(function(data) {
var botHtml = '<p class="botText"><span>' + data + '</span></p>';
$("#bot_chatbox").append(botHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
});
}
$("#textInput").keypress(function(e) {
if(e.which == 13) {
getBotResponse();
}
});
$("#buttonInput").click(function() {
getBotResponse();
})
</script>
</div>
</body>
</html>
Nothing breaks, but I have attached some images below of the current output. Again, it isn't as much that the replies are basic right now, but rather that I want the displayed text blobs to be alternating from the bot (right side) to the user (left side) while keeping the screen split in the middle.
I want that image to be: the top blue on the right (Welcome...) then the first green on the left (can you find me sales in...) then next blue on right and so on so forth...
I put together a basic example of what you're trying to do using a 100% width wrapper that holds the message inside. The wrapper has display:flex; so that the <div>s inside don't expand. Check it out:
$(document).ready(function() {
$('#sendUser').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message user"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
$('#sendBot').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message bot"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
});
#chatbox{
width: 300px;
height: 400px;
border: 1px solid black;
margin: auto;
margin-top: 20px;
overflow-y: scroll;
}
#inputs{
display: grid;
padding: 10px 0;
width: 300px;
margin: auto;
grid-template-columns: auto 40px 40px;
grid-gap: 4px;
}
.button{
text-align: center;
border: 1px solid #a0a0a0;
cursor: pointer;
}
.button:hover{
background-color: grey;
color: white;
}
.message{
display: flex;
}
.message.user{
text-align: left;
}
.message > div{
margin: 10px 10px 0;
padding: 6px 8px;
border-radius: 15px;
color: white;
}
.message.bot > div{
margin-left: auto;
background-color: teal;
}
.message.user > div{
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox">
<div class="message bot">
<div>
hello
</div>
</div>
<div class="message user">
<div>
hello!
</div>
</div>
</div>
<div id="inputs">
<input type="text" id="userText">
<div class="button" id="sendBot">Bot</div>
<div class="button" id="sendUser">User</div>
</div>
Here's the CodePen if you wanted to mess with it.
I am trying to write a script in a web page that will sort of copy and paste a button and it's hidden content and then append in on the bottom of the first button. The problem is I am not very literate in JS.
So when one would press the "Add" button, button "Test Button #1" will be copied and appended to the bottom as "Test Button #2". Keep in mind that the button may contain a dropdown of sort in the actual script, this one was just shortened, so the second button would have to contain the same info as the first. Any help would be very much appreciated.
Please use my attempt at the bottom script as a template:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
min-width: 250px;
}
.testBtn {
width: 100%;
background-color: grey;
color: white;
border: none;
}
/* Style the header */
.header {
background-color: black;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
border: none;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.addBtn:hover {
background-color: #bbb;
}
</style>
</head>
<body>
<div id="myDIV" class="header">
<h2 style="margin:5px">Test Button List</h2>
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<div class="myUL" id="myUL">
<button class="testBtn">Test Button #1</button>
</div>
<script>
function newElement() {
var li = document.createElement("button");
var inputValue = document.getElementById("myUL").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === !"") {
document.getElementById("myUL").appendChild(li);
}
}
</script>
</body>
</html>
#################EDITED
I tried the node.clone() method, but still cannot append the button. Any suggestions?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
min-width: 250px;
}
.testBtn {
width: 100%;
background-color: grey;
color: white;
border: none;
}
/* Style the header */
.header {
background-color: black;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
border: none;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.addBtn:hover {
background-color: #bbb;
}
.Btn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.Btn:hover {
background-color: #bbb;
}
</style>
</head>
<body>
<div id="myDIV" class="header">
<h2 style="margin:5px">Test Button List</h2>
<span onclick="newSample()" class="addBtn">Add</span>
</div>
<div class="testBtn" id="testBtn">
<button class="Btn">Test Button #1</button>
</div>
<script>
function newSample() {
var p = document.getElementById("testBtn");
var p_prime = p.cloneNode(true);
node.appendChild(p_prime);
}
</script>
</body>
</html>
So here's a few problems.
var li = document.createElement("button");
If it's a <button> why are you calling it var li? Use a meaningful name here.
var inputValue = document.getElementById("myUL").value;
#myUL is a <div> (so why it's called UL is another mystery). You are treating it like an <input /> by trying to get its value. If you want the HTML content, use innerHTML...
var t = document.createTextNode(inputValue);
... but you're creating a text node, so I don't know what you're expecting any more. It's all very confusing.
li.appendChild(t);
This is probably fine. You're appending a text node to a button. Seems ok.
if (inputValue === !"") {
Translation: "if inputValue is identical to true" - this can never happen because inputValue is a string and true is a boolean. Did you mean inputValue !== ""?
On the whole, it's a mess. What you probably want to do is get your "template" button and use .cloneNode(true) on it, then append that to the container.
Hi I am trying to have 20 customize audio players though I could only make the first one work. As soon as I copy and paste the new audio in html it does not start playing. I am not sure if the only way is by giving a unique id to each audio or if there is a way to avoid doing that by changing the javascript code.
thanks!!!
it is also online here http://musictext.yt/audio/audio.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
<link rel="stylesheet" href="reproductor.css">
<script src="reproductor.js"></script>
</head>
<body>
<section id="reproductor">
<audio id="medio" width="400" height="400">
<source src="rout.mp3">
</audio>
<nav>
<div id="botones">
<button class="button" id="reproducir" >play</button>
</div>
<div id="barra">
<div id="progreso">
</div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
JS
function iniciar() {
maximo=80;
medio=document.getElementById('medio');
reproducir=document.getElementById('reproducir');
barra=document.getElementById('barra');
progreso=document.getElementById('progreso');
reproducir.addEventListener('click', presionar, false);
barra.addEventListener('click', mover, false);
}
function presionar(){
if(!medio.paused && !medio.ended) {
medio.pause();
reproducir.innerHTML='play';
window.clearInterval(bucle);
}else{
medio.play();
reproducir.innerHTML='pause';
bucle=setInterval(estado, 1000);
}
}
function estado(){
if(!medio.ended){
var total=parseInt(medio.currentTime*maximo/medio.duration);
progreso.style.width=total+'px';
}else{
progreso.style.width='0px';
reproducir.innerHTML='play';
window.clearInterval(bucle);
}
}
function mover(e){
if(!medio.paused && !medio.ended){
var ratonX=e.pageX-barra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}
window.addEventListener('load', iniciar, false);
CSS
body{
text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
display : block;
}
#reproductor{
width: 100px;
height: 100px;
margin: 60px auto;
padding: 5px;
background: blue;
border: 1px solid #666666;
}
nav{
margin: 1px 0px;
}
.button {
font-family: arial;
background-color: black;
border: none;
color: white;
padding: ;
text-align: center;
font-size: 12px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button:hover {opacity: 1}
#botones{
background-color: black;
width: 100px;
height: 20px;
}
#barra{
position: relative;
width: 88px;
height: 66px;
padding: 4px;
border: 1px solid black;
background: white;
}
#progreso{
position: absolute;
width: 0px;
height: 60px;
background: black;
}
Recently I was create animated image in html with SPAN ans Marquee tag. And now I want to create download link for this images, but I don't know how to do this? Please anyone help me...
This is my Online Project
<html>
<head>
<title> Marquee </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="figure">
<img src="a.jpg" name="images"/>
<div class="figcaption">
<span>
<h2> Believe In Your Self!!!</h2>
<span class='spacer'></span>
<br />
<span class='spacer' align='right'></span>
<h3><marquee>By: Ajay Rathod</marquee></h3>
</span>
</div>
</div>
</body>
</html>
h3
{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: white;
background: black; /* fallback */
background: rgba(0, 0, 0, 0.7);
padding: .5em;
}
#figure {
position: relative;
}
#figure img {
display: block; /* removes trailing whitespace */
outline: solid #000 1px;
width:100%;
}
.figcaption {
position: absolute;
bottom: 10%;
width: 501px;
margin: 0;
font-size: 1.5rem;
font-weight: bold;
line-height: 200%;
text-transform: capitalize;
}
.figcaption span h2{
color: white;
background: black; /* fallback */
background: rgba(0, 0, 0, 0.7);
padding: .5em;
&.spacer {
padding: 0 5px;
background: transparent;
&::before { content: " "; }
}
.figcaption span h3{
color: white;
background: black; /* fallback */
background: rgba(0, 0, 0, 0.7);
padding: .5em;
&.spacer {
padding: 0 5px;
background: transparent;
&::before { content: " "; }
}
You can make any image as downloadable link by doing this
<a download="name.jpg" href="Image-Path" title="Image-Name">
<img src="a.jpg" name="images"/>
</a>
Refer to this link for browser compatibility
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.