Skip to main content

I am so excited to share that I had to make it a post.  @Community Team  if this isn’t a good share, feel free to take it down.  I want to show everyone that this was not easy, but you can really create a unique learner journey with just CSS.  I am not ashamed to say that I use Chat GPT 4.0 to help me but after you get used to using “Inspect Page”, recognizing syntax and classes, and asking AI for some help you can do amazing things with Ti and we are fortunate that they allow it (at your own risk).  If you have a sandbox, I suggest you try these things there first but check out my before and after of the catalog widget in Calendar view.  It’s so fun and rewarding to achieve exactly what YOU need.  BEFORE and AFTER (remove search bar, remove custom field index, center content)

Before

AFTER TARGETED CSS FOR ONE PANO

After

 

Very cool!

​@charles.zimmerman it would be great if you could share the CSS code you used to do this, it really looks great.

 

Also for anyone else interested in exploring CSS, there will be an office hours coming up soon, and aso please see the support article below

https://support.thoughtindustries.com/hc/en-us/articles/24264900134935-CSS-Cascading-Style-Sheets

​@jonsynnott ​@gguillen 

I believe this was all there is too it.  Replace buckner w your own class name and insert class name in Catalog Widget, Calendar View only option.

 

}

 /* 6.28.24 Buckner ILT Catalog */

/* Hides catalog filters and search bar for any elements under buckner-related classes */

 

/* Target the search bar container specifically within Buckner catalog widget */

class*="buckner"] .catalog-search-bar {

  display: none !important;

}

 

/* Hide catalog filters within Buckner context */

xclass*="buckner"] .catalog-filters {

  display: none !important;

}

 

/* Adjust layout for the main content area under Buckner-1 context */

tclass*="buckner-1"] .medium-9.js-results-holder {

  float: left;

  width: 100% !important;

}

 

/* Ensure full width for columns within Buckner context */

cclass*="buckner"] .medium-12.columns {

  width: 100% !important;

}

 

/* Hide any sidebar catalog aggregations, such as filters or navigation items */

iclass*="buckner"] .catalog-aggregation {

  display: none !important;

}

 

/* Hide pagination controls under Buckner context not needed */

class*="buckner"] .pagination {

  display: none !important;

}

Thank you ​@charles.zimmerman this is really helpful for anyone who wants to spruce up their catalog in a quick and easy way.

 

 

​@charles.zimmerman you read our mind! We are in the middle of trying to clean up our calendar widget and need to remove the exact items you’re referencing. Thank you sooo much for taking the time to troubleshoot and for sharing!!

Reply


Terms & ConditionsCookie settings