Shannt
Regular poster
Registered: 02-2019
Location: Texas
Posts: 143
Karma: 0 (+0/-0)
|
Reply | Quote
|
|
Adding Shoutbox Under Who's Online
I would like to add a shoutbox under the who's online but just on the main page only if possible.
https://bourcountryhomeskins.runboard.com/
This is the code I was going to use.
<iframe src="https://www6.cbox.ws/box/?boxid=852970&boxtag=3xbPWn" width="150" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
---
|
12/21/2021, 3:54 pm
|
Link to post
Email Shannt
PM Shannt
|
Susa
Global Administrator
Registered: 07-2006
Location: Oχάιο
Posts: 4626
Karma: 128 (+137/-9)
|
Reply | Quote
|
|
Re: Adding Shoutbox Under Who's Online
I am sending you help!
|
12/22/2021, 1:01 am
|
Link to post
PM Susa
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26746
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: Adding Shoutbox Under Who's Online
Hi Shannt,
Why not use Runboard's built-in chatroom?
|
12/22/2021, 1:09 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Shannt
Regular poster
Registered: 02-2019
Location: Texas
Posts: 143
Karma: 0 (+0/-0)
|
Reply | Quote
|
|
Re: Adding Shoutbox Under Who's Online
Instead of adding a shoutbox under the who's online is there a way to add the code below?
<center><html>
<head>
<style>
#customers {
font-family: Verdana;
border-collapse: collapse;
width: 81%;
border: 1px solid #000;
font-size: 12px;
}
#customers td, #customers th {
border: 1px solid #000;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #E3D6C4;}
#customers tr:hover {background-color: none;}
#customers th {
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
background: url(https://s7.gifyu.com/images/dark-brown-background.gif) ;
color: #E3D6C4;
text-shadow: 0px 1px 1px #000000;
font-size: 15px;
font-family: Kite One;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Calendar</th>
<th>Hello Y'all</th>
</tr>
<tr>
<td><br><center><img src="https://s6.gifyu.com/images/january_snow.gif"></center>
<center>1st New Year's Day</center<br>
<center>22nd Shannon's Birthday</center>
<center>23rd Nabeela's Birthday</center></td>
<td><center><img src=""><br></center>
<br>
<center>Hello all, welcome!<br>
We're a family friendly group. I hope you feel cozy and comfortable here.<br>
There's a topic for everyone but if you don't see one you like let me know.
If you need anything please let me know. Happy posting!
</center>
<br></td>
</tr>
</table>
</body>
</html></center>
---
|
6/28/2022, 5:07 pm
|
Link to post
Email Shannt
PM Shannt
|
Susa
Global Administrator
Registered: 07-2006
Location: Oχάιο
Posts: 4626
Karma: 128 (+137/-9)
|
Reply | Quote
|
|
Re: Adding Shoutbox Under Who's Online
Lesa will be coming.
|
6/28/2022, 5:13 pm
|
Link to post
PM Susa
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26746
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: Adding Shoutbox Under Who's Online
Hi Shannt,
No, you definitely do not want to use that code, because it will cause a whole lot of errors.
I wouldn't normally recommend <table> tags for layout, but for such a small section of the page, I don't think it will hurt, plus I think it will make this section easier for you to manage.
This will show up below your banner instead of below your Who's Online, but I think it will look nice there. If you really, really, really want it under the Who's Online, I may or may not be able to accomplish this feat, and even then, it may or may not work right in a lot of different browsers.
That said...
At the top of your Custom CSS, add this:
/* CALENDAR AND WELCOME BOX UNDER BANNER */
#welcome {
width: 720px;
margin: 1em auto;
text-align: center;
background: #000;
border-spacing: 1px;
font: 12px verdana;
}
#welcome th {
background: #7f5f4b url('https://s7.gifyu.com/images/dark-brown-background.gif');
padding: 5px 0;
color: #E3D6C4;
text-shadow: 0px 1px 1px #000000;
font-size: 15px;
font-family: 'kite one', verdana, arial, sans-serif;
}
#welcome td {
vertical-align: middle;
background: #e3d6c4;
padding: 8px;
}
#welcome p {
margin: 0;
}
If you only want this to appear on your main page and nowhere else, add this immediately after the code I just gave you:
#welcome {
display: none;
}
#ak_board_home #welcome {
display: table;
}
At the bottom of your HTML header, add this:
<table id="welcome">
<tr>
<th>Calendar</th>
<th>Hello Y'all</th>
</tr>
<tr>
<td>
<p><img src="https://s6.gifyu.com/images/january_snow.gif" alt="January"></p>
<p>1st New Year's Day</p>
<p>22nd Shannon's Birthday</p>
<p>23rd Nabeela's Birthday</p>
</td>
<td>
<p>Hello all, welcome!</p>
<p>We're a family friendly group. I hope you feel cozy and comfortable here.</p>
<p>There's a topic for everyone but if you don't see one you like let me know. If you need anything please let me know. Happy posting!</p>
</td>
</tr>
</table>
In the CSS, notice this line in particular:
background: #7f5f4b url('https://s7.gifyu.com/images/dark-brown-background.gif');
#7f5f4b is this color, which I chose to match your background image. If gifyu goes down for any reason or your background image disappears, it will show this background color in its place. If you change this background image, you should also change the background color to something that would work well in place of the image, should the image be unreachable for whatever reason.
Also note this part in the HTML:
<p><img src="https://s6.gifyu.com/images/january_snow.gif" alt="January"></p>
Just like with the background image, you should also change this to the month you're displaying. If the image can't be displayed for any reason, it will display the alt text instead. Also, if someone is blind and uses a screen reader, it will read the alt text so they know what the image says.
Note to others who are reading this, the reason the 'kite one' font will work here is because Shannt already has code in place to display this font, which is hosted by Google. For more information on that, see: https://fonts.google.com/
Last edited by Lesigner Girl, 6/28/2022, 10:59 pm
|
6/28/2022, 10:42 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|