Kryptronic Software Support Forum

You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.

#1 01-30-2017 03:57:29

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 882

How to Approach Styling K9 Standard Skin

Please can you clarify how we should approach styling of the K9 standard skin. Just want to start off with K9 on the right foot as I played with all of the CSS files in CCP8 and K9 is set up differently.

I can see the CSS file at

Dashboard / System / Displays / Update Skin Controlled File/all.min.css

I assume I add any classes, etc I want to override in there and it updates the CSS file at skins/Flex/css/all.min.css

And I assume that media/skins/all.min.css is intended to be left alone?

I extensively hack that file in CCP8 but trying to treat K9 with a bit more respect...

Last edited by sdn (01-30-2017 04:09:28)


Simon

Offline

 

#2 01-30-2017 07:17:27

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: How to Approach Styling K9 Standard Skin

Yes to all questions, although it's way easier to just update and work with the skins via FTP than with the management interface.  Here's what I usually do:

(1) Download {public}/skins/Flex and change the name of the directory to the name of the skin you want to use.  I typically use 'CUSTOM'.

(2) In the skin.php file, replace 'Flex' with 'CUSTOM'.  Should show up once, to pull in the Flex all.min.css file.  Also, simply delete the /install directory and the XML file in it.  Upload your CUSTOM directory (or whatever you called it) to {public}/skins.

(3) Access System / Displays / Display Skins to get the system to recognize your skin.  It should pop in the list when you load that function.  After you verify it's there, choose it as the Active Skin for the FrontEnd under System / Component / Settings / Display Skins.

At this point you can code away on your CUSTOM skin and use the Flex skin as a basis/reference.  A few more notes:

{public}/media/skins/css/all.min.css is the system CSS file and should not be modified.

{public}/skins/YOURSKIN/css/all.min.css is your skin's CSS file and everything in the system CSS file can be overridden/modified there.  Do your edits there.


Nick Hendler

Offline

 

#3 01-31-2017 05:54:14

west4
Member
From: UK
Registered: 04-16-2008
Posts: 645
Website

Re: How to Approach Styling K9 Standard Skin

Hi Nick,

Might be a good idea to include a Custom folder with a copy of flex pre configured in your installer then, so as to make it a lot easier for the end users. (maybe code 'This is the custom Skin for you to edit' in the front page display part.
Should only take you 10 mins to do and save a whole load of questions later.

Cheers,
Bruce.

Last edited by west4 (01-31-2017 05:57:11)


I'd rather have a full bottle in front of me, than a full frontal labotomy.

Offline

 

#4 01-31-2017 08:47:35

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: How to Approach Styling K9 Standard Skin

I'll think about this.  Most people end up just using the Flex skin and changing the logo and modifying the skin just a bit.  I think that's fine for the majority of people.  My recommendations above were made to SDN so he could have both his own skin and the Flex skin as a reference, because he'll likely need a reference for what he's about to do.  For the next site he does, he'll likely just upload his final CUSTOM skin and follow step (3) I listed above.


Nick Hendler

Offline

 

#5 02-03-2017 11:05:44

larry
Member
Registered: 07-21-2003
Posts: 437

Re: How to Approach Styling K9 Standard Skin

Is there any way to get a fresh copy of the system all.min.css?  I think I inadvertently changed it.


Laurie Stephens




Offline

 

#6 02-06-2017 07:53:30

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: How to Approach Styling K9 Standard Skin

Download from the dev site at the URL below.  At some point in the near future, this will move to /demo.

https://kryptronic.com/DEV/public/media … ll.min.css


Nick Hendler

Offline

 

Board footer