Dozuki

Current version by: Forrest

Text:

Status:

open

Edit by: Forrest

Text:

Status:

open

Edit by: Forrest

Text:

Status:

open

Edit by: Forrest

Text:

Status:

open

Original post by: Forrest

Text:

I was able to implement a featured sidebar on my site by utilizing tags a wiki list and some CSS.

I wanted to feature some wiki pages rather then guides so I had to set it up myself. It's a little tricky but i'll try to explain.

In the category I wanted to feature the pages I simply put the following code:

[code]
== Featured Content ==
[wikilist|featured]
[/code]

Then I tagged any pages I wanted in this list as featured.

This creates a basic list of featured content but it doesn't stand out in any way so I styled it with some css using the code bellow:

[code]
#Section_Featured_Content {background-color:#fff4ca;padding:5px;
   border-style:solid; border-width:5px; border-color:#ffc300;
   border-bottom-width:1px: border-bottom-color:#e2e2e2; margin-bottom:0px;
}
#Section_Featured_Content + div {background-color:#fffbed;padding:5px;margin-top:0px;padding-top:20px;}
[/code]

Sample Styled:

[image|127654]

For Larger Screens I wanted it to appear as a side bar but still appearing as above on smaller screens. The following describes how to make it show as a sidebar.

[code]
/* ####### Featured Sidebar ###### */
@media screen and (min-width: 1500px) and (min-height: 900px){
   #main {position:relative;z-index:1;}
   #Section_Featured_Content, #Section_Featured_Content + div 
       {position:absolute;right:50%;padding:15px;overflow:hidden;width:220px;margin-right:480px;}
   #Section_Featured_Content + div {z-index:-1; height:570px; top:-400px;}
   #Section_Featured_Content {z-index:-2; height:100px; top:-500px; padding-top:8px;}

  /* <<<ADD ADDITIONAL CODE HERE >>> */
  }
[/code]

Sample Sidebar:

[image|127653]

This really helps the Featured Content stand out but there is only room for 3 pages to be featured. Any overflow would not be visible, so I added additional code to cycle through the overflow content. This is where it gets tricky. The code will need to be adjusted depending on how much overflow you have. I'll do my best to break it down.

The following code selects every third element and positions it accordingly:

[code]
/* Position Featured Content */
   #Section_Featured_Content + div .blurbListCell:nth-of-type(3n+1)
       {display:block;position:absolute;}
   #Section_Featured_Content + div .blurbListCell:nth-of-type(3n+2)
       {display:block;position:absolute; bottom:187px;}
   #Section_Featured_Content + div .blurbListCell:nth-of-type(3n+3)
       {display:block;position:absolute;bottom:5px;}
[/code]

Now that all the cells are positioned we need to cycle through them in groups of 3 per layer.

Determine how many layers you'll have based on the number of pages listed. (pages/3=layers)

Now lets set up the animation for that using the code bellow:

[code]
/* KeyFrames */
@-webkit-keyframes "overflow" {
 0% {filter: alpha(opacity=0); opacity: 0;}
 2% {filter: alpha(opacity=100); opacity: 1;}
 50% {filter: alpha(opacity=100);opacity: 1;} /* % should be layers/100 */
 52% {filter: alpha(opacity=0); opacity: 0;} /* % should be layers/100 + 2 */
 100% {filter: alpha(opacity=0);opacity: 0;}
}
[/code]

Now we need to apply the animation to the layers. the base layer will not need animation because we will place other layers over it so we'll start with layer2 element 4-6 notice (n+4)&(-n+6) in the code.

Apply animation overflow. We want each layer visible for 10 seconds. With 2 layers total length is 20s with a 10s offset for this first layer.

[code]
/* Animation */
#Section_Featured_Content + div .blurbListCell:nth-of-type(n+4):nth-of-type(-n+6)
     {-webkit-animation: overflow 20s 10s infinite linear;opacity: 0;}
[/code]

In the case that there are 3 layer the code above would look like this instead:

[code]
/* Animation */
#Section_Featured_Content + div .blurbListCell:nth-of-type(n+4):nth-of-type(-n+6)
     {-webkit-animation: overflow 30s 10s infinite linear;opacity: 0;}
#Section_Featured_Content + div .blurbListCell:nth-of-type(n+7):nth-of-type(-n+9)
     {-webkit-animation: overflow 30s 20s infinite linear;opacity: 0;}
[/code]

Concluding remarks:

You should only try this if you are comfortable with CSS. for the animations I only included the -webkit- prefix which is not supported by most browsers and you will need to expand the code for multi-browser support. If the animation is not working for you try using google chrome for testing it.

Hope this helps.

Status:

open