Community discussions

MikroTik App
 
mikedod
just joined
Topic Author
Posts: 4
Joined: Tue Jan 09, 2024 12:41 pm

Background image on radvert.html

Tue Jan 16, 2024 11:57 am

Hi all,

I wonder if someone could help me.
I am trying to put a background and an image on the radvert.html but it looks like i am missing something as it looks like the path is wrong.
I have uploaded the images in the img folder.
While on the PC when opening the html looks fine, when it comes at the mikrotik it doesn't show any image or background.
below is the html.
Thank you in advance :)


<html>
<head>
<meta http-equiv="refresh" content="2; url=$(link-orig)">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
<title>mikrotik hotspot > Wellcome to @Freewifi</title>
<style type="text/css">
body {
background-image: url("img/CaptureBackG.JPG");
}
>
<!--
textarea,input,select {
background-color: #FDFBFB;
border: 1px #BBBBBB solid;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}

body{ color: #737373; font-size: 12px; font-family: verdana; }

a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 12px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 12px; color: #7A7A7A; }

-->
</style>

<script language="JavaScript">
<!--
var popup = '';
function openOrig() {
if (window.focus) popup.focus();
location.href = unescape('$(link-orig-esc)');
}
function openAd() {
location.href = unescape('$(link-redirect-esc)');
}
function openAdvert() {
if (window.name != 'hotspot_advert') {
popup = open('$(link-redirect)', 'hotspot_advert', '');
setTimeout("openOrig()", 1000);
return;
}
setTimeout("openAd()", 1000);
}
//-->
</script>
</head>
<body onLoad="openAdvert()">


<p style="text-align: center"><img align="center" border="0" hspace="0" src="img/Capture.jpeg" style="height: 321px; width: 505px" /></p>

<table height="100%" width="100%">
<tbody>
<tr>
<td align="center" valign="middle"><span style="font-size: 48px">Wellcome to @Freewifi.<br />
<br />
Wellcome </span><span style="font-size: 48px"><span><a href="$(link-redirect)" style="font-size: 48px" target="hotspot_advert">Click here to connect CONNECT</a></span></span><span style="font-size: 48px"> manually.</span></td>
</tr>
</tbody>
</table>
</body>
</html>
 
User avatar
rextended
Forum Guru
Forum Guru
Posts: 12001
Joined: Tue Feb 25, 2014 12:49 pm
Location: Italy
Contact:

Re: Background image on radvert.html

Tue Jan 16, 2024 12:29 pm

CaptureBackG.JPG
Capture.jpeg

Check exact file names, is case sensitive.


(Wellcome on english is only with one "L" I suppose...)
 
mikedod
just joined
Topic Author
Posts: 4
Joined: Tue Jan 09, 2024 12:41 pm

Re: Background image on radvert.html

Tue Jan 16, 2024 1:17 pm

Thank you for that, yes I am a bit dyslexic :P

I am running the same images on the login.html and works fine, and I have the same path on the html, same names, and the 2 html are at the same location.

That's why i don't understand what is wrong.
Below is part of the script from the login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>my own hotspot login Hotspot &gt; login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<style type="text/css">
body {
color: #EF8E00;
font-size: 10px;
font-family: verdana;
background-color: #000000;
background-image: url("img/CaptureBackG.JPG");
}

textarea,input,select {
background-color: #FFFFFF;
border: 1px solid #BBBBBB;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #EC9103;
border-top-color: #FFFFFF;
}

a, a:link, a:visited, a:active {
color: #0000CC;
text-decoration: none;
font-size: 10px;
background-color: #000000;
}
Last edited by mikedod on Tue Jan 16, 2024 1:42 pm, edited 1 time in total.
 
User avatar
rextended
Forum Guru
Forum Guru
Posts: 12001
Joined: Tue Feb 25, 2014 12:49 pm
Location: Italy
Contact:

Re: Background image on radvert.html

Tue Jan 16, 2024 2:44 pm

I do not know well css, but one section replace another?

You have two time "body" on css, move the background line on the body section, and remove duplicate body at the start:

probably correct css code

<style type="text/css">
<!--
textarea,input,select {
background-color: #FDFBFB;
border: 1px #BBBBBB solid;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}

body{ color: #737373; font-size: 12px; font-family: verdana; background-image: url("img/CaptureBackG.JPG"); }

a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 12px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 12px; color: #7A7A7A; }

-->
</style>
 
mikedod
just joined
Topic Author
Posts: 4
Joined: Tue Jan 09, 2024 12:41 pm

Re: Background image on radvert.html

Tue Feb 27, 2024 1:54 pm

Hi all, I fixed a bit the script as below.
I wonder if someone can test and tell me what is wrong.
I don't get to see an image on this one while the file is running on the mikrotik, when running on the PC is fine. On the mikrotik is like the path for the image is wrong.
I added the image in all the folders just in case and also changes the path on the script each time but still the same.
To me the script looks fine, just wondering if someone could help. Attached are the hotspot files that they show the location of the image.
This is the radvert.html that pops up when setting advertisement on the hotspot.
Thank you in advance :)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="2; url=$(link-orig)">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
<title>mikrotik hotspot > advertisement</title>
<style type="text/css">
<!--
textarea,input,select {
background-color: #FDFBFB;
border: 1px #BBBBBB solid;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}

body {
background-image: url('EX.gif');
background-color: #ADD8E6;
color: #000000;
font-size: 12px;
font-family: verdana;
}

a, a:link, a:visited, a:active {
color: #000000;
text-decoration: none;
font-size: 12px;
}

a:hover {
border-bottom: 1px dotted #c1c1c1;
color: #000000;
}

img {
border: none;
}

td {
font-size: 12px;
color: #000000;
}
-->
</style>
<script language="JavaScript">
<!--
var popup = '';
function openOrig() {
if (window.focus) popup.focus();
location.href = unescape('$(link-orig-esc)');
}
function openAd() {
location.href = unescape('$(link-redirect-esc)');
}
function openAdvert() {
if (window.name != 'hotspot_advert') {
popup = open('$(link-redirect)', 'hotspot_advert', '');
setTimeout("openOrig()", 1000);
return;
}
setTimeout("openAd()", 1000);
}
//-->
</script>
</head>
<body onLoad="openAdvert()">
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle"style="font-size: 70px">
Would you like to continue browsing?
<br><br>
<a href="$(link-redirect)" target="hotspot_advert" align="center" valign="middle"style="font-size: 70px">YES</a>
<br>
</td>
</tr>
</table>
</body>
</html>
You do not have the required permissions to view the files attached to this post.
 
jaclaz
Long time Member
Long time Member
Posts: 623
Joined: Tue Oct 03, 2023 4:21 pm

Re: Background image on radvert.html

Tue Feb 27, 2024 3:06 pm

SIngle quotes vs. double quotes? :?
 
mikedod
just joined
Topic Author
Posts: 4
Joined: Tue Jan 09, 2024 12:41 pm

Re: Background image on radvert.html

Wed Feb 28, 2024 11:36 am

not good at all with this i changed the quotes but still the same.
 
User avatar
normis
MikroTik Support
MikroTik Support
Posts: 26374
Joined: Fri May 28, 2004 11:04 am
Location: Riga, Latvia

Re: Background image on radvert.html

Wed Feb 28, 2024 11:42 am

Find a webdesigner that can help. There are lots of HTML and CSS mistakes.
Also you should be debugging from the OUTPUT, not from your source. Router will modify values based on your variables, maybe some quotes are removed etc. Use "View source" or "Inspect element" in the browser when this page is actually shown to the user. Then you will see mistakes better.
 
mikedod
just joined
Topic Author
Posts: 4
Joined: Tue Jan 09, 2024 12:41 pm

Re: Background image on radvert.html

Wed Feb 28, 2024 1:55 pm

Thank you!

Who is online

Users browsing this forum: deadmaus911, eddieb, GoogleOther [Bot], holvoetn and 82 guests