Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gsinghjay/hccc_carousel

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/gsinghjay/hccc_carousel
Owner: gsinghjay
Created: 2024-12-20T00:28:59.000Z (about 1 month ago)
Default Branch: main
Last Pushed: 2024-12-20T00:36:16.000Z (about 1 month ago)
Last Synced: 2024-12-20T01:27:35.653Z (about 1 month ago)
Language: HTML
Size: 0 Bytes
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.MD

Awesome Lists containing this project

README

# Bootstrap Carousel Documentation

## Overview
This documentation details a Bootstrap-based testimonial carousel implementation specifically designed for OmniUpdate CMS integration, using namespaced classes to prevent style conflicts.

## Implementation Details

### 1. CMS Component Structure
```xml

[[QUOTE]]

[[NAME]]

```

### 2. XSL Transformation
```xsl

```

### 3. CSS Implementation
```css
/* _resources/css/testimonial-carousel.css */
.hccc-bs-testimonials {
padding: 2rem 0;
background-color: #2b3990;
color: #fff;
}

/* Specific article styling to override CMS defaults */
.hccc-bs-testimonials article.hccc-bs-testimonial-item {
padding: 0 20px;
height: 100%;
outline: none;
border: none; /* Override custom.css border */
}
```

## Key Solutions

### 1. CMS Style Conflicts
- **Issue**: Generic article styling in custom.css adding unwanted borders
- **Solution**: Added more specific selectors in testimonial-carousel.css
```css
.hccc-bs-testimonials article.hccc-bs-testimonial-item {
border: none;
}
```

### 2. Namespace Conflicts
- **Issue**: Bootstrap styles conflicting with CMS jQuery UI
- **Solution**:
- Added `hccc-bs` namespace prefix
- Changed carousel ID to `hcccTestimonialCarousel`
- Scoped all Bootstrap-related styles

### 3. Component Integration
- **Issue**: Need for editable fields in CMS
- **Solution**:
- Used `data-ouc-test` attributes
- Implemented proper OmniUpdate component structure
- Added placeholders with `[[VARIABLE]]` syntax

## Implementation Steps

1. **Component Setup**
- Create component XML template
- Define editable regions with `data-ouc-test`
- Set up proper namespacing

2. **XSL Configuration**
- Add transformation template to components.xsl
- Configure proper node selection
- Implement carousel logic

3. **CSS Integration**
- Create namespaced styles
- Override conflicting CMS styles
- Maintain Bootstrap functionality

4. **Testing**
- Verify CMS compatibility
- Check style isolation
- Validate carousel functionality

## Usage in CMS

1. **Adding the Component**
```html

```

2. **Editing Content**
- Use image selector for testimonial images
- Edit quote text and author name
- Duplicate article sections for multiple slides

3. **Managing Styles**
- All styles are contained in testimonial-carousel.css
- No additional CSS required
- Bootstrap styles are properly namespaced

## Best Practices

1. **CMS Integration**
- Always use `ouc:component` structure
- Maintain proper namespacing
- Use data-ouc-test for editable fields

2. **Style Management**
- Keep styles scoped to component
- Use specific selectors to override CMS defaults
- Maintain Bootstrap class naming conventions

3. **Performance**
- Optimize image loading
- Minimize style conflicts
- Maintain clean component structure

## Dependencies
- Bootstrap 5.3.1
- OmniUpdate CMS
- Modern browser support

This implementation successfully resolves CMS conflicts while maintaining full carousel functionality and editor usability.