solved Where is CSS code located in a JR site? And related questions

I see many threads discussing CSS code, but almost everyone seems to already know where it is and how to use it.

On one thread, it appears that something called skin_init has a collection of CSS codes that the skin somehow refers to.

Does this mean there is a central location for CSS code as well as peripheral location (in the skin) where CSS code is also located?

I have no overall image of where it all fits in. I am not planning to work with CSS myself, but it would be good for me to understand its role and position in a JR site more clearly.

In Widgets, I can see where html code fits in. But when we wish to add a background color to the full widget area, it seems we have to use CSS code, not html, but this CSS code is not in the widget. We have to find a Widget ID, and then put that into some CSS code and put the CSS code somewhere else. Where is the widget ID and where is the CSS code that refers to it?

In brief, what are the relationships - in the most general terms - between these different things:

1. skin .tpl files
2. skin_init
3. widgets
4. widget ids
5. css code
6. html code



--
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: 10/03/17 12:28:50PM

There are many ways to work with jamroom because there are multiple layers of over-ride capabilities.

So for web developers who like to work with normal web development techniques, going to look for settings in the ACP to try to change the color of something is not a natural flow for them.

For web developers the way they work with design on the web is through alteration of .css files and an IDE or editor.

The current active skin will have a containing folder /css and all the css files will be contained in that. You can access it via SFTP into your server:

Docs: "Connecting to your server using SFTP"
https://www.jamroom.net/the-jamroom-network/documentation/jamroom-hosting/2552/connecting-to-your-server-using-sftp

Then the css will be in:
/skins/(YOUR SKIN)/css/(many files in here).css

In that same skins folder you will find a file called
/skins/(YOUR SKIN)/include.php

which is where you will find the skin_init() function which pulls in all of the .css files that the skin uses, you can add more if needed.

1. skin .tpl files
These are the structure of each page, its made up of a combination of smarty and html.

2. skin_init
This is found in the include.php file for the skin and fires off functions which allow the system to understand what files need to be included in order for the skin to function

3. widgets
These are a different way to create a page, you can use Site Builder and widgets OR a somepage.tpl file to create the page structure. Each widget will have an id which can be targeted by CSS if specialized styling is required for that widget

4. widget ids
CSS can target structure via multiple methods, id's, classes and even by the element name. CSS is a language of styling, so you can say "everything that has a class of blue_thing, make it the color blue" "everything that has the id of some_widget make its corners rounded and give it an orange background"

5. css code
A design language for styling html elements via the use of tags attached to the elements. usually classes

6. html code
The language of the structure of web pages, tells the browser what things need to go on the page.

Thanks very much - that is all good to know.

Just one more question: where can we find or see the ID of a particular widget of interest?

Can we see it when we look at a widget through Sitebuilder, or is there some kind of datastore list of all widgets and their ids? Or both?


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

The question your asking is "What are some web development techniques", there are a lot of them and lots of tools to help.

This is an older video about tools we use:
Development Tools the Jamroom Team uses

They're not the only tools. Each web developer finds different sets of tools that work for them.

Its not our goal to try to train web developers, there are already lots of resources on the web for that, but we do try to help out those interested.

That's good too, thanks.

I checked the Documentation for Site Builder>Widgets and widget IDs are not mentioned there so are presumably not needed for day-to-day use of Site Builder.

Did a search on all JR documentation, and "widget id" is not mentioned anywhere. I guess it is just not very critical for anyone but a developer.


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

Looked at the web_dev.jpg and found your guide to the widget id there!

Thanks.


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