iWiccle Online Community

Level 1.20 web community creation and getting better by the day...

Articles

Site

iWiccle Online Community » Site » Custom CSS Demos with Wiccle Builder

Custom CSS for Content Boxes

You can define custom CSS for each content box in Wiccle Builder under the "Custom CSS" field to take your content boxes to the next level. Here are some samples to get you started.

You can find a complete A-Z list of CSS 1/2/3 properties at Jens Meiert's website. If you come up with something particularly fun or useful, please share a sample at Fusion Forums. Happy modding!

Grab a copy of this page and import it into your own iWiccle with the Wiccle Builder import feature if you want to study these examples in detail.

Custom CSS demo #5

Custom CSS reads:

border-left: 10px solid green; border-right: 10px solid blue; padding-left: 3px; padding-right: 3px; position: relative; left: -40px;

Custom CSS Reads:

color: blue; border: 1px solid #333; padding: 30px; background-image: url(/uploads/gallery/thumbs/s400_gallery-4-1261825752_stockvault_3566_20070301.jpg);

Rollover and click to transform. (CSS+JavaScript)

Custom CSS reads:

cursor: pointer; padding: 20px; margin: 10px; width: 310px; overflow: auto; border: 10px dashed gray; background-color: #333; color: #bbb;" onmouseover="document.getElementById(this.id).style.backgroundColor='darkred'; document.getElementById(this.id).style.border='10px solid blue';" onmouseout="document.getElementById(this.id).style.backgroundColor='#333'; document.getElementById(this.id).style.color='#bbb'; document.getElementById(this.id).style.border='10px dashed gray';" onclick="document.getElementById(this.id).style.backgroundColor='#bbb'; document.getElementById(this.id).style.color='darkred'; document.getElementById(this.id).style.border='10px dotted #333';

Note the quote left open at end. We are breaking off the inline CSS style and continuing with event javascripts. This is a bit of a hack, but since it works perfectly well, there's no need for a separate custom javascript field in the builder.

Custom CSS demo #1

Custom CSS reads:

border: 3px double maroon; color: maroon; padding: 10px 10px 5px 10px; background-color: salmon; margin-bottom: 15px;

Custom CSS demo #2

Custom CSS reads:

border: 10px solid yellow; color: red; background-color: orange; padding: 10px 10px 0px 10px;

Custom CSS demo #3

Custom CSS reads:

height: 130px; overflow: auto; width: 250px; margin: auto; margin-top: 15px;

And here's a bunch of text that overflows and scrolls.

Double Click to Hide

Custom CSS reads:

position: absolute; z-index: 100; top: 250px; right: 240px; width: 250px; opacity: 0.7; cursor: crosshair;" ondblclick="justHide(this.id);

This is a javascript demo that lets you control the collapsible unit below by clicking anywhere on this box. Single click controls the collapsible area, double click hides and shows the entire box.

Custom CSS reads:

cursor: pointer; padding: 10px; margin: 10px;" onclick="showHide('content_unit_734'); openClose('opener_unit_734'); if (document.getElementById('opener_unit_734').title=='c') { writeInner('more_unit_734', 'more'); } else { writeInner('more_unit_734', 'less'); }" ondblclick="showHide('unit_734');

Collapsable Unit

Click to view more »

Custom CSS demo #7

Custom CSS reads:

outline: thick solid red; font-weight: bold; font-style: italic; background-color: pink; color: red; margin: 20px; padding: 10px;

Custom CSS demo #8

Custom CSS reads:

cursor: help; letter-spacing: 3px; text-shadow: black 3px 3px, blue -1px -1px;

Custom CSS reads:

font-variant: small-caps; overflow-x: auto; overflow-y: hidden; width: 100%; height: 300px;

Custom CSS demo #6

Custom CSS reads:

text-align: center; color: darkslateblue; text-transform: uppercase; word-spacing: 15px;

Custom CSS demo #10

This is a javascript demo that makes the content unit draggable.

Custom CSS reads:

cursor: move; padding: 10px; background-color: green; border: 1px dotted yellow;" onmouseover="startDrag(this.id, this.id);" onmouseup="window.dragActive=false;

iWiccle for Communities and Online Publishing

Powered by Wiccle ⋅ iWiccle CMS Community Builder ⋅ Web 2.0 solutions for communities, online publishing and website building!

News ⋅ Contact us ⋅ About us ⋅ Privacy ⋅ Terms ⋅ FAQ ⋅ Leave Feedback ⋅ Invite a Friend ⋅ Bookmark