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 02-09-2020 18:04:55

garden1
Member
Registered: 02-06-2020
Posts: 61

Adding Custom Widget Display

How would I go about creating a custom widget display?  I've dug through the database and searched the code a bit, but I can't find where the the action happens.  I don't mind getting my hands dirty.  I'm somewhat a novice at webdev, but I'm fairly experienced at programming in general.

Offline

 

#2 02-10-2020 09:08:50

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

Re: Adding Custom Widget Display

Manage skin widgets using System / Displays / Skin Widgets.  Each widget that comes with the software points over to an include that handles it's display.  To illustrate, look at the Main Menu skin widget.  It's Skin Widget Display Code looks like this:

Code:

<?php return $this->include_file('cms','skinwidget_pages.php'); ?>

This function call executes thie file {private}/apps/cms/CMS/includes/skinwidget_pages.php.

Let's say you want a similar menu that loads all the HTML pages as items (like the Main Menu).  To do this, I'd recommend creating an includes directory in your active skin's directory.  Assuming you're using the Flex skin, that directory would be created as {public}/skins/Flex/includes.

Next, copy the file {private}/apps/cms/CMS/includes/skinwidget_pages.php into that directory so you have {public}/skins/Flex/includes/skinwidget_pages.php.  You can change the name of the file if you like - no problem.  I usually change it to match the id of the widget I'm creating.

Next, clone the Main Menu skin widget and in the Skin Widget Display Code field, use this (pointing to whatever filename you chose):

Code:

<?php include($this->globals('core.path_public') . '/skins/Flex/includes/skinwidget_pages.php'); ?>

Edit the parameters of the widget to put it in the right group, have the right display type, make sure it's active, etc. and save.  Edit the file {public}/skins/Flex/includes/skinwidget_pages.php to manipulate your widget display.


Nick Hendler

Offline

 

#3 02-10-2020 10:57:57

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Adding Custom Widget Display

Got it!  Thank you so much for that information!  it illuminates a lot of the situation for me and creating a new widget looks very straightforward.  I will make good use of it

What I'm really asking is whether it's possible to add a new display type.  ..it looks like I would need to add database entries in addition to modifying code? 

I can honestly accomplish everything else I need to do by using the widget element IDs and '>' operators.  If it's too much of a pain to describe how to add a display type, that's perfectly fine - I will make copious comments and notes in my skin.  I just always try to think of the person who needs to work on a project after I'm done, ..and their abilities. To most people I know, CSS PHP and SQL sound like government agencies.

Offline

 

#4 02-10-2020 15:48:52

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

Re: Adding Custom Widget Display

Adding a new display type is rather complicated and would require you to add an entry to the core_selectcustom table matching those used for that field, and to include a bunch of very complex CSS in the common all.css file to get base behavior working (which would be overwritten during a software update).  I think it would be much easier to choose a class that is close then modify that as needed based on widget id in your skin's all.css file.  I think you'll find setting the widget type to inline and then overriding with CSS in your skin is the easiest/best way to go.


Nick Hendler

Offline

 

#5 02-10-2020 15:57:10

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Adding Custom Widget Display

That's about what I thought you might say!  OK - inline and css it is.  Thank you Nick!  I think I'm good for now.

Offline

 

#6 02-11-2020 11:45:11

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Adding Custom Widget Display

Thank you in advance!  Feeling kinda stupid! As a launching point for customizing menus I did the following and it ALMOST worked:

(Categories widget set to inline, and displaying in the NAVBAR group)


--Copied every instance of .kwidget_fulldrop from the main all.min.css into a temp document, making sure to include any @media context.

--Did a find/replace changing '.kwidget_fulldrop' into  '#ecom_skinwidget_categories'.

--Pasted the resulting CSS to the end of the theme's all.min.css


Works fine for wide!  Menu Icon disappears, though for slim and mid. There's an empty non-responsive space where the icon should be.  Using chrome's dev-tools, I can't get it do anything sensible.
-I will leave it up for now at https://gardenofone.com/store-


It looks to me like collapsed menu clicks are handled in common.min.js.  I suppose I can start fresh with my own js. and css.  I just figured there was no point in recreating the wheel (and creating redundant code.)

Last edited by garden1 (02-11-2020 14:48:20)

Offline

 

#7 02-12-2020 08:39:23

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

Re: Adding Custom Widget Display

There are also rules for .kwidget_inline which you will want to copy/change if you are using that as your base class.  That's where it gets complicated.  It would probably be best to use .kwidget_fulldrop as the base (change in the management interface) then modify as needed in your skin.


Nick Hendler

Offline

 

Board footer