By michal-frackowiak michal-frackowiak
Description
Creates an extra side-bar using the floating div element. It is quite easy if you know CSS.
To use this feature, copy the code below into your wiki page.
Code
[[div style="float:right; width: 15em; padding: 0 1em; margin: 1em 0 1em 1em; border-left: solid #888888 1px; background-color: #FFFFFF;"]]
++ Side content
In fact you can put almost anything in the side bar. E.g. an imported RSS feed or recent forum posts, members of your site. Like below ....
[[module Members showSince="no"]]
[[/div]]
++ Main content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum placerat purus eget nunc. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin cursus nisi sed massa.
Curabitur a sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam scelerisque mi sit amet pede. Etiam mollis ornare nulla. Donec eu massa. Aenean id nisl nec erat
sollicitudin faucibus. In fringilla dui scelerisque nulla. Cras convallis posuere lacus.
Donec malesuada. Vestibulum pretium. Nullam euismod sem eget nunc nonummy dictum. In scelerisque tempus
magna. Etiam condimentum condimentum risus. Mauris ac purus sed felis placerat fringilla. Ut eleifend eros
lobortis lorem. Phasellus posuere metus quis lacus. In tincidunt dolor eu augue luctus varius. Sed sagittis. Ut
ultrices gravida urna. Phasellus turpis sapien, lobortis id, vehicula vel, consequat in, pede. Aenean ligula augue,
feugiat non, dapibus consequat, facilisis vitae, odio. Mauris quis libero. In laoreet felis. Fusce ac neque non
ipsum sodales elementum.
In fact you can put almost anything in the side bar. E.g. an imported RSS feed or recent forum posts…
In action
Side content
In fact you can put almost anything in the side bar. E.g. an imported RSS feed or recent forum posts, members of your site. Like below ….
Main content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum placerat purus eget nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin cursus nisi sed massa. Curabitur a sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam scelerisque mi sit amet pede. Etiam mollis ornare nulla. Donec eu massa. Aenean id nisl nec erat sollicitudin faucibus. In fringilla dui scelerisque nulla. Cras convallis posuere lacus.
Donec malesuada. Vestibulum pretium. Nullam euismod sem eget nunc nonummy dictum. In scelerisque tempus magna. Etiam condimentum condimentum risus. Mauris ac purus sed felis placerat fringilla. Ut eleifend eros lobortis lorem. Phasellus posuere metus quis lacus. In tincidunt dolor eu augue luctus varius. Sed sagittis. Ut ultrices gravida urna. Phasellus turpis sapien, lobortis id, vehicula vel, consequat in, pede. Aenean ligula augue, feugiat non, dapibus consequat, facilisis vitae, odio. Mauris quis libero. In laoreet felis. Fusce ac neque non ipsum sodales elementum.
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by michal-frackowiak
MyBlogLog recent visitors - 06 Jun 2021 04:03
Include Any Page - 06 Jun 2021 03:20
Babelfish Translation - 06 Jun 2021 03:14
Collapsible Text Block - 02 Dec 2020 10:24
Todo List - 18 Aug 2014 15:28
Multicolumn Layout - 17 Dec 2012 19:51
Zoho Writer - 16 Feb 2012 01:57
Zoho Sheet - 16 Feb 2012 01:56
Zoho Show - 16 Feb 2012 01:55
Zoho Polls - 16 Feb 2012 01:53
WoW Tooltips - 16 Feb 2012 01:52
Widgetbox Panel - 16 Feb 2012 01:52
Video from Revver - 16 Feb 2012 01:50
Tabs - 16 Feb 2012 01:45
Standalone Page Buttons - 16 Feb 2012 01:44
Social Bookmarking - 16 Feb 2012 01:42
Simple Gallery - 16 Feb 2012 01:41
Remember The Milk Todo - 16 Feb 2012 01:39
Recent Changes (mini) - 16 Feb 2012 01:36
Rating Summary - 16 Feb 2012 01:35
Quimble Poll - 16 Feb 2012 01:33
Quikmaps Maps - 16 Feb 2012 01:33
Photobucket Widget - 16 Feb 2012 01:29
Page Previews (Snap.com) - 16 Feb 2012 01:29
Pabpixies Gadgets - 16 Feb 2012 01:28
Meebo me - 16 Feb 2012 01:20
Layout With Tables - 16 Feb 2012 01:19
Instacalc - 16 Feb 2012 01:12
Import the Digg Feed - 16 Feb 2012 01:11
Import a News Feed - 16 Feb 2012 01:10
Google Gadgets - 16 Feb 2012 01:05
Gabbly chat - 16 Feb 2012 01:02
Forum Summary for the Front Page - 16 Feb 2012 01:02
Footnotes - 16 Feb 2012 01:01
Foldable List - 16 Feb 2012 01:01
Flickr Images By Tags - 16 Feb 2012 01:00
Feedburner - 15 Feb 2012 00:53
Embed Code From Other Services - 15 Feb 2012 00:50
EditGrid Spreadsheets - 15 Feb 2012 00:49
Cornify - 15 Feb 2012 00:39
Compact Feed Display - 15 Feb 2012 00:35
Center Video - 15 Feb 2012 00:28
Bibliography/Footnotes/Comments Listed in TOC - 15 Feb 2012 00:26
Automatic Sitemap - 15 Feb 2012 00:25
Alexa traffic ratings - 15 Feb 2012 00:23
3d tagcloud - 15 Feb 2012 00:22
Rate this solution
If you think this solution is useful — rate it up!
I know this is a late response, but it seems that shepster's question was never answered.
Do the same as the first example, but instead of using style=, use class=. Then copy kaizen's css into your template stylesheet. I've not tried this yet, but I think that would work. Make sure to change witdth to width.
[[div class="float-left"]]
++ Side content
In fact you can put almost anything in the side bar. E.g. an imported RSS feed or recent forum posts, members of your site. Like below ....
[[module Members showSince="no"]]
[[/div]]Dr. Greg Waddell
Director of Institutional Improvement — Mid-South Christian College
My Blog | Contact | About Me | Twitter | Facebook
Sorry about the example. This works ok. The problem is with a float box on the left:
div.float-left{
float: left;
witdth: 15em;
padding: 0em 1em;
margin: 0em 1em 0em 1em;
border-right:solid #888888 1px;
background-color: #FFFFFF;
}The border is in the left, and the text extends along the entire line. What is happening?
Hi, I'm trying to make a css class from this, and my code is:
div.float-right{
float:right;
width: 15em;
padding: 0em 1em;
margin: 0em 0em 1em 1em;
border-left: solid #888888 1px;
background-color: #FFFFFF;
}To use it:
[[div class="float-right"]] ... [[/div]]But something weird happends. No box.
P.D.: Sorry if it's a very css basic question, I'm start learning.