Sign in or 
Location: Step 3: Add User-Generated Content
Discussion: Styling WPC-editableContent and WPC-areaContainer
Category:
Discussion Forum /
General Discussion
Share this
Showing 5 posts
|
cpatni |
Styling WPC-editableContent and WPC-areaContainer
May 7 2008, 6:48 PM EDT
Is styling content is supported? I wanted to have a border around WPC-editableContent but it doesn't seem possible. Also, the id for WPC-areaContainer could not be used because the id is not a valid value. WPC-areaContainer?cellId=game-827005 At least, I can't have following CSS #WPC-areaContainer?cellId=game-827005 { } Any help? Do you find this valuable?
Keyword tags:
add cell
add content
Hello World
How To
integrate
integration
login
|
ryan_wetpaint |
1. RE: Styling WPC-editableContent and WPC-areaContainer
May 8 2008, 1:47 AM EDT
In general, the content surrounding a cell is intended to inherit the styles of your page, unobtrusively and silently. It isn't implemented to be styled directly. Certainly, as you say, it is not valid to apply a style in the syntax we use for the WPC-areaContainer.A way to identify which elements and objects are accessible is to look for WPC and WPCAPI (WetPaintClient vs. WetPaint Client API). If something (element, js method, etc) is prefixed with WPCAPI, it is something we will support in the long term and you can be assured that any code you have around it will be maintained. However, if it begins with WPC, we may alter it as we improve the product -- and you should avoid using it directly. We can certainly look into providing some WPCAPI classes on the elements that are drawn with the cell -- this would be a great addition to the product. Are there elements besides WPC-areaContainer that you'd want to affect? Do you find this valuable? |
|
cpatni |
2. RE: Styling WPC-editableContent and WPC-areaContainer
May 8 2008, 3:28 AM EDT
The use case is to display a fixed height section of wiki cell in the beginning and then have user click on More... to see the full page. So, I wanted to do the following:1) Set the initial height of wiki content div to a specified value. 2) Add More... link after the content 3) Allow toggle less and more links unless Easy Button is clicked. Example: Following style and html snippet along with JQuery code does the job. <style type="text/css"> .wiki-box {width:400px;} </style> <div class="wiki-box"> //wiki content here </div> function seeMore(link) { var content = jQuery(".WPC-editableContent"); if(content.css("height") == "auto") { content.css("height", "100px"); jQuery(link).text("More is less..."); } else { content.css("height", "auto"); jQuery(link).text("Less is more..."); } } jQuery(document).ready(function() { jQuery(".WPC-editableContent") .css("text-overflow", "ellipsis") .css("overflow", "hidden") //.css("border", "1px dashed #333") .css("height", "100px") .after('<div id="see-more-link" ><a href="#" onclick="seeMore(this);return false;" class="see-more-line">More is less...</a></div>') ; jQuery(".WPC-easyEdit").click(function() { var content = jQuery(".WPC-editableContent"); content.css("height", "auto"); jQuery("#see-more-link").empty(); //return false to avoid changing the url of the page return false; }); }); Do you find this valuable? |
|
cpatni |
3. RE: Styling WPC-editableContent and WPC-areaContainer
May 8 2008, 3:31 AM EDT
Some parts of the above example are not exposed by WPC apis. Let me know if need more explanation.
Do you find this valuable?
|
|
ryan_wetpaint |
4. RE: Styling WPC-editableContent and WPC-areaContainer
May 8 2008, 11:33 AM EDT
This sounds great!I'll speak with Jeff about adding in a more reliable hook for you to use with this -- it should be possible to get in there fairly soon. In the meantime, would it be possible to simply wrap the entire result from your getCell call in your own DIV, then apply your handling there? That is: <DIV ID="myDiv"> <!-- SSI call to Wetpaint here --> </DIV> This allows you to handle the overflow, put in a border, and lock down the height without digging into the imported HTML. When we get the reliable hooks in place (that you're free to style however you choose), you can migrate to them. 1 out of 1 found this valuable. Do you? |
