solved Home page CSS

I am struggling with getting the text formatting for the various panels on the home page to match more closely. My challenge is finding where the CSS is for each.

I am looking to change the line-height of the text in the Forum posts section (top left). The spacing needs to be a little looser. I can see where to change the size of the font (.normal in text.css) but if I try to add a line-height to that css rule it doesn't do anything (and there's no setting I can find in the ACP).

Similarly, I want to tighten up the spacing in the Activity feed. Where is the CSS for this? If it's in the ACP I can't find it. I am happy to work directly in the CSS files but it's not obvious to me where the classes are.

There are two different image sizes and three different text formats for Latest Profiles, Top Groups, and Upcoming events. I would like there to be one image size and the text formatting needs to be consistent.

Same for the Blog. The text is too large and I want to take everything down a size.

But it's not obvious where to make the changes.

Any help would be appreciated, I want to get this up and live ASAP and these are some of the issues that are keeping me from doing it.
updated by @claygordon: 02/15/15 01:03:29PM

What you want to do is use Firebug. Its a free extension add-on for the FireFox browser that lets you fiddle with your site to figure out what needs to change.

Once you know what needs to change, then all that needs to be done is to make that change.

There are a few ways to use FireBug. One way is to use it to locate the class name of the section you want to change, then copy+paste that class name into the search box of the STYLE tab for the skin to locate the css to change.

Another way to use it is to find that class name directly in the CSS file in the file system, then change that and upload that change via FTP.

If you want a step-by-step walkthrough of firebug, this youtube vid looks pretty good.
The Firebug Tutorial Series: 01 - Introduction To Firebug

otherwise, that space between the "FAQs on useing the new site" looks to be put there by a double not CSS. So look at the blog "item_action.tpl" file for over-rides.

The blog post seams to be controlled by the .blog-index-text class, but thats not in the STYLE tab because its unique to your skin.

If you need help locating something specific still, just reply and I'll try to help locate it.
updated by @michael: 01/12/15 09:24:26PM

Michael -

I am using a clone of the default ningja skin and I have not added a thing in the way of code that might be unique to my site that would create a new class that should not be found in the default CSS.

In the case of the Forum posts example I am not interested in changing the space between the name of the category and the next line but the line-height in the next paragraph. I want the spacing to be more consistent with the spacing of the text in the about.

One reasons for my confusion? index.css does not show up in the list of css files I can edit within the ACP.

Another source of frustration is that I am sitting in a hotel room with a really lousy Internet connection that makes working in developer mode worse than unbearably slow.
updated by @claygordon: 01/13/15 04:36:41AM

If you click the Untagged tab from the Skin > jrNingja > Styles section, you'll see the index.css file is there and can be edited from there too.

Hope this helps!


--

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

The list of files in the pop-up is context sensitive?

Is that documented somewhere?
updated by @claygordon: 01/13/15 07:22:12PM

The CSS files in the select list will be for the skin you are editing + modules.

Let me know if that helps.

Thanks!


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