Skip to main content

Learn more about the different Guidebook plans.

12 Questions View all
User avatar

Where is a guide featured at when you mark it as featured?

We have marked a guide as featured and do not see where that shows up at. I know that the Guides homepage is being re-thought out but that would be something to keep in mind.

At least for my company the Answers section is the more popular section so to have a spot on that page would be huge for us.

Brilliant Idea

and yes it was my idea... my wife didn't help me at all. lol

If you had a sidebar module that would show the featured discussion(s) for the category the answer is in I think it would be beneficial for all companies.

Answered! View the answer I have this problem too

Is this a good question?

Score 4
Add a comment

2 Answers

Chosen Solution
User avatar

Right now, we don't have any pages available that show featured guides. We're working on that. We use it to filter out the best user submitted guides on iFixit and a few other select sites. On those sites, the top nine rotating guides are the nine most recent featured guides.

I like the idea of a sidebar module in Answers that shows featured guides in that category.

Was this answer helpful?

Score 2


Has this changed at all since 2012? Is there any way to list featured guide similar to a wikilist?


This has not changed since this Answer was posted. You can, however, also apply a tag to the guides flagged as Feature Guides, then create a Guidelist to display all guides with that tag (and consequently, that flag as well).


Add a comment
User avatar

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:

== Featured Content ==

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:

#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;}

Sample Styled:

Block Image

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.

/* ####### 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:fixed; top:120px; right:50%; padding:15px; overflow:hidden; width:220px; margin-right:480px;}
   #Section_Featured_Content + div 
      {z-index:-1; height:570px; margin-top:98px;}
      {z-index:-2; height:100px; margin-top:0px; padding-top:8px;}


Sample Sidebar:

Block Image

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:

/* Position Featured Content */
   #Section_Featured_Content + div .blurbListCell:nth-of-type(3n+1)
   #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)

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:

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

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.

For base Layer we set z-index to 2

All other layers set z-index to 1

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.

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

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

/* 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;}

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.

Was this answer helpful?

Score 1
Add a comment

Add your answer

Author avatar Aaron will be eternally grateful.