Adding buttons with links embedded in them

researchcooperative
@researchcooperative
7 years ago
694 posts
1. I am using jrNinja skin, and would like to display many buttons on one page to link to different forum topics. The links could be to anything.

My problem is how to add attractive buttons, and spread them out nicely on the page.

2. Using Sitebuilder, I found I could add a very simple HTML button code inside a single-celled table with a coloured background.

This gives me a white button on a dark background, with text inside the button:

<table style="background-color: #6e649c; border-color: #35b4f0;">
<tbody>
<tr>
<td><form><center><input value=" Editing OFFERS " onclick="window.location.href='https://researchcooperative.org/community/forum/editing-offers' " type="button"></center></form></td>
</tr>
</tbody>
</table>

The table cell resizes with the screen, and I can group buttons inside different containers on different lines using the Page Config tab to set up the basic page layout.

What I cannot seem to do is control the size of the font used inside the button, no matter where I put the
<font size="number"> </font>
codes. Changing the size of the cell does nothing to the text inside the cell.

3. I have seen many different button code generators online. These are free, and most seem to generate a short html metacode that is meant to cross-refer to a much longer piece of CSS code.

I have no idea how these more complex button codes can be implemented in a Jamroom site.

Can they be set up to display inside a Sitebuilder page, using Sitebuilder to build the general layout?


--
PJ Matthews, Kyoto
Migrated from Ning 2.0. Now at Jamroom 6 beta and using Jamroom Hosting for The Research Cooperative (researchcooperative.org)

updated by @researchcooperative: 09/05/17 09:47:52PM
SteveX
SteveX
@ultrajam
7 years ago
2,584 posts
"The size attribute of <font> is not supported in HTML5. Use CSS instead."

Would it help if you gave your button an existing jamroom class?
class="form_button"



--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
michael
@michael
7 years ago
7,714 posts
Here's a video about CSS buttons that shows some steps:
CSS coding on a button
researchcooperative
@researchcooperative
7 years ago
694 posts
At this stage, some overall guidance would help:

Should CSS for a button be embedded inside:

(1) a Sitebuilder page, with the widgets we have available?
(2) a skin .tpl file somehow, somewhere?
(3) a module .tpl file?


--
PJ Matthews, Kyoto
Migrated from Ning 2.0. Now at Jamroom 6 beta and using Jamroom Hosting for The Research Cooperative (researchcooperative.org)
michael
@michael
7 years ago
7,714 posts
CSS should be put via SFTP here:
/skins/(YOUR CUSTOM SKIN)/css/(any file you want in here)

so in your case, perhaps at the bottom of site.css is a good location:
/skins/xxRC_10_03_17/css/site.css

Your SFTP details are here:
https://www.jamroom.net/researchcooperative/hosting/server_config/37
css.jpg
css.jpg  •  65KB