Forums - WIP Code for Forums/Dashboard

camarilladee
camarilladee

So I've created a CSS testing grounds to test out code changes before implementing them onto my campaign.  I'm hoping to evolve my current 2+ year running game into a PBP game in the near future but the forums needed attention before I made that leap.

I've set the testing site to 'public' for the time being so you can watch and follow along if you like and (ideally) give input or suggestions.  I'm going to share the code I've used thus far (and will ideally update this post as I continue fiddling.)  I'm by no means a pro at this.  I'm self-taught and so I caution anyone who uses this to please know it comes with no guarantees of being 'solid.'  There may be better/more efficient ways to accomplish what I'm doing so... yeah.  Don't be shocked if there are some things that are redundant or maybe not super effective.

PS:  Also drop me a message if you'd like an invite to a WOD-Vampire PbP game when I'm ready to launch!

The Testing Grounds:  https://csstestinggrounds.obsidianportal.com/

The Code So Far:


/* removing title on front page */

.campaign-public-layout #campaign-summary-row .campaign-public-title-container {

height: 0px;

position: relative;

}

/* removing dragon from header */

.campaign-title,.flame-dragon{
display:none!important;
}


/*Remove Top Color Bar*/
#banner-container .highlight-container {

display: none;

}


/* Header work */

h1 {
font: 26px Metamorphous;
}

h2 {
font: 24px Metamorphous;
}

h3 {
font: 18px Metamorphous;
}

h4 {
font: 16px Metamorphous;
}

h5 {
font: 14px Metamorphous;
}

h6 {
font: 12px Metamorphous;
}

/* blockquote work */
blockquote {
font: 18px Shadows Into Light;
color: #2b3856;
text-align: center;
}


/*remove players block in sidebar*/

.sidebar-party-members.module {
display: none;
}



/*right sidebar graphics background*/
#sidebar .sidebar-party-members, .sidebar-last-updated, #sidebar .sidebar-quick-stats,
#sidebar fan-counter-container, #sidebar .stream-module-container, #sidebar .sidebar-table-of-contents,
#sidebar .adventure-log-index-filter{
background-image: linear-gradient(to bottom, #181818 , #002A50);
width: 226px;
border: 3px solid #489ebe;
padding: 10px;
margin: 20px;
border-radius: 10px;
}


/*left sidebar graphics background*/
.campaign-public-layout #campaign-nav {background-image: linear-gradient(to bottom, #181818 , #002A50); border: 3px solid #489ebe; border-radius: 10px;}


/*character page*/
.character-list-item { background: linear-gradient(23deg, #002A50 0%, #181818 100%); border: 2px solid #a9a9a9; box-shadow: 0 0 0 2px #000000;}
.character-info h4.character-name.title a {color:white;}
.character-info h4.character-name.title a:hover {color:#489ebe; }
.right-side-fade-out {display:none;}
.character-quick-search {background-image: linear-gradient(to bottom, #181818 , #002A50);}
.filter-options { background-image: linear-gradient(to bottom, #181818 , #002A50); color: #ffffff; }


/*Forum Post Background Color*/
.campaign-forum-index .forum-page-content {background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/263806/assets/1178691/metal-back.jpg?1622998758); width: 100%;}

/*Forum Page Header*/
.campaign-forum-index .forum-page-header{background-image: linear-gradient(to bottom, #555651 , #000000); }

/*Behind Forum Navigation*/
.campaign-forum-index .topics-section{background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/263806/assets/1178691/metal-back.jpg?1622998758); }

/*Active Forum or Topic*/
.campaign-forum-index .subforums-and-topics .active.topic .background {background: #002A50; color:#E8E8E8;}

/*Inactive Forum or Topic*/
.campaign-forum-index .subforums-and-topics .subforum .background {background: #2A2A2A; color:#E8E8E8;}

/*Forum Post - User Information Section*/
.forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata {background-image: linear-gradient(to bottom, #181818 , #002A50);}

/*Forum Post - Actual Text Section*/
.forum-page-content .posts-section .post-section-wrapper .posts .post {background: #181818; border: 3px solid #489ebe; border-radius: 5px;}

/*Forum Avatar Size*/
.forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata .user-avatar.large-1.small-2.columns{width: 75px; display: block;}

/*Forum Breadcrumb Links*/
.row.forum-page-header .small-11.columns h2.name {font-size: 10px;}

/*Forum Post - Reply Section*/
.forum-page-content .posts-section .post-section-wrapper .row .reply-controls.small-12.colums{background: #E8E8E8; border-style: dotted; border-color: #489ebe; border-width: thick; padding: 10px;}

/*Forum Top of Post Title Size*/
.campaign-forum-index .posts-section .title, .campaign-forum-manage .posts-section .title, .campaign-forum-edit .posts-section .title {font-size: 14px; color: #ffffff;}

/*Dashboard Top Background Where Campaign Banner Is*/
.row.title-row{background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/263806/assets/1178691/metal-back.jpg?1622998758);}

/*Dashboard Top Banner*/
.row.title-row{height: 0px;}

/*Dashboard Nav Menu Make Smaller*/
.campaign-dashboard-layout #dashboard-main-nav{ width: 75px; }
.campaign-dashboard-layout #dashboard-main-nav ul li .nav-icon { width: 100%; font-size: 15px; }
.campaign-dashboard-layout #dashboard-main-nav ul li .nav-text { display: none; }
.campaign-dashboard-layout .main-content { padding-left: 75px; }

/*Subforum and Topic Names Color*/
.campaign-forum-index li.topic a, .campaign-forum-index li.subforum a, .campaign-forum-manage li.topic a, .campaign-forum-manage li.subforum a, .campaign-forum-edit li.topic a, .campaign-forum-edit li.subforum a{color: #ffffff; font-size: 12px;}

(Post is too long to post so TBC in next post.)

Comments

  • camarilladee
    camarilladee
    Posts: 22

    Problems I'm Running Into:  


    • Page jumps to most recent post in a forum on mobile version making it hard to browse forums.  I've added request here in the community for a 'jump to top' link added to forums code (maybe at bottom of post DIV) so that users can just jump to top of page on mobile versions and click to the thread they want to visit easily (without miles of scrolling.)

    • Adjusting padding like this... 

      .campaign-dashboard-layout .main-content { padding-left: 75px; }

      ... did fix the issue of the content being too far right after I shrunk down my dashboard menu.  Sadly on the mobile view this has created a gap on the left side of the screen where the menu would normally sit.  (Click Here To View Screen Shot From Mobile Phone)  Not sure how to keep the nice neat look on desktop while also fixing it for mobile.


    • Adjustments I'd like to make, but can't be sure if it's possible yet.  I've doctored up a picture to show these.  (CLICK HERE TO VIEW SCREENSHOT OF EDITS I HOPE TO DO)  Including changing the width of subforums/topics & post size ratio (if I can do it without messing up the mobile) I'm already having an issue with the mobile (see the previous bullet) so I don't want more headaches.  Heck, I'd love to make each post look like that one I labeled my ideal, but not sure it's possible without HTML edits which we can't do.  If that's not possible I figure I'd like to put the username vertically centered and find a way to bring the text of each post flush with the left side of the div it's inside.


    I know I'll have more edits and updates as time goes on, maybe this will help some of you tackling the forums and dashboard layout.  If anyone has done these sorts of edits before and is willing to share, I'm all ears and would love to see what has worked for your group (especially if you're doing play-by-post successfully here on OP!)

    Thanks in advance!

    -Dee

  • thaen
    thaen
    Posts: 1,059

    Looks like you're really diving in!

    I think the csstestinggrounds Campaign is still set to Private?

    For the changes where the desktop view is affecting the mobile view, you can use this (it's what the site already uses when you switch to mobile):

    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    In case you don't know, on the Chrome Developer Tools in the upper left hand corner, if you click the phone icon, it shows you what the webpage will look like on a smaller device, and you can choose which device you want to scale it for.

    image

     

    For the layout of the forum post with the pic on top and then the name and date underneath, I think you can get really close to that.  You want to float the ".post-content" to the right (and shrink the width).  And float the ".post-metadata" to the left (and shrink the width).  That should fit them both on the same line.  Then you might need to change the "display" of the pic, name, and date divs (I tried changing display to "content" in Chrome Developer Tools and that seemed to work).  Try some of that and see how close you get, and feel free to post again if you get stuck.  Here's what it looked like for those changes for me:

    image

     

    Lastly, if you're going to be doing a PbP, and you want to make it public so visitors can follow along, we have a feature that's still in beta that enables you to make a specific forum thread Public, so that any visitors can read the thread, but not post.  Let me know if you want me to add that beta feature to your account.  Here's an example of how it looks:

    https://tobuyafatpig.obsidianportal.com/public-forum/ic-in-character?load_all=true

     

    Obsidian Portal Developer

  • camarilladee
    camarilladee
    Posts: 22

    It was still set to private, sorry!

    Thanks for the tip about using chrome to inspect mobile view.  I've been using my phone.  

  • camarilladee
    camarilladee
    Posts: 22

    Part of my post disappeared just now.  The media trick worked like a charm.  This is the code I added:


    /*Forums View on Mobile Device*/
    @media only screen and (max-width: 770px) {
    .campaign-dashboard-layout .main-content { padding-left: 0px; }
    }

     

  • camarilladee
    camarilladee
    Posts: 22

    /*Forum Post Avatar*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata .user-avatar.large-1.small-2.columns{display: contents;}

    /*Forum Post Username*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata .user-login.large-7.columns.hide-for-small{display: contents;}

    /*Forum Post Time and Date Display*/
    .campaign-forum-index .post-metadata .time-and-controls, .campaign-forum-manage .post-metadata .time-and-controls, .campaign-forum-edit .post-metadata .time-and-controls{display: contents;}

    /*Forum Post - User Information Section*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata {background-image: linear-gradient(to bottom, #002A50 , #181818); float: left; width: 10%;}

    /*Forum Post Content - Float Right*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-content {float: right; width: 90%;}

    It almost gets me there.  I might be writing the css wrong though.  Above is what I wrote and the picture CLICK HERE is what I get.

    I'm bolting out the door to my day job but I'll check back later.  Thanks so much for taking your time to advise!  :)  Maybe what I'm hoping for isn't possible but man it feels like you got me pretty darn close.

    :)

  • thaen
    thaen
    Posts: 1,059

    So close!

    I think I was wrong on setting "display" to "contents".  I think you want display to be "block" for each of those.

    Then for ".user-avatar" set a width of 100% (or whatever ... it just needs a width to show up).

    Then for ".time-and-controls" also set a width of 100% (it's being squashed by a width of 33% I think).

    Let me know how that does.

    Obsidian Portal Developer

  • camarilladee
    camarilladee
    Posts: 22

    Okay so with the changes you've mentioned I'm pretty much there on the desktop versions but mobile... not so much.  I think I found the reason and it's empty column spacer maybe that is causing the issue (the same one who is making a wide space between meta data and content.

    I think the code relating to the spacer is - 


    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-content .small-offset-2 {
    position: relative;
    margin-left: 16.66667%;
    }


    .small-10 {
    position: relative;
    width: 83.33333%;
    }

    Having played with it some I keep realizing more and more why the mobile view is best up and down (simply put with so many screen sizes the meta data beside the content of the post is a constant battle to make it look good on each screen size.)

    So maybe mobile version is best left as metadata over top of content?  If this is true, can that be achieved by doing the @ Mobile code w/ the original css as custom code so that the desktop version remains side by side but it keeps the mobile version as top down?  

    Here's what both look like, followed by the code changes I made to get this look.

    CLICK FOR A VIEW OF MOBILE

    CLICK FOR A VIEW OF DESKTOP

    The Code:


    /*Forums View on Mobile Device*/
    @media only screen and (max-width: 670px) {
    .campaign-dashboard-layout .main-content { padding-left: 0px; }
    }




    /*Forum Post Avatar*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata .user-avatar.large-1.small-2.columns{display: block; width: 100%;}

    /*Forum Post Username*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata .user-login.large-7.columns.hide-for-small{display: block;}

    /*Forum Post Time and Date Display*/
    .campaign-forum-index .post-metadata .time-and-controls, .campaign-forum-manage .post-metadata .time-and-controls, .campaign-forum-edit .post-metadata .time-and-controls{display: block; width: 100%}

    /*Forum Post - User Information Section*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata {background-image: linear-gradient(to bottom, #002A50 , #181818); float: left; width: 120px;}

    /*Forum Post Content - Float Right*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-content {float: right; width: 80%;}

    /*Forum Post Content - Margin Between User Info & Post*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-content .small-offset-2 {
    position: relative;
    margin-left: 0px;
    padding: 3px;
    }

    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-content .small-10 {
    position: relative;
    width: 99%;
    }

     

     

  • camarilladee
    camarilladee
    Posts: 22

    @Thaen - please don't feel you must (I know you got other things you're doing too!) but if you want to view the code directly, I've sent you an invite and I'll promote you to GM.  Of course, anything we figure out I'll share here and share the full code edits to the community on a wiki page when we're done.

  • thaen
    thaen
    Posts: 1,059

    Thanks for that invite!  Accepted, but I don't think we need it.  I tried your CSS in my test Campaign, and I think all you need to do is take the @media, switch it to a min-width, and wrap it around the stuff you want to show only for desktop.  Like this ...



    /*Forums View on Desktop*/
    @media only screen and (min-width: 670px) {


    /*Forum Post Avatar*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata .user-avatar.large-1.small-2.columns{display: block; width: 100%;}

    /*Forum Post Username*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata .user-login.large-7.columns.hide-for-small{display: block;}

    /*Forum Post Time and Date Display*/
    .campaign-forum-index .post-metadata .time-and-controls, .campaign-forum-manage .post-metadata .time-and-controls, .campaign-forum-edit .post-metadata .time-and-controls{display: block; width: 100%}

    /*Forum Post - User Information Section*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-metadata {background-image: linear-gradient(to bottom, #002A50 , #181818); float: left; width: 120px;}

    /*Forum Post Content - Float Right*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-content {float: right; width: 80%;}

    /*Forum Post Content - Margin Between User Info & Post*/
    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-content .small-offset-2 {
    position: relative;
    margin-left: 0px;
    padding: 3px;
    }

    .forum-page-content .posts-section .post-section-wrapper .posts .post .row.post-content .small-10 {
    position: relative;
    width: 99%;
    }


    }

     

    Obsidian Portal Developer

  • camarilladee
    camarilladee
    Posts: 22

    Thaen you're a freaking champ!  Thank you for your help.  I've shared my completed CSS and put it up on the main wiki page for the testing site so folks can snag it completed rather than grabbing bits through the whole thread.  I hope it helps everyone out as much as your posts (and Thaen your replies here) have helped me.

    View the CSS Here.

  • thaen
    thaen
    Posts: 1,059

    You did all the work!  I'm just the henchman.  : )

    Huzzah!!

    Obsidian Portal Developer

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions