/*--------------------------------------------------------- =========================================================== =========================================================== ========== GroupJive ========== ====== CSS written 10/23/2007 ======= ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ========= CSS GROUPJIVE CSS ========= ============ css_blocks ============ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ =========================================================== =================== Anna Micha Mark =================== ========== CSS wireframe by mark raborn (wwvine) ========== =========================================================== ----------------------------------------------------------- */ /* To locate the CSS of any .tmpl file on this page... please type CTRL+F and enter the name of the template. EXAMPLE: CTRL+F and enter showgroup.tmpl This will take you to the showgroup.tmpl CSS.... thanks. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! PLEASE READ THESE DESIGN NOTES. WE HAVE MADE AN EFFORT TO SIMPLIFY THE TEMPLATING IN GROUPJIVE SO THAT IT IS EASILY MODIFIED. THESE NOTES WILL ASSIST YOU IN BECOMING FAMILIAR WITH THE CSS and gjPatTemplate (.tmpl) FILES IN GROUPJIVE. INFORM US HOW WE CAN IMPROVE THIS EFFORT ON YOUR BEHALF. We can be reached at team@groupjive.org Thank you. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ****** CSS is divided into 3 main areas ****** 1.) TYPOGRAPHY 2.) COLOR 3.) POSITIONING the same ID's, CLASSES's and Specificity are used over and over again in each of the main areas with the specifics of TYPOGRAPHY, COLOR and POSITIONING re-stated in CSS rules within the appropriate design category. ------------------ about SHOWGROUP.TMPL ------------------- The showgroup TEMPLATE (showgroup.tmpl) and showgroup CSS are the most prominent in GroupJive!! showgroup.tmpl and also showgroupmini.tmpl are consistantly in the users viewport. ----- ------ SHOWGROUP = info about group, links, actions, moderator, etc... where?: displays at top of all groupjive pages (except some forms) ----- ------ The showgroup Header contains GROUPNAME, GROUPLOGO, GROUPINFO, group LINKS, group ACTIONS, group CREATORIMAGE, group MODERATOR_FUNC Suggestions for design are to place showgroup elements at the top of the page and bring groupjive.tmpl in underneath it. -OR- float showgroup.tmpl using CSS and design other templates to become place by design around, between and next to the floated showgroup elements. ----------------------------------------------------------- REMOVING MODERATOR FROM VIEW: some community members have requested the "highly prominent" Moderator elements in the showgroup page be minimized. GroupJive has provided some templates that have the text min_mod in the name. These templates are designed specifically to minimize the moderator presence on the page in response to these requests. ---------------- end about SHOWGROUP.TMPL ----------------- */ /* ------------- about NATIVE JOOMLA! CLASSES ------------- GroupJive uses two native joomla CSS classes in styling GroupJive so that GroupJive will be rendered with some similiarities to its surrounding Joomla! installationl. These two native classes are: componentheading sectiontableheader To change this rendering you must search through each gjPatTemplate where these classes exist and place a new class attribute in the elements that contain them. Please note the CLASS componenteading is also located in certain GJ functions. Items outside the gjPatTemplates are contained in the following files: groupjive_func.inc A pre-styled substitue exists (.gj-heading) in the CSS directly below). If (componentheading) in your template is rendered in a way that does not render well (ex. VERY LARGE TEXT) then follow the next set of directions to apply a different rule to (componentheading). ---------------- end about Joomla! classes ---------------- */ /* IF YOUR GROUPJIVE COMPONENT HEADINGS DO NOT RENDER WELL WITH YOUR JOOMLA! TEMPLATE... FOLLOW THESE DIRECTIONS. THIS BASIC CSS CLASS CAN BE *STYLED* TO IMPROVE CERTAIN HEADINGS (

in GroupJive) */ /* .gj-heading { display:; text-indent:4px; font-size:; font-style:; color:; margin:4px 0; padding:5px 0; border-bottom:1px solid #666666; border-top:1px solid #666666; background-color:; background-image:none; } */ /* ** NOTE: ONLY APPLY THIS .gj-heading of the componentheading class is breaking your template ** UNCOMMENT THE ABOVE CSS CLASS ** THEN SEARCH AND REPLACE THE componentheading CLASS where ever you find it in GroupJive ** NOTES: gj-heading replaces the componentheading class which master CSS in Joomla! CSS file ** This class does not render well in GroupJive for all Joomla! templates. ** Open each groupjive gjPatTemplate ( there have the .tmpl extension ~> i.e groupjive.tmpl) ** then Search and replace the CSS class. This is simple using (CTRL+F) ** Locate the class (componentheading) for any headers

in groupjive ** ** You will also need to Search (CTRL+F) the file groupjive_fund.inc for the class (componentheading) ** and replace there when found. ** ** Please note that you can also change the CSS class componentheading in the master Joomla! ** CSS file to fit better with Groupjive ---------------- end INTRODUCTION ---------------- */ /* ******************************************************** *********************************************************** =========================================================== =================== CSS begins here ==================== ================== CSS begins here =================== =================== CSS begins here ==================== =========================================================== *********************************************************** *********************************************************** */ /* -------------------------------------------------------- =========================================================== TYPOGRAPHY showgroup.tmpl - MULTIPART MASTER for GroupJive ----------------------------------------------------------- Displays at top of all groupjive pages (except some forms) Renders info about group, links, actions, moderator, etc... =========================================================== ----------------------------------------------------------- */ #creator-wrapper h3 { } #moder_functions-wrapper h3 { } /* -------------------------------------------------------- =========================================================== POSITIONING showgroup.tmpl - MULTIPART MASTER for GroupJive ----------------------------------------------------------- Displays at top of all groupjive pages (except some forms) Renders info about group, links, actions, moderator, etc... =========================================================== ----------------------------------------------------------- */ #showgroup-tmpl-wrapper { /* wrapper for showgroup template */ margin: 0 0 0 0; padding: 0 0 0 0; } #main-float-left { /* wrapper for all group activities */ float:left; width:75%; } #main-float-right { /*wrapper for all moderator elements */ float:left; width:25%; } #group_activities { /* NOT USED - potential inside wrapper for all group activiites */ } #creator-wrapper { /* positions Moderator UserProfile LINK in showgroup */ float:left; width:100%; padding: 0 0 3px 0; text-align:center; } #creator-wrapper h3 { text-align:center; } #moder_functions-wrapper { /* positions Moderator Functions in showgroup */ float:left; width:100%; } #moder_functions-wrapper h3 { text-align:center; } .groupname { /* container for GroupName Header Element */ float:left; width:auto; padding: 5px 0 0 10px; } #logo-and-info-wrap { /* container for grouplogo and groupinfo */ float:left; width:100%; } .grouplogo { /* grouplogo positioning inside container */ float:left; width:35%; padding: 5px 0 10px 35px; text-align:center; } .groupinfo { /* groupinfo positioning inside container */ float:left; width:40%; padding: 5px 0 10px 0px; } #links-and-actions-wrap { /* container for grouplinks and groupactions */ float:left; width:100%; } .grouplinks { /* grouplinks positioning inside container */ float:left; width:35%; padding: 0 0 0 35px; } .groupactions { /* groupactions positioning inside container */ float:left; width:40%; padding: 0 0 0 0px; } /* -------------------------------------------------------- =========================================================== ALL STYLES - showgroupmini.tmpl - (css for showgroupmini ONLY) =========================================================== ----------------------------------------------------------- */ #showgroupmini-tmpl-wrapper { /* wrapper for showgroup template */ margin: 0 0 0 0; padding: 0 0 0 0; } #showgroupmini-main-container { width:100%; margin: 0 0 0 0; padding: 0 0 0 0; } .sgmini-groupname { /* container for GroupName Header Element */ width:100%; padding: 0 0 0 0; } .sgmini-groupname .miniheader{ /* GroupName Header Element */ padding: 8px 0 12px 0; text-indent:25px; font-weight:bold; font-size:1.4em; } #sgmini-logoandlinks-container { /* this container floats LOGO and LINKS to left */ float:left; width:47%; } #sgmini-grouplogo { /* container for Group LOGO */ } .sgmini-grouplogo { /* positions LOGO inside container */ padding: 0 10px 0 25px; } #sgmini-grouplinks { /* container for Group LINKS */ } .sgmini-grouplinks { /* positions LINKS inside container */ float:left; padding: 0 0 0 25px; } .sgmini-grouplinks ul li{ } #sgmini-infoandmodfuncs-container { /* this container floats INFO and MOD FUNCTIONS to left */ float:left; width:52%; } #sgmini-mod-functions { /* container for Group MODERATOR FUNCTIONS */ float:right; min-width:20%; } .sgmini-mod-functions { /* positions MODERATOR FUNCTIONS inside container */ padding: 0 10px 0 10px; } #sgmini-groupinfo { /* container for Group INFO */ text-align:left; width:auto; } .sgmini-groupinfo { /* positions INFO inside container */ padding: 0 10px 0 10px; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY showmenu.tmpl - displays GJ SimpleDescription and Search =========================================================== ----------------------------------------------------------- */ #simpledesc-wrapper{ margin: 0 0 0 0; } #simplewelcome h3 { /* Simple Welcome Header */ margin: 0 0 0 0; padding: 0 0 0 0; font-size:1.4em; } #simpledesc { /* Simple Description text */ text-indent:7px; font-size:small; font-style:italic; } #showmenusearch-container .creategroup-link a { /* styles creategroup link specifically in showmenusearch */ font-size:larger; } /* -------------------------------------------------------- =========================================================== POSITIONING showmenu.tmpl - displays GJ SimpleDescription and Search =========================================================== ----------------------------------------------------------- */ #showmenusearch-tmpl-wrapper { margin: 0 0 0 0; padding: 0 0 0 0; } #showmenusearch-container { /* a container for showmenu content */ margin: 5px 0 4px 0; } #simpledesc { /* Simple Description text */ float:left; padding: 0 0 3px 10px; } #searchbox { /* positions searchbox on right side of show menu */ float:right; padding: 0 10px 0 0 ; } #showmenusearch-container .creategroup-link a { /* styles creategroup link specifically in showmenusearch */ margin: 0 0 0 0; padding: 0 0 0 0; } /* -------------------------------------------------------- =========================================================== POSITIONING showoverview.tmpl - Category List Template =========================================================== ----------------------------------------------------------- */ #showoverview-tmpl-wrapper { margin: 0 0 0 0; padding:0 0 0 0; } #showoverview-title { margin: 0 0 2px 0; text-indent:15px; } .categorylist-wrapper { /* container for Category List */ padding: 10px 0; } .categorylist-catimage-odd { /* ODD positions Category Image for each list item*/ float:left; margin: 0 0 0 45px; width:110px; } .categorylist-catlink-odd { /* ODD positions Category Link for each list item */ float:none; padding: 20px 0 0 0; } .categorylist-catimage-even { /* EVEN positions Category Image for each list item*/ float:left; margin: 0 0 0 45px; width:110px; } .categorylist-catlink-even { /* EVEN positions Category Link for each list item */ float:none; padding: 20px 0 0 0; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY showcat.tmpl - Show Category Contents (which is Groups) =========================================================== ----------------------------------------------------------- */ #showcat-pagenav-container .pagecounter { /* positions pagecounter */ font-size:small; font-weight:bold; font-variant:small-caps; } /* -------------------------------------------------------- =========================================================== COLOR showcat.tmpl - Show Category Contents (which is Groups) =========================================================== ----------------------------------------------------------- */ .groupdescription { /* description of Group */ color:#808080; } /* -------------------------------------------------------- =========================================================== POSITIONING showcat.tmpl - Show Category Contents (which is Groups) =========================================================== ----------------------------------------------------------- */ #showcat-tmpl-wrapper { margin: 0 0 0 0; padding: 0 0 0 0; } /* ... showcat continued - (Navigation of Groups) */ #showcat-title-container { padding: 10px 0 4px 0; } #showcat-pagenav-container { padding: 10px 0 10px 0; vertical-align:middle; } #showcat-pagenav-container .pagecounter { /* positions pagecounter */ float:left; width:30%; text-indent:20px; } #showcat-pagenav-container .pagelistoptions { /* positions pagelist dropdown*/ float:left; width:15%; } #showcat-pagenav-container .pagelinks { /* positions < End>> navigation */ float:left; width:55%; } /* -------------------------------------------------------- showcat - (the Groups) */ #showcat-grouplist-wrapper { } #showcat-title { margin: 0 0 0 0; text-indent:15px; } .grouplist-wrapper { /* wrapper for the entire Group List */ padding: 15px 0; } .grouplist-leftcontainer { /* This container holds the Group Image on left side */ float:left; min-height:40px; } .grouplist-groupimage { /* positions the Group Image inside the left container and sets container size for image */ float:left; vertical-align:middle; margin: 0 0 0 45px; width:110px; } .grouplist-rightcontainer { /* hold details about group on right side */ float: right; } .group-created-date { /* positions the Group Create Date on right */ float:right; margin: 0 5px 0 0; } .group-members-count { /* positions Members Account next to Create Date on right */ float:right; margin: 0 15px 0 0; } .group-privacy-status { /* positions privacy status next to Members Account on right */ float:right; margin: 0 15px 0 0; } .grouplist-showgroupanddesc { /* wrapper for showgrouplink and groupdescription */ margin: 0 0 0 0; } .grouplist-showgrouplink { /* Link to Group Details and ShowGroup Functions */ margin: 20px 0 0px 0px; } .groupdescription { /* description of Group */ color:#808080; padding: 5px 5px 5px 0; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY newgroup.tmpl - FORM to Create New Group =========================================================== ----------------------------------------------------------- */ #newgroup-form-container h3 { margin: 0 0 0 0; padding: 4px 0 20px 0; } #newgroup-form-container .gj_form-text { } /* -------------------------------------------------------- =========================================================== POSITIONING newgroup.tmpl - FORM to Create New Group =========================================================== ----------------------------------------------------------- */ #newgroup-tmpl-wrapper { text-align: left; margin: 0 10px 0 10px; padding: 20px 0 0 0; /* 20px is to be nice to Opera */ } #newgroup-form-container { margin: 0 0 0 0; padding: 25px 55px; border-top: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } #newgroup-form-container .submit-position { margin: 10px 0; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY editgroup.tmpl - FORM to Edit Existing Group =========================================================== ----------------------------------------------------------- */ #editgroup-form-container h3 { margin: 0 0 0 0; padding: 4px 0 20px 0; } #editgroup-form-container .gj_form-text { } /* -------------------------------------------------------- =========================================================== POSITIONING editgroup.tmpl - FORM to Edit Existing Group =========================================================== ----------------------------------------------------------- */ #editgroup-tmpl-wrapper { text-align: left; margin: 0 10px 0 10px; padding: 20px 0 0 0; /* 20px is to be nice to Opera */ } #editgroup-form-container { margin: 0 0 0 0; padding: 25px 55px; border-top: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } #editgroup-form-container .submit-position { margin: 10px 0; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY invite.tmpl - FORM to Invite People to a Group =========================================================== ----------------------------------------------------------- */ #invite-form-container h4 { margin: 0 0 0 0; padding: 4px 0 20px 0; } #invite-form-container .gj_form-text { } /* -------------------------------------------------------- =========================================================== POSITIONING invite.tmpl - Invite People to a Group =========================================================== ----------------------------------------------------------- */ #invite-tmpl-wrapper { text-align: left; margin: 0 10px 0 10px; padding: 20px 0 0 0; /* 20px is to be nice to Opera */ } #invite-form-container { margin: 0 0 0 0; padding: 10px 10px 15px 35px; border-top: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } #invite-form-container .submit-position { margin: 10px 0; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY inactive.tmpl - Lists of Inactive Users and Functions in which to Activate or Delete these users. =========================================================== ----------------------------------------------------------- */ #inactive-tmpl-wrapper h3 { } /* -------------------------------------------------------- Headers */ .inactive-name { font-weight:bold; font-size:small; font-variant:small-caps; } .inactive-status { font-weight:bold; font-size:small; font-variant:small-caps; } .inactive-actions { font-weight:bold; font-size:small; font-variant:small-caps; } /* -------------------------------------------------------- the List */ .gj_realname { /* Name LINK to UserProfile in Pending Inactive list */ font-size:; font-weight:bold; font-style:italic; } .gj_status { /* Status in in Pending Inactive list */ font-size:; font-weight:bold; } .gj_activate-or-delete { /* Moderator Actions in Pending Inactive list */ font-size:; font-weight:bold; } /* -------------------------------------------------------- =========================================================== POSITIONING inactive.tmpl - Lists of Inactive Users and Functions in which to Activate or Delete these users. =========================================================== ----------------------------------------------------------- */ #inactive-tmpl-wrapper { /* Wrapper for inactive template */ margin: 0 10px 0 10px; padding: 20px 0 0 0; /* 20px is to be nice to Opera */ } #inactive-form-container { float:left; width:100%; margin: 0 0 0 0; padding: 0 0 20px 0 ; border-top: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } #inactive-tmpl-wrapper h3 { margin: 0 0 0 0; padding: 25px 0 20px 35px; } /* -------------------------------------------------------- Headers */ #inactive-header-container { /* Container for gj_intactive_name Header */ } #inactive-name-header { float:left; width: 33%; } #inactive-status-header { /* Container for gj_intactive_status Header */ float:left; width: 34%; } #inactive-actions-header { /* Container for gj_intactive_actions Header */ float:left; width: 33%; } .inactive-name { text-align:center; } .inactive-status { text-align:center; } .inactive-actions { text-align:center; } /* -------------------------------------------------------- the List */ #inactive-list-container { /* LIST Wrapper for inactive-name */ margin:; padding: 10px 0 10px 0; } .inactive-name-listwrap { float:left; width: 33%; } .inactive-status-listwrap { /* LIST Wrapper for inactive-status */ float:left; width: 34%; } .inactive-actions-listwrap { /* LIST Wrapper for inactive-actions */ float:left; width: 33%; } .gj_realname { /* Name LINK to UserProfile in Pending Inactive list */ text-align:center; font-size:; } .gj_status { /* Status in in Pending Inactive list */ text-align:center; } .gj_activate-or-delete { /* Moderator Actions in Pending Inactive list */ text-align:center; padding: 0 5px 0 5px; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY transfer.tmpl - FORM to Transfer Group Ownership =========================================================== ----------------------------------------------------------- */ #transfer-form-container h4 { margin: 0 0 0 0; padding: 4px 0 20px 0; } #transfer-form-container .gj_form-text { } /* -------------------------------------------------------- =========================================================== POSITIONING transfer.tmpl - FORM to Transfer Group Ownership =========================================================== ----------------------------------------------------------- */ /* Wrapper for transfer template */ #transfer-tmpl-wrapper { text-align: left; margin: 0 10px 0 10px; padding: 20px 0 0 0; /* 20px is to be nice to Opera */ } #transfer-form-container { margin: 0 0 0 0; padding: 10px 10px 15px 35px; border-top: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } #transfer-form-container .submit-position { margin: 10px 0; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY editpost.tmpl - FORM to Edit Bulletin Posts =========================================================== ----------------------------------------------------------- */ #editpost-form-container h3 { margin: 0 0 0 0; padding: 15px 0 15px 0; } #editpost-form-container .gj_form-text { } /* -------------------------------------------------------- =========================================================== POSITIONING editpost.tmpl - FORM to Edit Bulletin Posts =========================================================== ----------------------------------------------------------- */ #editpost-tmpl-wrapper { /* Wrapper for editpost template */ text-align: left; margin: 0 10px 0 10px; padding: 20px 0 0 0; /* 20px is to be nice to Opera */ } #editpost-form-container { margin: 0 0 0 0; padding: 10px 10px 15px 55px; border-top: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } #editpost-form-container .submit-position { margin: 2px 0; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY bulletin.tmpl - Most Recent Bulletins / Create Bulletin FORM =========================================================== ----------------------------------------------------------- */ /* -------------------------------------------------------- continuing... TYPOGRAPHY the List of Recent Bulletins ----------------------------------------------------------- */ /* -------------------------------------------------------- Headers */ .bulletin-subject-header { /* Header gj_bulletin-subject */ font-variant:small-caps; } .gj_bulletin-subject { font-weight:bold; font-size:small; } .bulletin-createddate-header { /* Header gj_bulletin-createdate */ font-variant:small-caps; } .gj_bulletin-createddate { font-weight:bold; font-size:small; } .bulletin-username-header { /* Header gj_username */ font-variant:small-caps; } .gj_username { font-weight:bold; font-size:small; } /* -------------------------------------------------------- the List */ .recent-bulletin-subject { font-weight:bold; } .recent-bulletin-createddate { font-weight:bold; } .recent-username { font-weight:bold; } #gj_bulletin-archive { /* LINK to Bulletin Archive */ font-style:italic; font-size:small; } /* -------------------------------------------------------- continuing... TYPOGRAPHY the FORM for creating Bulletin Messages ----------------------------------------------------------- */ #bulletin-form-container h4 { margin: 0 0 0 0; padding: 15px 0 25px 0; } #bulletin-form-container .gj_form-text { } /* -------------------------------------------------------- =========================================================== POSITIONING bulletin.tmpl = Most Recent Bulletins / Create Bulletin FORM =========================================================== ----------------------------------------------------------- */ #bulletin-tmpl-wrapper { /* Wrapper for bulletin template */ margin: 0 0 0 0; padding: 0 0 0 0; } #bulletin-main-container { margin: 10px 4px 0 5px; padding: 8px 0 0 0; /* this 8px for Opera */ } #bulletin-tmpl-wrapper h3 { display:block; margin: 0px 0 7px 0; padding: 3px 0px 4px 0px; border-top: 1px solid #999999; border-bottom: 1px solid #999999; background-color:#E5E5E5; text-align:center; } /* -------------------------------------------------------- continuing... POSITIONING the List of Recent Bulletins ----------------------------------------------------------- */ #recent-bulletin-container { /* ------- Container ------- */ padding: 5px 0; } /* -------------------------------------------------------- Headers */ .bulletin-subject-header { /* Header gj_bulletin-subject in recent bulletin list */ float:left; width: 34%; padding: 0 0 5px 0; } .gj_bulletin-subject { text-align:center; padding: 0px 0 2px 0; } .bulletin-createddate-header { /* Header gj_bulletin-createdate in recent bulletin list */ float:left; width: 33%; padding: 0 0 5px 0; } .gj_bulletin-createddate { text-align:center; padding: 0px 0 2px 0; } .bulletin-username-header { /* Header gj_username in recent bulletin list */ float:left; width: 33%; padding: 0 0 5px 0; } .gj_username { text-align:center; padding: 0px 0 2px 0; } /* -------------------------------------------------------- the List */ .bulletin-subject-wrapper { /* Bulletin Links function for recent-bulletin-subject*/ float:left; width: 34%; } .recent-bulletin-subject { text-align:center; } .bulletin-createddate-wrapper { /* Create Date function for recent-bulletin-createdate*/ float:left; width: 33%; } .recent-bulletin-createddate { text-align:center; } .username-wrapper { /* User Profile Link function for recent-username*/ float:left; width: 33%; } .recent-username { text-align:center; } #gj_bulletin-archive { /* LINK to Bulletin Archive */ text-align:right; margin: 0 50px 0 0; padding: 1px 0 0 0; /* 1px top pad for Opera */ } /* -------------------------------------------------------- continuing... POSITIONING the FORM for creating Bulletin Messages ----------------------------------------------------------- */ #bulletin-form-wrapper { /* container for bulletin FORM */ text-align: left; margin: 0 10px 0 10px; padding: 3px 0 0 0; } #bulletin-form-container { margin: 0 0 0 0; padding: 10px 10px 15px 55px; border-top: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } #bulletin-form-wrapper .submit-position { margin: 2px 0; } /* ------------------------------------ - - TWO COLUMN LAYOUT FOR WYSIWYG EDITOR - - UNCOMMENT THIS SECTION IF YOU *DO NOT* USE THE WYSIWYG EDITOR AND CREATE TEXT ONLY BULLETINS. THIS css POSITIONS DESCRIPTIONS AND FIELDS SIDE BY SIDE USING CSS FLOAT !!! NOTE... THIS IS TOO SMALL AN AREA !!! !!! FOR A FULL SIZED WYSIWYG EDITOR !!! /* positions FORM subject desciption .gj_subject-desc { float: left; width: 25%; } /* positions SUBJECT FIELD next to subject description .gj_subject-field { float: none; } /* positions FORM message area description .gj_leave_message-desc { width: 25%; float: left; } /* positions FORM MESSAGE AREA next to area description .gj_leave_message-area { float: none; } /* creates space pushing SUBMIT button to the right #bulletin-form-wrapper .submit-spacerleft { float: left; width: 25%; } ------------------------------------ */ /* -------------------------------------------------------- =========================================================== TYPOGRAPHY archive.tmpl - List of all Archived Bulletins =========================================================== ----------------------------------------------------------- */ #archive-pagenav-container .pagecounter { font-size:small; font-weight:bold; font-variant:small-caps; } /* -------------------------------------------------------- Headers */ #archive-bulletin-headers { display:block; padding:4px 0 5px 0; border-top: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; background-color:#E5E5E5; text-indent:10px; text-align:left; } #archive-bulletin-subject-header .bulletin-subject { font-weight:bold; font-size:small; font-variant:small-caps; } #archive-bulletin-createddate-header .bulletin-createddate { font-weight:bold; font-size:small; font-variant:small-caps; } #archive-username-header .username { font-weight:bold; font-size:small; font-variant:small-caps; } /* -------------------------------------------------------- the List */ .archive-bulletin-subject { /* Bulletin Subject in Archive bulletin LIST */ font-size:small; font-weight:bold; } .archive-bulletin-createddate { /* CreateDate Subject in Archive bulletin LIST */ font-size:x-small; font-weight:bold; } .archive-username { /* UserName Subject in Archive bulletin LIST */ font-size:x-small; font-weight:bold; } .archive-mod-edit-post { /* LINK Edit this Bulletin */ font-weight:normal; font-size: xx-small; } .archive-mod-delete-post { /* LINK Delete this Bulletin */ font-weight:normal; font-size: xx-small; } /* -------------------------------------------------------- =========================================================== POSITIONING archive.tmpl - List of all Archived Bulletins =========================================================== ----------------------------------------------------------- */ #archive-tmpl-wrapper { /* Wrapper for archive template */ margin: 0 0 0 0; padding: 20px 0 0 0; /* top pad here is to be nice to Opera */ } #archive-tmpl-wrapper .sectiontableheader { margin: 0 10px; } #archive-title { text-indent:15px; } #archive-main-container { margin: 0 10px; } #archive-pagenav-container { padding: 15px 0 10px 0; border-left: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } #archive-pagenav-container .pagecounter { float:left; width:30%; text-indent:20px; } #archive-pagenav-container .pagelistoptions { /* positions pagelist dropdown*/ float:left; width:15%; } #archive-pagenav-container .pagelinks { /* positions < End>> navigation */ float:left; width:55%; } /* .lightline-hr { border: 1px solid #CCCCCC; color: } */ /* -------------------------------------------------------- POSITIONING the List of Archived Bulletins ----------------------------------------------------------- */ #archive-header-container { border-left: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } /* -------------------------------------------------------- Headers */ #archive-bulletin-subject-header { /* Archive Header Container for archive-bulletin-subject */ float:left; width: 34%; text-align:center; } #archive-bulletin-subject-header .gj_bulletin-subject { } #archive-bulletin-createddate-header { /* Archive Header Container for archive-bulletin-createddate */ float:left; width: 33%; text-align:center; } #archive-bulletin-createddate-header .gj_bulletin-createddate { } #archive-username-header { /* Archive Header Container for archive-username */ float:left; width: 33%; text-align:center; } #archive-username-header .gj_username { } /* -------------------------------------------------------- the List */ #archive-list-container { margin: 0 0 0 0; padding: 3px 0 3px 0 ; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } .archive-bulletin-subject-listwrap { /* Archive List Wrapper for archive-bulletin-subject */ display:table; vertical-align:middle; position:static; float:left; width: 34%; height: 100%; } .archive-bulletin-createddate-listwrap { /* Archive List Wrapper for archive-bulletin-createddate */ display:table; vertical-align:middle; position:static; float:left; width: 33%; height: 100%; } .archive-username-listwrap { /* Archive List Wrapper for archive-username */ display:table; vertical-align:middle; position:static; float:left; width: 32%; height: 100%; } .archive-bulletin-subject { /* Bulletin Subject in Archive bulletin LIST */ display:table-cell; margin: 4px 0; text-align:center; } .archive-bulletin-createddate { /* CreateDate Subject in Archive bulletin LIST */ display:table-cell; margin: 4px 0; text-align:center; } .archive-username { /* UserName Subject in Archive bulletin LIST */ display:table-cell; margin: 4px 0; text-align:center; } .archive-mod-wrap-left { /* container for Mod-Creator functions in Archive */ float:left; width:34%; } .archive-mod-wrap-center { /* container for Mod-Creator functions in Archive */ float:left; width:33%; } .archive-mod-wrap-right { /* container for Mod-Creator functions in Archive */ float:left; width:32%; } .archive-mod-edit-post { /* LINK Edit this Bulletin */ text-align:center; } .archive-mod-delete-post { /* LINK Delete this Bulletin */ text-align:center; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY showfullmessage.tmpl = Shows single Bulletin Message (complete) =========================================================== ----------------------------------------------------------- */ /* -------------------------------------------------------- Header */ .gj_showfull-bulletin-subject { /* Bulletin Title Subject in showfullmessage */ font-weight:bold; font-variant:small-caps; } .gj_showfull-bulletin-createddate { /* CreateDate of showfullmessage */ font-weight:bold; font-variant:small-caps; } .gj_showfull-username { /* UserName in showfullmessage */ font-weight:bold; font-variant:small-caps; } .gj_showfull-mod-edit-post { /* Edit this Bulletin LINK */ font-weight:normal; font-size: xx-small; } .gj_showfull-mod-delete-post { /* Delete this Bulleting LINK */ font-weight:normal; font-size: xx-small; } .gj_showfull-mod-author-name { font-weight:normal; font-size: xx-small; } /* -------------------------------------------------------- Bulletin Title */ .showfull-bulletin-content h3 { display:block; width:auto; margin: 2px 2px; padding: 5px 3px; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; background-color:#FFFFFF; } /* -------------------------------------------------------- =========================================================== COLOR showfullmessage.tmpl = Shows single Bulletin Message (complete) =========================================================== ----------------------------------------------------------- */ #showfull-bulletin-header-pane { background-color:#E5E5E5; } /* -------------------------------------------------------- =========================================================== POSITIONING showfullmessage.tmpl = Shows single Bulletin Message (complete) =========================================================== ----------------------------------------------------------- */ #showfullmessage-tmpl-wrapper { /* Wrapper for showfullmessage template */ margin: 0 0 0 0; padding: 15px 0 0 0; /* 15px is to be nice to Opera */ } #showfullmessage-main-container { margin: 10px 10px; } /* -------------------------------------------------------- Headers */ #showfull-bulletin-header-pane { border: 1px solid #999999; padding: 3px 0 ; } #showfull-bulletin-subject-container { /* Container for gj_showfull-bulletin-subject */ text-align:center; float:left; width: 50%; } #showfull-bulletin-author-container { /* Container for gj_showfull-bulletin-createdate */ float:left; width: 25%; } #showfull-bulletin-created-container { /* Container for gj_showfull-username */ float:left; width: 25%; } .gj_showfull-bulletin-subject { /* Bulletin Title Subject in showfullmessage */ text-align:left; text-indent:20px; } .gj_showfull-bulletin-createddate { /* CreateDate of showfullmessage */ text-align:center; } .gj_showfull-username { /* UserName in showfullmessage */ text-align:center; } #gj_showfull-mod-wrap-left { /* container for Mod-Creator functions in showfullmessage*/ float:left; max-width:100%; width:50%; } #gj_showfull-mod-wrap-center { /* container for Mod-Creator functions in showfullmessage*/ float:left; max-width:100%; width:25%; } #gj_showfull-mod-wrap-right { /* container for Mod-Creator functions in showfullmessage*/ float:left; max-width:100%; width:25%; } .gj_showfull-mod-edit-post { /* Edit this Bulletin LINK */ text-align:left; text-indent:20px; } .gj_showfull-mod-delete-post { /* Delete this Bulleting LINK */ text-align:center; } .gj_showfull-mod-author-name { text-align:center; } .showfull-bulletin-content { margin: 0 0px 15px 0px; padding: 10px 10px; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY showmailform.tmpl - FORM to edit Group Details =========================================================== ----------------------------------------------------------- */ #showmailform-form-container h4 { margin: 0 0 0 0; padding: 15px 0 25px 0; } #showmailform-form-container .gj_form-text { } /* -------------------------------------------------------- =========================================================== POSITIONING showmailform.tmpl - FORM to edit Group Details =========================================================== ----------------------------------------------------------- */ #showmailform-tmpl-wrapper { /* Wrapper for showmailform template */ text-align: left; margin: 0 10px 0 10px; padding: 20px 0 0 0; /* 20px is to be nice to Opera */ } #showmailform-form-container { margin: 0 0 0 0; padding: 10px 10px 15px 35px; border-top: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } #mailgroup-gj_message { /* mailgroup HEADER, headlines the showmailform template */ color:#FF0000; } .gj_mail_subject-desc { /* FORM positions subject desciption */ float: left; width: 25%; } .gj_mail_subject-field { /* FORM positions SUBJECT FIELD next to subject description */ float: left; } .gj_mail_body-desc { /* FORM positions mail body area description */ float: left; width: 25%; } .gj_mail_body-area { /* FORM positions MAIL BODY next to body area description */ float: left; } .gj_mail_cc_mod-desc { /* FORM positions CC to Moderator checkbox description */ float: left; width: 25%; } .gj_mail_cc_mod-checkbox { /* FORM positions MAIL BODY next to body area description */ float: left; } #showmailform-tmpl-wrapper .submit-spacerleft { /* creates space pushing SUBMIT button to the right */ float: left; width: 25%; } #showmailform-tmpl-wrapper .submit-position { /* positions the SUBMIT button */ float: left; margin: 6px 0; } /* -------------------------------------------------------- =========================================================== ALL STYLES member_list.tmpl - lists all members of a Group =========================================================== ----------------------------------------------------------- */ #member_list-tmpl-wrapper { margin: 0 0 0 0; padding: 15px 3px; } #member_list-title { margin: 0 0 2px 0; text-indent:15px; } #member_list-main-container { margin: 0 0; padding: 0 0 0 0; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; } #member_list-main-container .current_user-count { float:left; margin: 15px 0 2px 0; text-indent:20px; font-size:large; font-weight:bold; font-variant:small-caps; } #member_list-pagenav-container { padding: 10px 0 4px 0; } #member_list-pagenav-container .pagecounter { /* positions pagecounter */ float:left; width:30%; text-indent:20px; font-size:small; font-weight:bold; font-variant:small-caps; } #member_list-pagenav-container .pagelistoptions { /* positions pagelist dropdown*/ float:left; width:15%; } #member_list-pagenav-container .pagelinks { /* positions < End>> navigation */ float:left; width:55%; } #member-list-headers-wrap { margin:3px 0 0 0; } #member-list-headers { /* Wrapper for Header for Member Name, Image and Presence */ display:block; margin: 0 0 5px 0; padding:4px 0 5px 0; border-top: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; background-color:#E5E5E5; text-indent:10px; text-align:left; } .member-name-left-header { /* Header for Member Name and Image */ float:left; width: 50%; margin: 0 0 0 0px; text-indent: 30px; font-weight:bold; } .member-presence-right-header { /* Header for Presence info */ float:left; width: 50%; margin: 0 0 0 0px; text-indent: 15px; font-weight:bold; } .member-name-left { /* Container for Member Name and Image */ float:left; margin-top: 4px; margin-bottom: 8px; padding: 0 0 0 30px; width: 48%; } .member-presence-right { /* Container for member Presence information */ float:left; width: 47%; } .member-presence-right .presence { /* Positions ONline/OFFline status of Members */ float:left; padding: 35px 0 0 20px; text-decoration:none; font-size:small; font-style:italic; font-weight:bold; } .member-presence-right .date { /* Positions the Date member was last online */ float:left; padding: 35px 0 0 20px; text-decoration:none; font-size:small; font-style:italic; font-weight:bold; } .member-presence-right .moderate-member_list { /* Positions Moderartor Functions in member list */ float:left; margin: 35px 0 0 20px; text-decoration:none; font-size:small; font-style:italic; font-weight:bold; } /* -------------------------------------------------------- =========================================================== TYPOGRAPHY error.tmpl - error messaging for all of GroupJive There are two types of messages 1.) Error 2.) Default =========================================================== ----------------------------------------------------------- */ /* -------------------------------------------------------- ERROR Messaging Detail */ #err_error-intro { /* style of Intro language constant */ font-style:italic; } #err_error-intromessage { /* style of ErrorIntro Message */ font-size: larger; font-weight:bolder; font-family: Verdana, "Lucida Sans Unicode" ; line-height:1.25; } #err_error-message { /* style of Error Message */ font-size: larger; font-weight:bolder; font-family: Verdana, "Lucida Sans Unicode" ; line-height:1.25; } /* -------------------------------------------------------- DEFAULT Messaging Details */ #def_error-intro { /* style of Default Intro language constant */ font-style:italic; } #def_error-intromessage { /* style of Default ErrorIntro Message */ font-size: larger; font-weight:bolder; font-family: Verdana, "Lucida Sans Unicode" ; line-height:1.25; } /* style of Default Message */ #def_error-message { font-size: larger; font-weight:bolder; font-family: Verdana, "Lucida Sans Unicode"; line-height:1.25; } /* -------------------------------------------------------- =========================================================== COLOR error.tmpl - error messaging for all of GroupJive There are two types of messages 1.) Error 2.) Default =========================================================== ----------------------------------------------------------- */ .errorpage-main-container { background-color:#FFCCCC; } .errorpage-inner-container { background-color:#FFFFFF; } /* -------------------------------------------------------- =========================================================== POSITIONING error.tmpl - error messaging for all of GroupJive There are two types of messages 1.) Error 2.) Default =========================================================== ----------------------------------------------------------- */ .errorpage-tmpl-wrapper { /* wrapper for both Error templates */ } .errorpage-main-container { width:100%; text-align:center; margin:0 0 0 0; padding: 1px 0 10px 0; background-color:#FFCCCC; } .errorpage-inner-container { text-align:center; background-color:#FFFFFF; margin: 9px 10px 0px 10px; padding: 10px 10px; } .error-msg-container { width:100%; text-align:center; } .error-email-moderator { text-align:right; margin:7px 15px 7px 0; } .errorlink-goback { text-align:left; } .errorlink-goback a { text-align:left; margin:0 0; } /* -------------------------------------------------------- ERROR Messaging Detail */ #err_error-intro { /* style of Intro language constant */ text-indent:20px; text-align:left; padding:0 0 10px 0; margin:7px 0; } #err_error-intromessage { /* style of ErrorIntro Message */ text-align:center; margin:7px 0; } #err_error-message { /* style of Error Message */ text-align:center; } /* -------------------------------------------------------- DEFAULT Messaging Details */ #def_error-intro { /* style of Default Intro language constant */ text-indent:20px; text-align:left; padding:0 0 10px 0; margin:7px 0; } #def_error-intromessage { /* style of Default ErrorIntro Message */ text-align:center; margin:7px 0; } /* style of Default Message */ #def_error-message { text-align:center; } /* -------------------------------------------------------- =========================================================== classes - these classes used throughout GroupJive =========================================================== ----------------------------------------------------------- */ .clearfloat { /* clear floated elements throughout template */ clear:both; } .listborderbottom { /* provide bottom border for some lists */ border-bottom: solid #cccccc 1px; } .listborderbottom-w-pad { /* provide bottom border for some lists (with padding) */ border-bottom: solid #cccccc 1px; padding: 2px 0; } .gj-required { /* Used for (* Required) notices in Forms and Fields */ font-size:x-small; } .asterisk { /* asterisk for (* Required) notices in Forms and Fields */ font-size:small; color:#CC0000; } .gjloadmarker { /* Load Data marker for AJAX functionality */ color: #FF0000; } /* TODO - - DISCOVER IF THESE MESSAGE CSS RULES ARE USED ? */ .gj-message { color:#FF0000; } .gj-needapproval { color:#FF0000; } /* -------------------------------------------------------- =========================================================== LEGACY CSS - groupjive_func.inc - LEGACY CSS =========================================================== NOTE: see groupjive_func.inc for XHTML NOTE: DO NOT RENAME these CSS rules! (reference groupjive_func.inc) ----------------------------------------------------------- */ /*----------------------------------------------- LatestMember Function - Displays newest members of Groups *** functions in groupjive_func.inc call this design ------------------------------------------------*/ #columnSmall2 { margin: 10px 0 0 0; padding:2px 0 0 0; width: 30%; float: left; } #columnSmall2 h3 { text-align:left; text-indent: 25px; } #columnSmall2 ul { padding: 0 0 0 35px; list-style-type:none; } #columnSmall2 ul li { margin-top: 20px; margin-bottom: 20px; } /*----------------------------------------------- LatestBulletin - Displays latest bulletins in Groups *** functions in groupjive_func.inc call this design ------------------------------------------------*/ #columnSmall3 { margin: 10px 0 0 0; padding: 2px 0 0 0; float: left; width: 35%; } #columnSmall3 h3 { text-align:left; text-indent: 10px; } /*----------------------------------------------- LatestForumPosts - Displays latest forum posts in Groups *** functions in groupjive_func.inc call this design ------------------------------------------------*/ #columnSmall4 { margin: 10px 0 0 0; padding:2px 0 0 0; float: left; width: 35%; } #columnSmall4 h3 { text-align:left; text-indent: 20px; } #columnSmall4 ul { padding: 0 5px 0 27px; list-style-type:none; } #columnSmall4 ul li { margin-top: 5px; margin-bottom: 8px; } /*----------------------------------------------- AJAX styling NOTE: AJAX functionality located in groupjive.html.php *** AJAX CSS is active "only when" AJAX enabled in Admin (backend) ------------------------------------------------*/ #gjsearchbox { position:absolute; margin-top:10px; margin-left:100px; width:245px; height:165px; z-index:200; background-image: url(../../images/bubble.png); display: none; } .gjclose a { text-decoration: none; font-size: 0.8em; font-weight: bold; color: #666666; border: 2px solid #cccccc; padding: 2px 4px 2px 4px; width: 5px; position: absolute; top: 25px; right: 25px; } #gjinviteresults { padding:25px; } /* -------------------------------------------------------- =========================================================== LIST AND ANCHOR CSS - LIST AND ANCHOR CSS - LIST AND ANCHOR CSS =========================================================== NOTE: This code is unique to GroupJive and notates the locations of xhtml tags and ID's in ***UNUSUAL PLACES*** EACH OF THE FOLLOWING SECTIONS NOTATES THE GROUPJIVE FILE NAME WHERE THE