blog documentation FAQ followers forum marketplace services youtube

solved Configuring the Homepage with SiteBuilder

The Jamroom Network » Forum » Using Jamroom » Page » Configuring the Homepage with SiteBuilder
sekeri
sekeri
@ilker
9 years ago
334 posts
I am trying to build my homepage using site builder. But could not find a way to set page background nor widget containers backgrounds or font colors etc. It uses the standard website content css settings.

As you can imagine the homepage should look more special and attractive. Is there a way to do this?
updated by @ilker: 12/22/16 11:55:59AM
michael
@michael
9 years ago
7,714 posts
The widget stuff does have a bunch of CSS classes to identify them:
class="item widget-item widget-item-widget_html"

To identify them as an .item then a .widget-item then the type of widget it is: .widget-item-widget_html

If you want to target a specific widget, they each have a unique id too:
id="widget_id-1"

That should be enough to apply any CSS you need. If you need more, then you can add extra div's around the type. eg to change an HTML WIDGET you can over-ride the tempalte for it:

/modules/jrSiteBuilder/templates/widget_html_display.tpl

copy that to
/skins/( YOUR SKIN )/jrSiteBuilder_widget_html_display.tpl

and your skins version will work instead. add any wrapper div's there.

(or via the ACP TEMPLATES tab if you prefer that method.)
sekeri
sekeri
@ilker
9 years ago
334 posts
Thank you Michael! That was the info I needed.
sekeri
sekeri
@ilker
9 years ago
334 posts
jrSiteBuilder.css is located under the module folder which means with the next update my changes will be gone. What is the procedure for making changes in css here?
michael
@michael
9 years ago
7,714 posts
Either:
1.) put the changes in the .css file for your skin.

OR
2.) use the STYLE tab of the module or skin
ACP -> SKINS -> YOUR SKIN -> STYLE -> (whatever style your changing)
ACP -> MODULES -> SOME MODULE -> STYLE -> (whatever style your changing)
sekeri
sekeri
@ilker
9 years ago
334 posts
Okay, thank you Michael. I just wanted to know if there is a better way to do it before going to a wrong direction.
michael
@michael
9 years ago
7,714 posts
My preferred way is to put it in the skin, because I like working with the filesystem more than control panel settings.

I'd rather use the search functionality of my IDE than go clicking around in a web browser. Whatever works for you is the right way. :)
sekeri
sekeri
@ilker
9 years ago
334 posts
I completely agree with you on that :)
John Bizley
John Bizley
@john-bizley
9 years ago
251 posts
One way to secure your css settings when a skin is updated is to create a css stylesheet and add that to a folder somewhere on your server then add the link to it in the templates skin css. This way when the skin opens it will run the css for that particular section. Then when an update has been made that may affect the removal of the css you just need to then add the link back in again rather than adding in all your styling again.
sekeri
sekeri
@ilker
9 years ago
334 posts
Thank you John. This is also one of the options I consider but in every update the website may collapse until you add the link back again. Because it will not happen so often I guess it is tolerable.
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
9 years ago
824 posts
i was wondering this too is there no pallet to play with colors and backgrounds ? it is all code so you put in a code and see if it looks good and then keep going back and forth just thinking about that give me a headache please tell me it isn't so?
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
9 years ago
824 posts
since i basically want to recreate the same look as i have on ning3 site is it possible for me to grab all the code from the design of the ning site and just place it inside the jamroom code would that work ?
Strumelia
Strumelia
@strumelia
9 years ago
3,603 posts
I don't think that would work. Kinda like taking everything on a windows hard drive and throwing it onto a Mac and hoping it works. ;)


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
michael
@michael
9 years ago
7,714 posts
@zachary-moonshine There are color selector icons to choose a color from in the STYLE editor. If you plan on doing a lot of customization, then better than the STYLE editor for the skins are normal web development techniques.

The STYLE editor is there for users who don't want to learn/don't know web dev stuff. The web dev stuff gives you a lot more control. (and in my opinion are easier)

Here's a video on how I reckon is the best way to approach finding things to change CSS issue:
Using firebug with the STYLE tab
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
9 years ago
824 posts
yes sorry guys i posted these comments before i had seen this video showing how simple it is in the other forum thread. the style editor will get me pretty much what i need to get started. I like to keep it simple and try to utilize all the tools you guys already have in place maybe down the road get more complex the more i get comfortable with it but the firebug and stye editor makes it look like a walk in the park thanks again for this excellent video @michael

Tags