blog documentation FAQ followers forum marketplace services youtube

Simple HTML and CSS usage in Jamroom

The Jamroom Network » Forum » Design and Skin Customization » Page » Simple HTML and CSS usage in Jamroom
Isleander
Isleander
@isleander
10 years ago
555 posts
I've been creating simple websites using Dreamweaver (using HTML and CSS) for sometime, and am currently developing such @ http://regal-network.com/ncn

I have recently set up a Jamroom site which I am now using for member profiles, and have linked this to the HTML site (above).

Of course I would like to have these two integrated into a Jamroom site and I am wondering if it's at all possible without loosing the freedom that HTML and CSS offer in website creation (as in the example given).

Thank you.
updated by @isleander: 12/08/14 04:26:35PM
Developer Networks
Developer Networks
@developer-networks
10 years ago
566 posts
You absolutely can take full advantage of HTML and CSS with Jamroom. You also might want to consider Javascript. I reviewed your website and yes you can convert over to Jamroom quite easily.

I suggest you check out Michaels videos here, They are a beginners asset:
https://www.udemy.com/start-your-own-online-community

Those will help you get on your way to development.
douglas
@douglas
10 years ago
2,791 posts
Jamroom uses HTML and CSS in the templates and you have full control over your design. You can clone one of our skins and redesign it to fit your needs. The clone tool can be found in your ACP > Tools > Developer Tools section.

After cloning your skin, click the Skins tab at the top left of the and click your cloned skin, it should take you to the info tab where you can activate it and start designing it.

Jamroom also uses smarty, and some even use some jQuery, but for the most part, the templates are created with HTML and CSS.

Hope this helps! :)


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Isleander
Isleander
@isleander
10 years ago
555 posts
@b360, @douglas, Thanks for the replies. I have already watch the tutorial videos on Udemy.com, and appreciated your comments. I'm not seeing, as yet, any Jamroom sites which reflect the modern style of website which I'd like to achieve; but I do hope it will be possible.

Thanks anyway.
douglas
@douglas
10 years ago
2,791 posts
Jamroom can be used for any type of site and designed in any way you would like.

Here are a couple of sites I've done that have nothing to do with music or a social sites...

http://www.allproappliancerepairokc.com
http://baxtercompanies.com

I don't see any reason why your http://regal-network.com/ncn site couldn't be created using Jamroom.


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 11/06/14 04:38:47AM
Isleander
Isleander
@isleander
10 years ago
555 posts
douglas:

I don't see any reason why your http://regal-network.com/ncn site couldn't be created using Jamroom.

Well if it's possible I'd certainly like to try... but it looks like a very big learning curve for me.

I have tried using the Slate Site Builder using widgets ( http://regal-network.com/jam/) but that really won't accomplish what I'm after. I have also downloaded the Blank Skin, but I'm not exactly sure where to add code in the templates. Do I just paste my code in-between the italics tags, where it has "(index.tpl file)"?

{jrCore_include template="header.tpl"}

(index.tpl file)


{jrCore_include template="footer.tpl"}
douglas
@douglas
10 years ago
2,791 posts
Yes, the home page is made up of three different templates, the header.tpl, index.tpl and footer.tpl.

The header and footer are obviously what shows at the top and bottom of every page, which is why its included at the top and bottom of the index template. The index.tpl is the home page and holds all the content for the home page.

You can also create other pages and the URL to them would be the name of the tempalte, for instance, if you create a template named music.tpl, then the URL would be yoursite.com/music and everything you want on that page would go in that template, of course you would want to include the header and footer otherwise the page would have no style and not look very good.

Hope this helps! :)


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Isleander
Isleander
@isleander
10 years ago
555 posts
I have tried adding HTML and CSS code to the templates be nothing happens or they do not load at all - only get error pages.
I cannot find any information or tutorials about working with Smarty templates. There is a lot of information about creating templates, but I can find no tutorials or information on how to go about adding HTML and CSS code into them.
So I'm at a total loss with this.
paul
@paul
10 years ago
4,326 posts
Basically follow what Douglas said.
In your active skin folder, create a file called my_template.tpl
Open the index.tpl there and copy the {jrCore_include template="header.tpl"}
and {jrCore_include template="footer.tpl"} lines of smarty, in that order. Save the file.
In your browser goto http://yoursite.com/my_template
Do you get the heady and footer? If so you can now start adding your html code in-between the header and footer smarty calls.
To see what smarty variables you have to play with, put in a {debug}. Now when opening the page you'll get a popup with all available. To use a smarty variable just include it inside curly brackets - {$jamroom_url} say.

Make sure you are in developer mode when doing this, to disable caching, otherwise you'll be making changes and not immediately seeing any results.
hth
Pa


--
Paul Asher - JR Developer and System Import Specialist
Isleander
Isleander
@isleander
10 years ago
555 posts
paul:
In your active skin folder, create a file called my_template.tpl

I do appreciate your help, but as I am not as yet familiar with Jamroom, not all of this is clear.
Where and how do I create a file in the active skin folder? I cannot see anywhere with this option.

Thanks again
paul
@paul
10 years ago
4,326 posts
Sorry.
In the Admin Control Panel, click the Skins tab to see which skin is active (enabled) for your site. If its a fresh install it'll probably be 'Elastic'.
In your FTP, goto the skins folder then see sub-folders of all the installed skins. Goto the enabled folder and see all the templates for that skin. Add your file there.
hth
Pa


--
Paul Asher - JR Developer and System Import Specialist
Isleander
Isleander
@isleander
10 years ago
555 posts
OK... I'll give this a try...

Thanks again
Isleander
Isleander
@isleander
10 years ago
555 posts
I managed to create a new template page, and can see it on the site, but I'm at a total lost as to coding this using HTML and CSS. I added a simple div, but it does not show on the page (below). http://regal-network.com/jam/my_template

Obviously I'm not familiar with Smarty Code, and I cannot find anywhere on the net that shows how to write it properly. Smarty Net is no help at all.

Am I putting the { } in the wrong place?
updated by @isleander: 11/07/14 07:14:00AM
douglas
@douglas
10 years ago
2,791 posts
Remove the {}, since it looks like those pages and the image are not a part of Jamroom.

If the images and pages were in your skins/ACTIVE_SKIN folder, you would use

{$jamroom_url}/

instead of

{“http://regal-networik.com/ncn/video.html”}/

You might want to check out the Docs

https://www.jamroom.net/the-jamroom-network/documentation

and to get items listing on your front page, you'll want to use the jrCore_list function.

https://www.jamroom.net/the-jamroom-network/documentation/development/89/jrcore-list

This page is helpful too.

https://www.jamroom.net/the-jamroom-network/documentation/development

Hope this helps! :)


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Isleander
Isleander
@isleander
10 years ago
555 posts
I clearly need lessons in configuring the templates. It's just far too complicated otherwise.
douglas
@douglas
10 years ago
2,791 posts
There are some videos in the docs that should walk you through template creating.

https://www.jamroom.net/the-jamroom-network/documentation/development/1043/creating-a-new-page-for-a-skin


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Isleander
Isleander
@isleander
10 years ago
555 posts
douglas:
There are some videos in the docs...

Thanks Douglas, I feel like a fish out of water!
douglas
@douglas
10 years ago
2,791 posts
Jamroom takes a little getting use to and can be daunting at first, but once you start to understand how things work, it becomes easier and easier.

A new template for the Elastic skin might look something like this:

{jrCore_include template="header.tpl"}

{* BEGIN CONTAINER *}
<div class="container">

    {* BEGIN ROW *}
    <div class="row"> 

        {* BEGIN LEFT SIDE *}
        <div class="col3">

            {* Left Side Block *}
            <div class="block">
                <div class="title">
                    <h2>Title Here</h2>
                </div>
                <div class="block_content">
                    <div class="item">
                        jrCore_list function here to show a list of items.
                    </div>
                </div>
            </div>

        </div>
        {* END OF LEFT SIDE *}



        {* BEGIN CENTER SECTION *}
        <div class="col6">

            <div class="title">
                <h2>Title Here</h2>
            </div>
            <div class="block_content">
                <div class="item">
                    jrCore_list function here to show a list of items.
                </div>
            </div>

        </div>
        {* END CENTER SECTION *}

        {* BEGIN RIGHT SIDE *}
        <div class="col3 last">

            {* Left Side Block *}
            <div class="block">
                <div class="title">
                    <h2>Title Here</h2>
                </div>
                <div class="block_content">
                    <div class="item">
                        jrCore_list function here to show a list of items.
                    </div>
                </div>
            </div>

        </div>
        {* END RIGHT SIDE *}

    </div>
    {* END ROW *}

</div>
{* END CONTAINER *}

{jrCore_include template="footer.tpl"}



--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 11/08/14 05:00:59AM
Isleander
Isleander
@isleander
10 years ago
555 posts
OK, Thanks Douglas.

I'm used to having the CSS code within the HTML structure (within the head) with the corresponding divs in the body, so working with templates is quite new to me, and has limited options governed by the template.

I'll probably just used the templates as they are for now.

Thanks again.
updated by @isleander: 11/08/14 07:10:52AM