I need some help creating a CSS map

@izhmel
10 years ago
1,319 posts

I need some help creating a CSS map and I don't have time to learn fire bug + the 10 other CAD software I have to use

http://dubmusic.com/the-scientist/page/28/welcome-to-jamroom-edit-css-navigation-page

Can you tell me what CSS edits the following ?

site News
text in blue under the banner

The gray box under the photo section
http://dubmusic.com/kelli-love/audio/albums/i-am-kelli-love

users online
The black text

Audio
The text in the audio section
http://dubmusic.com/arcade-fire-remixed-by-the-scientist/audio

The Bio text

The Blog text

These are the key areas I and others may need to edit and I am going to create a page for personal use, others welcome to have it and take it to the next level with graphics and bullets, that target specific areas hopefully the links wont change in updates .

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 06/19/14 04:38:50AM

@douglas
10 years ago
2,772 posts

You should really install Firebug, its just a Firefox addon, and to use it all you have to do is right click on an area on your site and click the "Inspect Element With Firebug" option and it will open an extra window to show you the code used for that area as well as the CSS class being used, that should allow you to find whatever ID/Class your looking to modify.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

MAD
@madc
10 years ago
600 posts

.title
.stat_entry_box
body
.info_c
body
info_c
Last one not sure what area

and by the way
That was without any cad software lol

--
~ https://punkbandpromotions.com ~
Check us out for all your Punk/Alternative Music!
Check us out on Facebook:- https://facebook.com/PunkBandPromotion

@izhmel
10 years ago
1,319 posts

That was kind of a set up for you MAD© , I new I would get that answer from you , I agree I should get fire bug and I did but you thinking with your programers head..

I tried an experiment with an artist / musician who wants to own a jamroom site and who helps me from time to time and told him to use fire bug to change the colors ,and he gave up in one minute because this is what he sees in fire bug

"""""" !@#$%^&*(*)(*&^^&*&^%$#%$^T%T$RW%Rjyrhjgfxdjhxjgvj//ss$%6$%$^%$^ """"""

they don't understand that language MAD© and is why the CSS map is needed

Can you please give us some help with the questions or create a map for those key areas ??

Thanks

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/13/14 09:18:05AM

@izhmel
10 years ago
1,319 posts

fire bug dose not say what the css is, i.e. core_html.css

I cant understand the logic of all the task you have to do in fire bug VS.

a 2 step process in the CSS navigation page

http://dubmusic.com/the-scientist/page/28/welcome-to-jamroom-edit-css-navigation-page

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/13/14 09:28:44AM

@douglas
10 years ago
2,772 posts

Is there a reason you need to allow a user to modify the CSS for the entire site?

Is the user a site admin or just a user?

Thanks!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@izhmel
10 years ago
1,319 posts

douglas:
Is there a reason you need to allow a user to modify the CSS for the entire site?

Is the user a site admin or just a user?

Thanks!

No this is a artist/ admin I tried the experiment with , I have two and is gonna try the experiment on the other artist/ admin to see if they can understand firebug and why the CSS navigation is needed ... imagine allowing members to change there profile CSS and telling them to use firebug

--
The Scientist
dubmusic.com
Thanks for any assistance.

@brian
10 years ago
10,144 posts

izhmel:
fire bug dose not say what the css is, i.e. core_html.css

No, but it will show you the CSS class/ID name - then you enter that into the SEARCH field in the CSS editor, and it will bring it up for you.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

@izhmel
10 years ago
1,319 posts

I never used firebug before and most artist never will because when they see programers code "like class id" they will leave firebug , can you give an example what a css id is for the BG color ? and is why I am rejecting the firebug way verses the "Jamroom Edit CSS navigation page"

http://dubmusic.com/the-scientist/page/28/welcome-to-jamroom-edit-css-navigation-page

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/13/14 11:15:34AM

@brian
10 years ago
10,144 posts

Let me know when you've got your page setup to edit all 160+ CSS classes and ID's that are currently editable using Jamroom's Style editor (that is just for Elastic).

As for Firebug, make sure it is ON, then:

1) click on the small "pointer pointing into the box" icon on the far left
2) click on the screen where you want to see the class/ID for
3) look in the lower right for the CSS classes involved in the style.

See my attached screenshot.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

SteveX
@ultrajam
10 years ago
2,583 posts

But to Iz the screenshot just says """""" !@#$%^&*(*)(*&^^&*&^%$#%$^T%T$RW%Rjyrhjgfxdjhxjgvj//ss$%6$%$^%$^ """"""

And he assumes that most other musicians perceive it inthe same way.

He's invested too much time in that assertion to give it up (possibly ever), and feels reinforced by the rewards already gained. (the rewards already proferred do seem to justify his continued... I'd say misdirected, effort). It's a great amount of effort to be sure, maybe (hopefully) to be applauded, and it is almost working for him.

@Izhmel - turn up the bass, a little less volume, and drop the cowbell.

--
¯\_(ツ)_/¯ 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 :)

@izhmel
10 years ago
1,319 posts

SteveX as a design engineer, I design redesign until I gets it right , but as I know most artist have to get some one to wipe there ass and all of that language the don't wanna be bothered with including my self just for changing colors . my specialty are designing audio gear and mixing music .

Most artist specialize in getting the next hoe in the next town, you guys specialize in making the best platform for musicians and artist I know about.

I know a css navigation would be best I tried firebug and see what you mean , but I don't wanna study a next software and I know most artist wont.

I all ready tested firebug with an artist and when he brings up firebug he saw a martian language and gave up in 1 minute .

I know you guys could do better than me adding graphics and links to the most likely areas the artist may wanna edit ..

I added a few more using firebug but still knows most people who don't have any technical skills wont wanna use firebug you can barely get some of them to manage there face book page..

Here is what I added and can you please take it to the next level adding graphics and bullets that targets specific targets

http://dubmusic.com/the-scientist/page/28/welcome-to-jamroom-edit-css-navigation-page

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/13/14 02:38:56PM

SteveX
@ultrajam
10 years ago
2,583 posts

As a design engineer, you know you can do random, and you know you can do programme.

We both know you are just wasting words in a misdirected attempt to save yourself some time and effort. Like a man punching holes in the bottom of the boat. Not cool, guess who drowns first.

--
¯\_(ツ)_/¯ 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 :)

@izhmel
10 years ago
1,319 posts

Well Well Well !

--
The Scientist
dubmusic.com
Thanks for any assistance.

@michael
10 years ago
7,697 posts

Why don't you design a system @izhmel that you would understand, then explain it to us in a way that allows us to build it.

Something that is simple enough for you to be able to use without thinking about it.

iLoveHouseMusic
@ilovehousemusic
10 years ago
517 posts

brian:
Let me know when you've got your page setup to edit all 160+ CSS classes and ID's that are currently editable using Jamroom's Style editor (that is just for Elastic).

As for Firebug, make sure it is ON, then:

1) click on the small "pointer pointing into the box" icon on the far left
2) click on the screen where you want to see the class/ID for
3) look in the lower right for the CSS classes involved in the style.

See my attached screenshot.

How funny - this is exactly how I use firebug...and this is the ONLY thing I use firebug for. So it's not that difficult.

@izhmel - Just consider firebug another tool in helping you develop your website. Don't think of it as a hassle that you can't learn.

I'm an DJ (creative), and a network engineer (technical). Sometimes I get in my comfort zone and don't want or have the time to learn new things. Too busy perhaps. But every now and then you just need to take a second to get out of your comfort zone and learn something new. Become somewhat proficient in it. Then move on. You now have another item in your bag of tricks.

I'm a big fan of the "If you want something done right do it your self" approach. That attitude usually helps me break out of that comfort zone. But on that note, you can't be a master at everything. So just take what you need from firebug (the process that @brian mentioned) and move on.

No need to complain about learning all the firebug features.

Good luck,
Brian
updated by @ilovehousemusic: 05/14/14 07:54:57AM

MAD
@madc
10 years ago
600 posts

This is like the first time my 3 kids learned to ride a bike.
They were hesitant, scared and had no idea to do it.
Within an hour they were riding upright by themselves.

Again, Firebug is quicker and easier than that if you only want to use it to find css classes or id's.

I was confused first time I used it but as soon as I worked out how simple it was I was fine ( No more than 10 minutes )
And then I had no idea about css and only a bit of html knowledge.

PS Ask @michael lol.. He knows how thick I am

--
~ https://punkbandpromotions.com ~
Check us out for all your Punk/Alternative Music!
Check us out on Facebook:- https://facebook.com/PunkBandPromotion

updated by @madc: 05/14/14 09:13:00AM

@izhmel
10 years ago
1,319 posts

So you are saying a 4 to 6 task operation + learning a new software that takes more time and the artists don't even knows firebug exist and have to get it, is better than a 3 task operation that requires no additional software or learning is better than the 3 task operation ?

1 Edit Header B.G color Click here http://dubmusic.com/core/skin_admin/style/skin=jrNova/file=core_header.css

2 select the BG color

3 save

http://dubmusic.com/the-scientist/page/28/welcome-to-jamroom-edit-css-navigation-page

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/14/14 09:54:36AM

@douglas
10 years ago
2,772 posts

Creating the "Map" your referring to will work and you could use Firebug to help with creating it, no need for your users to install/use Firebug.

If you want someone to create the "Map" for you I'm sure you could find someone here that would be willing to do it for a fee. You already know that its not going to be a small task, so getting someone to do it for free is most likely not going to happen.

The problem I see with letting users change site/profile colors is they'll have to be in the Master Admin group as only the Master Admin has access to the ACP > Skins > Styles section. And if they have access to that then they'll have access to the rest of the ACP sections, are you sure you want to allow your site users access to that part of your control panel?

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@izhmel
10 years ago
1,319 posts

This is only for admin uses , it would be good to allow users to customize there profiles like 'the old JR4"

I am learning firebug and knows most people don't know about firebug and hope the JR team will start out with the most basic areas first then add the rest over time

i.e. BG colors header and footer text as you see in the example

http://dubmusic.com/the-scientist/page/28/welcome-to-jamroom-edit-css-navigation-page

--
The Scientist
dubmusic.com
Thanks for any assistance.

MAD
@madc
10 years ago
600 posts

Good to see you are at least looking into firebig mate.
But you DON'T have to learn it.
For what you want is just using it as a tool like a screwdriver???
You would open your page in FIREFOX ( as firebug is an addon )
Then just select which item you want to change.

I am with you on the idea of changing everything by the click of a button but that doesn't happen right now.
If you can come up with something I know I would be stoked.

--
~ https://punkbandpromotions.com ~
Check us out for all your Punk/Alternative Music!
Check us out on Facebook:- https://facebook.com/PunkBandPromotion

@izhmel
10 years ago
1,319 posts

My issue is is time , and find firebug sometime don't land me where i wanna be.

you can try it, all I did was put a lint to the css replace 'dubmusic.com" with your domain name

1 Edit Header
http://dubmusic.com/core/skin_admin/style/skin=jrNova/file=core_header.css

2 Edit Footer
http://dubmusic.com/core/skin_admin/style/skin=jrNova/file=core_footer.css

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/14/14 11:08:10AM

SteveX
@ultrajam
10 years ago
2,583 posts

Assuming that you aren't being paid by the hour, you seem to have all the time in the world.

Firebug (or a browser's native tools) are tools. Like a screwdriver.

You have to learn to use the tool.

Screwdrivers are confusing the first time you use them, but it gets easier the more minutes you spend using a screwdriver.

--
¯\_(ツ)_/¯ 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 :)

iLoveHouseMusic
@ilovehousemusic
10 years ago
517 posts

@izhmel - Why don't you take all your customized CSS code, dump it into a separate CSS file, and bypass the CSS override feature in ACP completely?

Here's what I do:
https://www.jamroom.net/the-jamroom-network/forum/suggestions/10868/customcss

This way ALL your customizations are in 1 spot.
updated by @ilovehousemusic: 05/14/14 12:46:42PM

iLoveHouseMusic
@ilovehousemusic
10 years ago
517 posts

izhmel:
So you are saying a 4 to 6 task operation + learning a new software that takes more time and the artists don't even knows firebug exist and have to get it, is better than a 3 task operation that requires no additional software or learning is better than the 3 task operation ?

It's not about that. It's about enabling YOURSELF with the tools and resources to find the answers on your own. Or at least get you one step closer to gathering the correct info before posting on JR forums.

What I have done in the past is use a program called Screencast-omatic. I record/dictate my actions and thoughts as I click through the website and describe what is going through my mind (as an admin and user) and then post here on JamRoom Forums.

EVERYTIME, the JR team can understand what is being clicked, and what is going through my head so that they can better understand what the problem is. I have rarely had any of these types of issues go longer that 4 or 5 responses to get it solved. In almost each case it resulted in a Bug Fix / Module update.

Maybe this is the direction you need to look into.

Here's an example of what I mean: https://www.youtube.com/watch?v=w43wqeCzqd4

Good luck!
Brian
updated by @ilovehousemusic: 05/14/14 12:44:26PM

SteveX
@ultrajam
10 years ago
2,583 posts

Izhmel, please learn some basic tools. You need to if you want to use my upcoming skin. I think it will be useful to you, and I know you will like the combination if you can get used to it and really want to struggle up that hill.

I will make you a free bundle license for my upcoming skin and modules if you will just learn to use a bloody screwdriver and take more care of your published public image.

You do need to be able to read docs, use tools (and hopefully experiment) to get the most out of it though. I'm trying to make it as simple as possible, but I love it's features, and don't want to dumb down on them too much - it's a subtle balance, but surely you know this, mixing for an audience dumbest is not always best.

And about that public image (it was part of a longer conversation, but), a while back a friend of mine said that he thought that you (Izhmel) were not scientist, but a small business in the employ of a larger business who stand to gain from a win by muddying the waters. His basis for that reaction was that nobody with experience of the music industry is that careless with their published image, and especially so if they have ever had to spend time fighting their corner in court.

Tubbys wanted someone who could learn the tools, experiment a lot, and take it further. And that worked for you all, more or less.

Jamroom want the same thing. Hopefully with a very much wider and more influential audience - the wonder of the internet, plenty of bass (and treble).

Let me know if you wnat free licence generated, the skin will be released in a few weeks or so. I could do with a baseline user for it.

--
¯\_(ツ)_/¯ 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 :)

@izhmel
10 years ago
1,319 posts

I would try it

--
The Scientist
dubmusic.com
Thanks for any assistance.

@izhmel
10 years ago
1,319 posts

Can you tell me how to make i link have a global function so I don't have to use the domain name "http://dubmusic.com" ?

1 Edit Header
/core/skin_admin/style/skin=jrNova/file=core_header.css

--
The Scientist
dubmusic.com
Thanks for any assistance.

@izhmel
10 years ago
1,319 posts

How can I make this link only visible in admin mode ?

1 Edit Header

--
The Scientist
dubmusic.com
Thanks for any assistance.

SteveX
@ultrajam
10 years ago
2,583 posts

{$jamroom_url} will give you the domain name. So your href would be
"{$jamroom_url}/core/skin_admin/style/skin=jrNova/file=core_header.css"

{if jrUser_is_master()}
    1 Edit Header (Only Admin will see this)
{/if}

--
¯\_(ツ)_/¯ 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 :)

@izhmel
10 years ago
1,319 posts

How can I make "Edit Header" link only visible in admin mode, I want to paste it in the header.tpl somewhere say center ,can you write the code for me ?

http://dubmusic.com/core/skin_admin/style/skin=jrNova/file=core_header.css ">1 Edit Header

cut out the "http://dubmusic.com" and put your domainname.com so you can try it for your self

1 Edit Header

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/15/14 07:10:41AM

@douglas
10 years ago
2,772 posts

Wrap it in an if statement like this:

{if jrUser_is_master()}
    Your link here...
{/if}

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@izhmel
10 years ago
1,319 posts

It did not work for me , I must have done something wrong

can you you wright the entire code dummy proof so I can have "Edit Header" link to http://dubmusic.com/core/skin_admin/style/skin=jrNova/file=core_header.css

say in the middle in red text ...

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/15/14 07:56:48AM

@izhmel
10 years ago
1,319 posts

Ii worked , I forgot to check the box after saved it

log in and you will see it to the left I just need to make it bigger

--
The Scientist
dubmusic.com
Thanks for any assistance.

@izhmel
10 years ago
1,319 posts

I did the header and footer , what .tpl controls body ?

please try the attached files

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/15/14 12:35:47PM

@izhmel
10 years ago
1,319 posts

Can you please log in to the admin and see the edit in the header , I don't know to add the others beside the "Edit Header" in the header section so they go in the order you see below

1 Edit Header| 2 Edit Footer | 3 Edit BG color| 4 Edit the Form Help Drop Right| 5 Profile 1 BG | 6 Profile 2 BG colors | 7 Media Title Link | 8 Media Title 2BG...

so there beside the "Edit Header" in the header section

This is not really my thing and would appreciate the help

we don't have to do the entire css it would be good to do the basic ones you see above

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/15/14 09:29:37AM

@izhmel
10 years ago
1,319 posts

try this in stead of 4 to 6 clicks, the CSS navigation that takes you to the CSS you want to edit. the links only visible in admin mode in the header and footer section

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/15/14 12:07:42PM

SteveX
@ultrajam
10 years ago
2,583 posts

Yes, that looks like it should work for you.

--
¯\_(ツ)_/¯ 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 :)

@izhmel
10 years ago
1,319 posts

that works better for any new comer to JR with out them using firebug

--
The Scientist
dubmusic.com
Thanks for any assistance.

SteveX
@ultrajam
10 years ago
2,583 posts

Not for all newcomers to jr, only for newcomers to jr who are using your skin and who need to edit the same things as you, who also don't know the basics, and who want support from you when they are using it.

If it works for you, great! Jamroom is cool like that.

--
¯\_(ツ)_/¯ 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 :)

@izhmel
10 years ago
1,319 posts

Artist not gonna want to use firebug they want 123 ABC click here to change BGC

--
The Scientist
dubmusic.com
Thanks for any assistance.

@izhmel
10 years ago
1,319 posts

I am using firebug and cant find the black text , what CSS is it ?

master admins:
1
site admins:
0
Members:
0
visitors:
13
total:
14
Archives »

latest articles

--
The Scientist
dubmusic.com
Thanks for any assistance.

@douglas
10 years ago
2,772 posts

If the div or span does not have a class set, then the text would use the body font color, which is in the core_html.css file and yours is set to #000.

If you need to keep the body font color set to black, then you'll want to modify the whos_online.tpl file to add a color style.

Hope this helps,
Douglas

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@izhmel
10 years ago
1,319 posts

I hope you understand my point about artist or people who may not have any technical knowledge about firebug or CSS will get lost in technical languages and terms ..

Please to check out footer.zip by renaming to footer.tpl

--
The Scientist
dubmusic.com
Thanks for any assistance.
updated by @izhmel: 05/18/14 08:52:26AM

I need some help creating a CSS map

Tags