Announcement

Collapse
No announcement yet.

New Article Layout - Feedback Please

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • New Article Layout - Feedback Please

    I recently released a new article layout for my CMS. There are a couple of custom components but wanted to get your general feedback.
    http://www.nationofblue.com/stacey-p...-warmups-9825/

    A couple of things I would still like to do:
    1. Figure out a better way to handle the vbseo likes system with placement near the top.
    2. A better style for my similar articles plugin.
    sigpic
    Nation of Blue - Kentucky Wildcats Sports


    Some CMS Goodness: Add Avatar to Article

  • #2
    That looks really nice and clean!

    Do all of your articles have an image associated with them? If so, a possibility for similar articles would be to show 5 images side by side with descriptions below each image.

    Comment


    • #3
      I agree it looks good!

      The only thing I would maybe change is lose the avatar for the author - it just seems out of place?

      Comment


      • #4
        The Avatar does seem to take up too much space at the top. Maybe use a smaller version. Looks good though.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment


        • #5
          Perhaps something like...

          Click image for larger version

Name:	Capture.PNG
Views:	1
Size:	24.3 KB
ID:	3685836

          Comment


          • #6
            I'd try the suggestion above as otherwise it is taking up too much space. Other than that, it's looking good!
            Vote for:

            - *Admin Settable Paid Subscription Reminder Timeframe*
            -
            *PM - Add ability to reply to originator only*
            - Add Admin ability to auto-subscribe users to specific channel(s)
            - "Quick Route" Interface...

            Comment


            • #7
              Interesting concept....I LIKE IT! I'll certainly put this on my to do list. I'm not too good so this ought to keep me busy for the weekend!

              I also like the feedback regarding the similar articles. I'll look into that as well.
              sigpic
              Nation of Blue - Kentucky Wildcats Sports


              Some CMS Goodness: Add Avatar to Article

              Comment


              • #8
                Did some playing in Firebug, and came up with this:

                Click image for larger version

Name:	Capture.jpg
Views:	1
Size:	62.4 KB
ID:	3685851

                Here is the code (I took out the iframe code)...

                HTML Code:
                 <div class="fullwidth" style="padding: 5px 0px 0px 3px; margin: 0px 0px -60px 0px;"> 
                    <div style="float: left; padding: 5px 0px 0px 0px;"> 
                        <span style="color: #7a7a7a; font-size: 11px;">          November 2nd, 2011  06:32 PM</span> 
                    </div> 
                    <div style="float: right;"> 
                        <div id="twta">
                                 <iframe>         [snip]         </iframe>
                            <script type="text/javascript" src="http://platform.twitter.com/widgets.js">
                            </script>
                        </div> 
                        <div id="googa">
                            <div style="height: 20px; width: 90px; display: inline-block; text-indent: 0pt; margin: 0pt; padding: 0pt; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline;" id="___plusone_0">
                                  <iframe>         [snip]         </iframe>
                             </div>
                         </div> 
                         <div id="fba">
                              <fb:like class=" fb_edge_widget_with_comment fb_iframe_widget" href="http%3A%2F%2Fwww.nationofblue.com%2Fcontent.php%3Fr%3D9825-stacey-poole-not-warmups" layout="button_count">
                                  <span>
                                      <iframe>         [snip]         </iframe>
                                  </span>
                              </fb:like> 
                          </div> 
                      </div>
                      <br>
                      <br> 
                      <div style="width:95%;" class="cms_title"> 
                          <h1 class="article_header_title">
                              <span>Stacey Poole Not in Warmups</span> 
                          </h1>
                          <h2 class="article_description">Poole was not in warmups before Transylvania this evening.</h2> 
                      </div> 
                      <div style="float: right; position: relative; top: -50px; z-index:10"> 
                          <div style="float: right;"> 
                              <img title="Scott Anderson" src="http://img.nobstatic.com/images/avatars/thumbs/avatar166_5.gif" alt="Scott Anderson"> 
                          </div> 
                          <div style="float: right; padding: 10px 5px 0px 0px;"> 
                              <span style="color: #7a7a7a; font-size: 11px;">
                                  By Scott Anderson<br>
                                  NationofBlue.com
                              </span> 
                          </div> 
                      </div> 
                      <div style="float: right; padding: 0px 5px 0px 0px; margin: 0px -90px 0px 0px"> 
                          <span class="page-actions"> 
                              <a href="http://www.nationofblue.com/stacey-poole-not-warmups-9825/#comments" class="comment-link" rel="nofollow">Comments</a> 
                              <a href="http://www.nationofblue.com/stacey-poole-not-warmups-9825/#comments" class="comment-count" rel="nofollow">
                                  <span>0</span>
                              </a> 
                          </span> 
                      </div> 
                      <div class="cms_clear"></div> 
                 </div>

                Comment


                • #9
                  Gave it a shot and worked great except when I had a longer title and description:

                  Click image for larger version

Name:	screenie.jpg
Views:	1
Size:	67.1 KB
ID:	3685893
                  sigpic
                  Nation of Blue - Kentucky Wildcats Sports


                  Some CMS Goodness: Add Avatar to Article

                  Comment


                  • #10
                    Doh! Hmm... Place comments bubble on the left (reverse the image), and put the author under the line where the comments bubble currently is. Or, just make sure your titles are shorter.

                    Looks good though, otherwise!

                    Comment


                    • #11
                      I kept plugging away at this because I liked your suggestion so much. What I decided on was to move my border to another div and then limit the description to 80% width which keeps it all out of the avatar and author info. Thanks!!!
                      http://www.nationofblue.com/driver-s...st-night-9915/
                      sigpic
                      Nation of Blue - Kentucky Wildcats Sports


                      Some CMS Goodness: Add Avatar to Article

                      Comment


                      • #12
                        End result looks really good! One of these days I'll work on customizing my own.

                        Comment


                        • #13
                          Originally posted by bszopi View Post
                          One of these days I'll work on customizing my own.
                          So am I

                          Comment


                          • #14
                            Need to find a better integration for the vbseo like and my similar articles bit.
                            sigpic
                            Nation of Blue - Kentucky Wildcats Sports


                            Some CMS Goodness: Add Avatar to Article

                            Comment


                            • #15
                              Why not put them near the bottom of the article instead? Person reads the article, gets to the bottom, wants to share it, and the buttons are right there instead of them having to go back to the top.

                              Nicely done, btw.

                              Please don't PM or VM me for support - I only help out in the threads.
                              vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                              Want help modifying your vbulletin forum? Head on over to vbulletin.org
                              If I post CSS and you don't know where it goes, throw it into the additional.css template.

                              W3Schools &lt;- awesome site for html/css help

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X