• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Adjust the format and layout of forum Web Pages

Community Beginner ,
Aug 26, 2014 Aug 26, 2014

Copy link to clipboard

Copied

This is a proof of concept posting to show how one can modify the format and layout of an Adobe Community web page.

This user tip shows you how to load a user style sheet into FireFox to make the Adobe Community web pages more readable.  Much white space has been eliminated.  Hiroto, an Apple Support Community contributor,  did the initial implementation for the Apple Support Community.  I've done some modifications for the Adobe Community.  More work needs to be done.

These changes are directed at the Firefox web browser.  With the movement of the @-moz-document tag data to a  User Content Manager, the css file should work with Chrome and Safari.

adobe-list-demo.png

Disclaimer


This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details. 



Here is how to let Firefox know about this style sheet.

Stylish supports the the direct importation of css rules.

-- Download and Install: 
  You need to download stylish in Firefox. Firefox will notice the download and ask you if it is
  ok to install.
   https://addons.mozilla.org/en-US/firefox/addon/stylish/

-- Using Stylish:

  firefox > tools > add-ons

  click on 'User Styles' in the left column < Yes, they changed the name >. 
  This will bring up the stylish stuff in the middle of the page.

  click on "write new style" button

  fill in a name of your user style sheet. I used ASC User styles.

  Crank up TextWrangler.

  Load the download file into TextWrangler

  Highlight all the code you see.  command + a

  Copy everything.  command + c

  Paste in the style sheet into the Stylish input area

  click on preview. Firefox will update displayed pages with new style rules. No need to restart.

  click on save when done. This will permanately add the style rules to Firefox and quit the edit.

Enjoy the new ASC web pages.


( Optional. )
To change a style sheet, I find it easier to change in TextWrangler. I feel it's best to user TextWrangler for these changes.
-- make your changes to the css in TextWrangler.
-- copy text in TextWrangler
-- switch to User Styles
-- highlight all
-- delete all text
-- paste text
-- click on preview to see changes.

Background

CSS effects the presentation of data. It moves data around, hides data, changes colors, changes margins, etc. There is the possibility of inserting data, but this sheet doesn't insert data.

Figuring what to write in a css file is difficult but reading isn't so bad.
example:

/* thread info */ 
    .jive-thread-info {  
        padding: 10px 40px !important; 
        margin: 0px !important; 
    }

With comments.

.jive-thread-info {   -- This is what is to be changed. 
        padding: 10px 40px !important;     -- changes inner space around text
                                                                   --  !important;   This change has the highest priority.
        margin: 0px !important;       --  changes outer space around object.  "Driving outside the lines"
                                                       -- set to 0 so to nullify.


Robert

/*

    Custom Cascading Style Sheet for Adobe Communities system introduced

    in 2014-05

 

    Copyright 2014 Hiroto of Apple Support Communities, R.C.Charles, et. al.

 

    GNU General Public License

    This program is free software: you can redistribute it and/or modify

    it under the terms of the GNU General Public License as published by

    the Free Software Foundation,  version 3

    This program is distributed in the hope that it will be useful,

    but WITHOUT ANY WARRANTY; without even the implied warranty of

    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

    GNU General Public License for more details.

    For a copy of the GNU General Public License

    see <http://www.gnu.org/licenses/>.

 

 

    Change Log for Version 0.1:

    -- based on ASC css file 0.61

       https://discussions.apple.com/docs/DOC-7501

 

*/

   /* How to comment out some of the code. Place code between braces.

         @media DISABLED {

         }

   */

@-moz-document

    domain(forums.adobe.com)

{

/* Common css for small and large windows */

/* Scroll code listings.  set max-height of syntax highlighted code in thread

    content browser    */

.jive-rendered-content .dp-highlighter {

     max-height: 500px !important;

     overflow: auto !important;

}                                                                              

/* Scroll code listings. set max-heiht of pre code (visible when javascript is disabled)

    */

.jive-rendered-content pre {

     max-height: 500px !important;

     overflow: auto !important;

}   

                                                                         

/* highlights in dark blue unread posts when logged in.

    All your posts

    https://forums.adobe.com/content?filterID=participated~objecttype~objecttype[thread]

 

    Discussions you authored

    https://forums.adobe.com/content?filterID=contentstatus[published]~objecttype~objecttype[thread]

 

    To see the dicussions you have read and not read in a community

    The suffix to use for any Adobe forum, placed after the basic link to any forum, it's

    /content?filterID=contentstatus[published]~objecttype~objecttype[thread]

 

    for iPhone community this would be:

    https://forums.adobe.com/community/general/forum_comments/content?filterID=contentstatus[published]~...

*/

.j-td-title strong {color:#191970 !important; font-weight: normal !important;}

 

    /* ---------------------------------------------------------------------------------

        BODY

    */

    body.j-body-welome,                /* Welcome */

    body.j-body-place,                /* Community */

    body.j-body-yourwork,            /* Content */

    body.j-body-home,                /* Activity */

    body.j-body-yourconnections,    /* People */

    body.j-body-preferences,        /* Preferences */

    body.jive-body-content,            /* Thread */

    body.jive-body-search,            /* Search */

    body.jive-view-profile            /* Profile */

    {                                                                      

        background: #F1F8FF !important;   /* a light light blue

                                       http://www.w3schools.com/tags/ref_colorpicker.asp

                                       Effectively overrides most of the body color.

                                       These are more specific.  */

    }

 

    /* ---------------------------------------------------------------------------------

        TEXT

    */

    /* line spacing */

    .jive-content { line-height: 1.25 !important; }

 

    /* ---------------------------------------------------------------------------------

        Adobe Community HEADER AREA

    */

    #j-header,

    #j-compact-header,

    #j-footer { width: 100% !important; }

 

 

    #j-globalNav-bg {

        padding: 0pX !important;

        margin: 0px !important;

    }

    #j-satNav { overflow: visible !important; }

 

    /* ordering of jive-breadcrumb has consequences.

 

       Example breadcrumb:

       All Communities > Adobe general forums > Forum comments > Discussions

    */

 

    /* for the posts in a discussion */

    #jive-breadcrumb {

        padding: 0px !important;

        margin: 0px 0px 6px 60px !important;

    }

 

    /* for the list of discussions in a community */

    .j-body-place #jive-breadcrumb {

        padding: 0px !important;

        margin: 0px 0px 6px 10px !important;

    }

    /* ---------------------------------------------------------------------------------

        THREAD LIST BROWSER - list of discussions in a Community

    */

 

    /* main section */

    #j-main { padding: 10px 0px 0px 28px !important; margin: 0px !important;}

    /* table cell title */

    .jive-table td.jive-table-cell-title { padding: 5px !important; }

     

    /* thread list view column widths */                                     

    .j-browse-details .j-td-title { max-width: none !important; }

    .j-browse-details .j-td-date {

        width: auto !important;

        max-width: 20% !important;

    }

    /* threads list view table tr td  */

    .j-browse-details-tbody tr td { padding: 5px !important; }

    /* communities list view table tr td */

    .jive-communities-listing table tr td { padding: 5px !important; }

 

    /* thumbnails view width */

    .j-browse-content .j-thumb-view,

    .j-browse-places .j-browse-thumbnails,

    .j-browse-people .j-browse-thumbnails { width: 100% !important; }

 

    /* thumbnail view list item margin */                                     

    .j-browse-content .j-thumb-view > li,

    .j-browse-places .j-browse-thumbnails > li { margin-right: 20px !important; }

    /* page header */

    .j-body-place #jive-body > header.j-page-header {

        margin-left: 10px !important;

        margin-right: 40px !important;

        width: auto !important;

    }

 

    /* browser filter row */

    #j-browse-filters { margin-bottom: 5px !important; }

    /* browser controls row */

    .j-type-row { margin-bottom: 0px !important; }

    /* browser controls content types (All Contents|User Tips|Discussions) width */

    #js-browse-controls .j-type-row .j-content-types { width: 90% !important; }

 

    /* browser controls view toggle (Thumbnails|Details) width */

    #js-browse-controls #j-item-view-toggle {

    /*     ~~~ width: 10% !important; */

        display: table !important;

    }

    /* content filter row (All|Open|Answered|Threads) */

    .j-content-filter {

        background: #F1F8FF !important;

        margin-bottom: 10px !important;

    } 

 

    /* container canvas */

    .j-contained {

        margin-left: 40px !important;

        margin-right: 40px !important;

    }

    /* category filter bar */

    .jive-content-filter {

        left: 0px !important;

        width: 80% !important;

    }

    .touchcarousel-wrapper { width: 100% !important; }

    .touchcarousel .tc-paging-container { width: 90% !important; }             

    /* more search results available */

    #j-more-search-results-available { padding: 10px !important; }

 

    /* misc */

    .jive-widget { margin-bottom: 10px !important; }

    .j-column { margin-bottom: 10px !important; }

    /* ---------------------------------------------------------------------------------

        THREAD CONTENT BROWSER - Displays the contents of the posts.

    */

 

 

    /* space around the posts.  Most noticeably the original post.

       First post poster name and time

       example: A... Jul 29, 2014 8:01 AM */

    .j-thread .jive-content { margin: 30px 40px 0px 0px !important; }

 

    /* thread replies ul */

    ul.jive-discussion-replies.jive-discussion-indent-0 { margin: 0px !important; }

 

    /* thread reply li */

    .jive-discussion-replies li.reply { margin-top: 0px !important; }

    /* thread view indent */

    .jive-discussion-indent-1 li.reply { padding-left: 15px !important; }

 

    /* thread info. number of replies, latest poster with time

       example: 4 Replies

                Latest reply: Jul 29, 2014 9:17 PM by P... */

    .jive-thread-info {

        padding: 4px 40px !important;

        margin: 0px !important;

    }

 

    /* thread answer rollup */

    .j-answer-rollup { margin: 30px 0px !important; }

 

    /* thread post header (poster, date, response to) */

    .j-thread-post > header {

        padding: 10px 20px 0px 20px !important;

        margin-bottom: 12px !important;

    }

 

    /* thread post section (message body) */

    .j-thread-post section {

        padding: 0px 20px !important;

        margin-bottom: 6px !important;

    }

 

    /* thread post footer (Like|Reply etc) */

    .j-thread-post footer { padding: 0px 15px !important; }

    .j-thread-post footer > ul { padding: 2px !important; }

    .j-thread-post footer > .acclaim-container { margin: 5px 0px !important; }

    /* thread rendered content. The text in the orginal post and replies.  */

    .jive-rendered-content {

        padding-bottom: 4px !important;

    }

 

    /* thread rendered content quote & pre */

    .jive-rendered-content .jive-quote,

    .jive-rendered-content .jive-pre {

        margin: 5px 15px !important;

    }

    /* thread reply footer (Return to Community|Go to original post) */

    #jive-thread-reply-footer {    margin-top: 10px !important; }

 

    /* more like this links, incomming links */

    .j-icon-list li { padding: 3px 0px 3px 22px !important; }

    /* ---------------------------------------------------------------------------------

        INLINE EDITOR

    */

    /* editor */

    .jive-discussion-replies li.addReply { margin: 50px 40px 0px !important; }

    /* ---------------------------------------------------------------------------------

        ADVANCED EDITOR

    */

    /* content area */

    .j-thread .jive-content.jive-create-thread,

    .jive-body-formpage-document .jive-content.doc-page {

        margin: 0px 40px !important;

        padding: 0px !important;

    }

    /* header */

    .j-thread .jive-content.jive-create-thread h2,

    .jive-body-formpage-document .jive-content.doc-page h2 { padding: 0px !important; }

    /* editor panel */

    .j-thread .jive-content.jive-create-thread #jive-compose-title,

    .j-thread .jive-content.jive-create-thread .jive-editor-panel.jive-large-editor-panel,

    .jive-body-formpage-document .jive-content.doc-page #jive-compose-title,

    .jive-body-formpage-document .jive-content.doc-page .jive-editor-panel.jive-large-editor-panel { margin: 0px !important; }

    /* line height in editor */

    body.tiny_mce_content { line-height: inherit !important; }

    /* replying to */

    .jive-body-formpage-comment .jive-thread-message { margin: 0px !important; } 

    /* buttons (Reply|Cancel) */

    .j-publishbar,

    .jive-body-formpage .jive-composebuttons { margin: 20px 40px 0px !important; }

 

    /* ---------------------------------------------------------------------------------

        SEARCH RESULTS

    */

    /* search result entry */

    .j-search-results-main-container .j-search-result

        { padding: 10px !important; } 

    /* ---------------------------------------------------------------------------------

        DOC (USER TIP)

    */                                                                         

    /* user tip canvas */

    .jive-body-content.j-doc .j-column-wrap-l { margin: 0px 40px !important; }

    /* ---------------------------------------------------------------------------------

        PROFILE

    */                                                                         

    /* header & navigation bar (Bio|Activity|Content|Communities) */

    .j-view-profile .j-page-header { padding: 10px 40px !important; }

    .j-bigtab-nav { margin: 10px 40px !important; }

 

    /* Bio */

    .j-layout-l .j-column-wrap-l { width: 100% !important; }

    /* Communities (places) sidebar ui blue marker adjustment

        (according to the sidebar width changed to 166px from 180px for selector:

        .j-layout-sl.j-browse-places .j-column-s in PLACES section)  */

    .j-view-profile .j-second-nav ul > li.active  { width: 156px !important; }

/* Wide screen browser

    ===================

 

    This rule set will be fine for normal to wide window whose width is ca. 1265px or greater.

    However, it will not be beneficial to very narrow window of 700-900px in width.

*/

@media all and (min-width: 1265px)                                             

  {

       /* ---------------------------------------------------------------------------------

        BODY

    */

 

    body {

        background: #F1F8FF;        /* a light light blue */

        min-width: 0px !important;

    }

    /*

    #body-apple {

        width: 100% !important;

        min-width: 0px !important;

    }*/

    /* ---------------------------------------------------------------------------------

        THREAD LIST BROWSER - list of discussions in a Community

    */

 

    /* ------------------

        Treatment for wide window

        Method 1 (minimum optimisation)

        Adjust thread list table's shift and margin to maximize its width.

    */                                                                             

    .j-layout-sl.j-browse-content .j-column-wrap-l { margin-left: -166px !important; }

    .j-layout-sl.j-browse-content .j-column-l      { margin-left: 166px !important; }

    .j-layout-sl.j-browse-content .j-column-s      { width: 166px !important; }

    /* ------------------ */

    /* ------------------

        Swap left-right positions of thread list table and sidebar ui (filters & actions)

    */                                                                             

    /* let thread list table float left */

    .j-layout-sl.j-browse-content .j-column-wrap-l,

    .j-layout-sl.j-browse-places .j-column-wrap-l { float: left !important; }

    /* let sidebar ui float right */

    .j-layout-sl.j-browse-content .j-column-s,

    .j-layout-sl.j-browse-places .j-column-s { float: right !important; }

    /* ------------------ */

    /* ---------------------------------------------------------------------------------

        THREAD CONTENT BROWSER - Displays the contents of the posts.

    */

 

    /*

      Put the brakes on infinite expansion of text.  Sets how wide the text display area in a

      window can get. Eventhou the window maybe large, folks find it easier to read

      the words when the text area is smaller.

    */

    /* Original post.  Includes answering post if present */

    /* posts in thread */

    /* Types of replies */

    #jive-thread-messages-container,

    /* Advanced reply */

    #jive-body {

        max-width: 1100px !important;

     }

  

    /* ------------------

        Treatment for narrow window

        Method 1 (minimum optimisation)

        Adjust community list table's shift and margin to maximize its width.

    */                                                                         

    .j-layout-sl.j-browse-places .j-column-wrap-l { margin-left: -166px !important; }

    .j-layout-sl.j-browse-places .j-column-l      { margin-left: 166px !important; }

    .j-layout-sl.j-browse-places .j-column-l      { padding-left: 0px !important; }

    .j-layout-sl.j-browse-places .j-column-s      { width: 166px !important; }

    /* ------------------ */

 

    /* ---------------------------------------------------------------------------------

        ACTIVITY STREAM

    */

    /* activity entry */

    .j-act-entry { padding: 5px 0px 10px 100px !important; }

    /* activity title */

    .j-body-home .j-act-title { padding: 5px 0px 5px 24px !important; }

    /* activity body & comment */                                             

    .j-body-home .j-act-init { padding: 5px 0px 10px 100px !important; }

    /* Like list */

    .j-act-grouped .j-act-g-item { padding: 3px !important; }

 

    /* -----------------------------------------------------------------------------------

       PLACES

    */                                                                         

    /* latest activity column */

    .j-browse-details .j-td-activity { max-width: 650px !important; }

} /* end of media for wide screen */

  @media all and (max-width: 1265px)                                          

  {

    /* styles for small screens ( narrow browsers window )

       ========================

    

       Narrow is basically the same as the above wide screen browser except that this hides

       the sidebar column.

   

       custom styles for Adobe forum system introduced in 2014-05

    

    */

       

    /* -----------------------------------------------------------------------------------

        BODY

    */

    body {

        background: #F1F8FF;        /* a light light blue */

    }

 

    /* -----------------------------------------------------------------------------------

        THREAD LIST BROWSER

    */

 

    /* fyi: for some reason on a small screen, the details icon gets jammed down a row. */

 

    /* Hide left column action sidebar.  It's a duplicate of Action pulldown anyway. */

    .j-sidebar-left { display: none !important; }

 

    /* ------------------

        Hide Like and Bookmark columns in thread list view.

    */                                                                         

    /* title */

    .j-browse-details > table.j-browse-list > thead.j-rc4 > tr > th + th + th,

    .j-browse-details > table.j-browse-list > thead.j-rc4 > tr > th + th + th + th

        { display: none !important; }

    /* data */

    .j-browse-details .j-td-likes,

    .j-browse-details .j-td-bookmarks { display: none !important; }

    /* ??? copied without understanding well added + th */

    .j-browse-details > table.j-browse-list > thead.j-rc4 > tr > th + th + th + th + th

        { display: table-cell !important; }

    /*

       Swap left-right positions of thread list table and sidebar ui ( actions )

       < Sometimes hiding things still takes up space. Maybe I'm hiding the wrong thing? >

    */                                                                 

    /* let thread list table float left */

    .j-layout-sl.j-browse-content .j-column-wrap-l,

    .j-layout-sl.j-browse-places .j-column-wrap-l { float: left !important; }

    /* let sidebar ui float right */

    .j-layout-sl.j-browse-content .j-column-s,

    .j-layout-sl.j-browse-places .j-column-s { float: right !important; }

    /* -----------------------------------------------------------------------------------

        THREAD CONTENT BROWSER - Displays the contents of the posts.

    */

 

    /* -----------------------------------------------------------------------------------

        ACTIVITY STREAM

    */

    /* activity entry */

    .j-act-entry { padding: 5px 0px 10px 100px !important; }

    /* activity title */

    .j-body-home .j-act-title { padding: 5px 0px 5px 24px !important; }

    /* activity body & comment */                                             

    .j-body-home .j-act-init,

    .j-view-profile .j-act-init { padding: 5px 0px 10px 100px !important; }

    /* Like list */

    .j-act-grouped .j-act-g-item { padding: 3px !important; }

 

 

 

    /* -----------------------------------------------------------------------------------

        PLACES

    */                                                                      

    /* latest activity column */

     .j-browse-details .j-td-activity { max-width: 650px !important; }

  }  /* end of media for narrow browsers. */

} /* @-moz-document */

Views

834

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 27, 2014 Aug 27, 2014

Copy link to clipboard

Copied

All content generated by Jive SBS is copyrighted. You cannot take sections from the CSS and claim it's released under a new license.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 27, 2014 Aug 27, 2014

Copy link to clipboard

Copied

LATEST

You cannot take sections from the CSS and claim it's released under a new license.


I'm copyrighting the css style sheet Hiroto and I wrote and posted above.  It's the standard programming copyright.  It's like a program using system Application Program Interfaces.  It similar to what Google does when they scan the web for their search function.

  1. Custom Cascading Style Sheet for Adobe Communities system introduced
  2.     in 2014-05
  3.   
  4.   
  5.     This program is free software


My reading:

Custom Cascading Style Sheet is the subject and what I am talking about.


This program refers to Custom Cascading Style Sheet.  Hence, it is what I am talking about and copyrighting.


Robert

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines