Please login or register to participate.
Discussion
.
milajones Aug 31, 2010 09:38 PM
Background? Hello Everyone,
I am new to Cyn.in and had a question about changing the background color and image. The layout is perfect, but changing a few superficial styles will help Cyn.in match the front end of the website we have developed. I have extensive knowledge of CSS, and am comfortable with jQuery/Themeroller - no issue there, but I can't seem to find where the styles applying to the background and/or body are located. I'm thinking maybe I am overlooking something?

Thank-you,
Replies (6)
milajones Aug 31, 2010 10:29 PM
Update:
I've tracked down the CSS in /portal_skins/custom/ploneCustom.css
I click customize, make edits, then hit save and nothing happens... same applied to all other CSS I try to edit, however I able able to easily update template files this way and the changes take... am I doing something wrong?

Thanks,
milajones Aug 31, 2010 10:30 PM
Oops, sorry - it should be /portal_skins/ubify_cyninv2theme_styles/ploneCustom.css . Its /portal_skins/custom/ploneCustom.css after I click to customize.
milajones Aug 31, 2010 11:19 PM
I've solved this for myself, but am posting here in case it will help someone -

The confusion with styles not taking was over the mysite/manage URL. Since the interface uses iframes, the url - /manage will apply even if you're not actually at the root of the manage panel. This being my first time in Cyn.in, I didn't realize this. By hitting refresh on the mysite/manage page, you are brought back to the root. Scroll down from there, then you will be able to find the portal_css file. My trouble was that I was following the instructions found in another thread here, but wasn't able to locate the portal_css file!

After you've located the file, click it and turn on debug.css and hit save at the bottom of the page. When you turn it back on, your styles will magically appear!

Cheers,

dhiraj Sep 01, 2010 06:04 PM
First of all, welcome to Cynapse community @milajones, always good to meet people with CSS skillz. :)

Instead of modifying ploneCustom.css directly, there is a better way.

Problem: If you "customize" the ploneCustom.css file by creating a copy in the custom layer in portal_skins, then all future CSS updates (from cyn.in upgrades to newer versions) will possibly be blocked, because your copied file will not get the newer updates, so you won't get all the cool new UI features we're adding coming styled properly to you.

Solution: Use CSS overriding techniques. Instead of customizing ploneCustom.css, we have created a specific file banners.css this one is loaded last, even after ploneCustom.css, so anything you put in this will always win by CSS selector precedence rules. This file has been created for such customizations specifically. The only thing we put in there is the styling for the green default site home banner.

So for example, suppose you wanted to customize the people background image in the login screen, you will find it in one of the body.<classname> selectors. Refer to the grouped CSS selector, pick up only the selectors out of the whole set that you want to customize and paste them into banners.css, changing whatever stylename with whatever values that you want to use, perhaps your own images (which you can also add into the custom layer in portal_skins so that they don't appear as items in Cyn.in and are not permssion protected as well.

And you need to know, understand and use the precedence rules for CSS selectors if you want to get far with customizing Cyn.in UI.

So how do you go back and do this in your case?
First, take a backup. Better: make sure you're running a cron job to /home/cynin/buildout/bin/backup regularly (twice daily?). That will give you five days of recoverability in Cyn.in.
Second, copy out your customizations in your ploneCustom.css and diff them against the default one at portal_skins/ubify_cyninv2theme_styles and arrive at the list of what you want to change.
Third, *delete* the modified one at the custom layer, and the default one will take over.
Fourth, go ahead with the above proposed solution, and then used your diffed values to apply the changes again, this time in banners.css.

Firebug is your friend. ZMI->portal_css->debug=on is your friend.
milajones Sep 09, 2010 10:56 PM
Ahhhh!

Thanks for the reply... I don't think I'm set to be notified by email, so I'm just seeing this now :)
That makes sense to me - I'll just pull all my custom styles in and get rid of the duplicated custom versions (I find that's a little messy/confusing anyway).

I'm just in the initial set-up stage, so I'll likely revert it and start over this way so it's nice and clean and I don't have probs with it in the future.

Oh, when I have the debug on, I get no CSS at all...is that normal? That's why I switch it on and off.

Thanks!!
Mila


milajones Sep 16, 2010 08:06 PM
OK, figured this out - debug at the top - NOT debug.css, LOL! Learning curves suck.
Thanks,
Mila
 
Loading