Announcement

Collapse
No announcement yet.

Some changes to the CMS

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

  • Some changes to the CMS

    Hi again,

    I'm preparing my website with vbulletin 5.1.5 to be in production soon, but I need some help with the last changes, I hope you can help me. I have been changing the default design of vBulletin 5 and making it more "Material Design". Now I'm trying to make that CMS looks more like a blog.

    I changed the default page to "articles" and now its working well, but there is some things that I don't like and they can't be changed in the AdminCP at all, so I'm trying to make the changes manually editing templates, CSS files or whatever I need.

    This is my CMS home page. And these are the changes I want to do:

    1.- Remove the "Show more/show less" link. I want people to click in the other link "Go to article" to read the full article (as in most blogs happen). I don't need the script that shows the full article in the home page.
    2.- If I add a video or image to the first part of the article, it is not shown in the "preview" (in home page), it is only shown when you click in "show more" or "go to article". I need the video/image to be shown in the home page (I know this is a slower load time, but I need to do it).
    3.- The cut of the article is very short. I mean the characters cut of the preview is very short, I need a longer part of the article shown in the homepage.
    4.- Finally I would like to change the size of the title, to make it bigger than it is now.

    In short, I need my articles preview to look more like this website: http://www.xatakandroid.com/


    I know there is no way to make this changes in the AdminCP, but I have been hours looking for the code to make the changes in the templates and in the code of vbulletin but I couldn't find it. I don't know if these changes can be made from template or there is a .js file for example with the script to make the "show more/show less" etc.

    If someone of the support team can tell me where is the code which modify these things I can do the changes by myself as I have enough knowledge about CSS, HTML and PHP to do it.

    Thank you in advance.
    Kind regards.

  • #2
    What do you mean there is no way to change this in the AdminCP? They're all in the template system. AdminCP > Styles & Templates > Style Manager

    All of the templates for the entire software, you can also modify any css by overriding the rules in css_additional.css

    Comment


    • #3
      I mean that there is no interface to change all these things in the CMS.

      What I'm asking is what are the template files that I have to edit to make the changes I said in my last post. I know it can be do it, but where? there is a lot of templates and I can't find the one of the CMS that I want to change.

      Comment


      • #4
        1. Add the following custom CSS.

        Code:
        .article-list .see-link, .article-list .see-link + span { display: none; }
        2. You need custom coding to change PHP code.

        3. Try AdminCP > Settings > Options > Forum Display Options (forumdisplay) > Length of Topic Preview Text

        4. Add the following custom CSS.

        Code:
        .article-list  .b-post__title { font-size: 30px; line-height: 35px; }
        There are 2 ways to add custom CSS:

        1. Sitebuilder - Edit Site ON > Style > CSS Editor > Select a Style. (Repeat for every style as needed)
        2. AdminCP - Styles & Templates > Search in Templates > Search for css_additional.css (Repeat for every style as needed)

        GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

        Comment


        • #5
          Thank you very much for your help, I'm almost done, but I had some issues, maybe you can help me.

          1.- It was solved fast, thank you.

          2.- I would like to change the PHP, but do you know which file I have to edit to make this? I think there should be a .php or .js hidding videos and images in preview topics. I can edit that but I can't found the file which contains this function.

          3.- I tried there, but it doesn't work. That is the preview of the title property. I'm trying to edit the article preview length. I think it is a script (because with the show more/show less) link you can show the whole article. I need to find the script and change the lenght of the preview, the problem is always to find the file to edit the function.

          4.- Solved, thank you.


          2 & 3 (again).- I have been investigating and I found the file: content_entry_box.js in /js directory. I used the site http://jsbeautifier.org/ to see the js file in a readable way. I think in this part is where the preview length is limited:

          Code:
          success: function(O) {
                      K.prop("disabled", false);
                      window.vBulletin.loadingIndicator.hide();
                      if (!O || O.error || !O.template || (E && !O.parsedText)) {
                          L(O && O.error ? O.error : "unknown_error");
                          return
                      }
                      var N = $("<div />").attr("id", "preview-overlay").addClass("h-hide").append($("<div />").addClass("dialog-content")).append($("<div />").addClass("b-button-group h-margin-bottom-m h-clearfix")).appendTo("body");
                      $("<ul />").addClass("conversation-list list-container stream-view activity-view h-clearfix b-post--preview").appendTo($(".dialog-content", N));
                      $("<button />").addClass("js-content-entry-preview-submit b-button b-button--primary h-right").text($(".js-content-entry-submit", M).text()).on("click", function() {
                          M.trigger("submit");
                          N.dialog("close")
                      }).appendTo($(".b-button-group", N));
                      $("<button />").addClass("js-content-entry-preview-close b-button h-right").text(vBulletin.phrase.get("close")).on("click", function() {
                          N.dialog("close")
                      }).appendTo($(".b-button-group", N));
                      $(O.template).appendTo($("ul", N));
                      $(".js-post .js-post__content-text", N).html(O.parsedText);
                      $(".dialog-content a", N).addClass("h-disabled").on("click", function() {
                          return false
                      });
                      $(".dialog-content button", N).prop("disabled", true);
          Well, I'm doing some test and now I'm not sure if the code is this or not. Anyway I'm going crazy with this, too much problems to change a character limit >_<



          5.- And other doubt by the way. I didn't know about "Style > CSS Editor" to change the CSS of the template, so I was editing the CSS files in /core/clientscript/vbulletin_css/style00006l

          In that location I found main.css, main-cssnormalization and other files that I change to customize the theme. But the problem is that everytime I change something in the template from SiteBuilder or AdminCP > Styles & templates, the name of all css files change and my files does not work until I rename it to the new ID.

          Here is an example, my files now have these names:

          - 1422433663-postbit.css
          - 1422433663-main.css
          - 1422433663-main-cssnormalization
          etc

          When I change the CSS from SiteBuilder all the CSS files change the name to:

          - 14224683753-postbit.css
          - 14224683753-main.css
          - 14224683753-main-cssnormalization.css
          etc

          So I have to change the name of my custom files again to make them work. Why this happen? Should I do the customization directly in CSS editor?

          Thank you very much for your help,
          Regards.
          Last edited by rubenban; Thu 29th Jan '15, 4:21am.

          Comment


          • #6
            Hola Ruben, te acabo de enviar un correo, ya que, al registrarse en tu foro, te llega el mensaje de contestación con caracteres en vez de mi nombre. Un saludo.

            Comment


            • #7
              3. That was for the length of preview text (not title) in forum posts. I was not sure if that is also applied in article posts.

              5. It is NOT recommended to modify the core css files. That would be a maintenance nightmare!
              To customize your site, you need to modify the stylevars and/or css_additional.css template via Sitebuilder (preferred) or AdminCP.
              Here's the full list of stylevars available:

              http://www.vbulletin.com/forum/forum...ions-full-list

              And in this link are the steps to determine if the style of a particular element on a page has stylevars or not.

              http://www.vbulletin.com/forum/forum...30#post4182030

              If a stylevar is available for an element, you customize it in the Style Variable editor in AdminCP. Otherwise you customize it in css_additional.

              GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

              Comment


              • #8
                Current list of all stylevars will be found here: http://www.vbulletin.com/forum/stylevars
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                vBulletin 5 Documentation - Updated every Friday. Report issues here.
                vBulletin 5 API - Full / Mobile
                I am not currently available for vB Messenger Chats.

                Comment


                • #9
                  Thank you everyone. I will customize all templates through SiteBuilder then, instead CSS files. Thanks for the stylevars list too.
                  Any help with the character limit of articles preview and the problem showing videos and images in the previews? I need to solve this to put my site finally in production.

                  Regards.

                  Comment


                  • #10
                    Character limit of previews (Articles, topics, etc...) is the option under Settings -> Options -> Topic Display Options (forumdisplay) -> Length of Preview Text. Default is 150 characters.
                    Translations provided by Google.

                    Wayne Luke
                    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                    vBulletin 5 Documentation - Updated every Friday. Report issues here.
                    vBulletin 5 API - Full / Mobile
                    I am not currently available for vB Messenger Chats.

                    Comment


                    • #11
                      Originally posted by Wayne Luke View Post
                      Character limit of previews (Articles, topics, etc...) is the option under Settings -> Options -> Topic Display Options (forumdisplay) -> Length of Preview Text. Default is 150 characters.
                      That's Forum Display Options not Topic Display Options and that's what I suggested in post #4 and it seems that doesn't work for Articles.

                      There is Topic Display Options (showthread) > Preview Text Length but that doesn't seem to work either.

                      GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                      Comment


                      • #12
                        That would be a bug then.
                        Translations provided by Google.

                        Wayne Luke
                        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                        vBulletin 5 Documentation - Updated every Friday. Report issues here.
                        vBulletin 5 API - Full / Mobile
                        I am not currently available for vB Messenger Chats.

                        Comment


                        • #13
                          Yes, I already tried in forumdisplay options and showthread but any of them work. Is there any php file or template where I can edit this limit until this bug is fixed?
                          Last edited by rubenban; Thu 29th Jan '15, 2:26pm.

                          Comment


                          • #14
                            It is shortened in the code. We don't support code changes to the files.
                            Translations provided by Google.

                            Wayne Luke
                            The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                            vBulletin 5 Documentation - Updated every Friday. Report issues here.
                            vBulletin 5 API - Full / Mobile
                            I am not currently available for vB Messenger Chats.

                            Comment


                            • #15
                              Again I have to solve the problem alone. I'm not happy at all with the vBulletin support. All the modifications was done to the templates through AdminCP, so it was possible. But you have to want to help to your customers:


                              SOLUTION
                              The solution is easy if you use some CSS and a little edit in the template:

                              Go to AdminCP > Styles & templates > Your Template (Edit templates)

                              Then look for "Show Templates" and then, look for this: display_contenttype_conversationreply_Text

                              Go to line 440 where you will find this:

                              PHP Code:
                              <div class="post-content restore js-post__content-text h-wordwrap" {vb:schema {vb:raw textSchema}}>
                              <
                              vb:if condition="isset($reportActivity) AND $reportActivity AND !$vmDetail">                          
                                                       {
                              vb:action parsedTextbbcodeparseNodePreview, {vb:var conversation.nodeid}}
                               <
                              vb:else />
                                                       {
                              vb:action parsedTextbbcodeparseNodeText, {vb:var conversation.nodeid}, 0, {vb:var page.contentpagenum}}
                              </
                              vb:if> 
                              You have to replace it for this code:

                              PHP Code:
                              <vb:if condition="isset($reportActivity) AND $reportActivity AND !$vmDetail">
                              <
                              div id="previewarticulo" class="post-content restore js-post__content-text h-wordwrap limitador" {vb:schema {vb:raw textSchema}}>
                              {
                              vb:action parsedTextbbcodeparseNodeText, {vb:var conversation.nodeid}, 0, {vb:var page.contentpagenum}}
                              <
                              vb:else />
                              <
                              div class="post-content restore js-post__content-text h-wordwrap" {vb:schema {vb:raw textSchema}}>
                              {
                              vb:action parsedTextbbcodeparseNodeText, {vb:var conversation.nodeid}, 0, {vb:var page.contentpagenum}}
                              </
                              vb:if> 

                              What we are doing here is first using different DIV's (one for the preview in the HOME of your page and other for the full article) and of course a different class named "limitador" to show only a preview of the article with a max-height of 550 pixels (you can edit this height in the CSS to your needs). Of course it will show images and videos in the top of your articles, without restrictions.


                              To finish, it's important to edit the template inside "CSS templates" called css_additional.css and add this line:

                              Code:
                              .limitador{overflow:hidden;max-height: 550px;}


                              And that's all, now you have a CMS that really looks like a blog, example: http://justunboxing.com/upload
                              Last edited by rubenban; Mon 9th Feb '15, 5:07am.

                              Comment

                              Related Topics

                              Collapse

                              Working...
                              X