Announcement

Collapse
No announcement yet.

vBCloud Tips & Tricks

Collapse
This topic is closed.
X
This is a sticky topic.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • vBCloud Tips & Tricks

    Note - This topic has been updated to reflect changes in vB 5.3.0. This document may get edited frequently so please check back every so often if you are interested in tips and tricks.

    This thread will be used to share some interesting tips and ticks with the community. It will be maintained by support staff so if you have found a neat trick please post it in its own topic and we'll copy or link to it. I just want to keep this topic clear of off-topic chatter.

    Tips

    After creating your vBCloud account I suggest you do the following-
    1. Go to your Admin CP -> Settings -> Options -> Site Name / URL / Contact Details. Be sure you enter a name for your forum as this will be used in welcome emails sent to new users. Also check out the other settings on the page, you may have interest in later.
    2. Set your timezone (the timezone for your Administrator account.) When creating your account the timezone is not set so you get the default Western Europe timezone. In the front end (your forum) click on the drop down menu by your username on the top right of the page, choose User Settings. Click on the "Account" tab and scroll down to Time Zone settings and set your timezone. This will make sure the times are correct when you are logged in. You can also check other settings under the Account and Profile tabs you may want to edit.
    3. Set the default timezone for your entire forum. (While each user can have a custom timezone the forum timezone is used for guests so choose a timezone most of your visitors will likely be in) In Admin CP -> Settings -> Options -> Date and Time Options you can set the default timezone. Also check out the other settings here if there is more you wish to customize.
    4. If you want larger and more detailed image attachments - Adjust the maximum dimensions and file sizes for attached files and images. Go to the Admin CP -> Attachments _> Attachment Manager. You should edit each of the Image file types (JPG, GIF, and PNG) and increase the max height and width to larger values. I suggest 2048 for each I also suggest increasing the max file size. 2MB would equal 2097152 bytes which is a decent value in my opinion. This is also a good time to add extensions for any other file types you want to allow uploading of.


    Tricks
    1. Although you don't have FTP access you can upload custom images in the Admin CP using the vBCloud File Manager -> Manage Files page. The purpose of this is to allow you to upload images you can use in CSS and Style Variables to customize the look of your site.
    2. You can also use this option to upload a custom favicon (this is the small image that appears next to the website URL in most web browsers.) By default this is a vBulletin logo. A favicon file should be a small 16x16 or 32x32 pixel PNG image. It must be either 8 bit (256 colors) or 24 bit of color depth. Upload the image and then copy the URL to the image and paste in the facivon Style Variable. The favicon Style Variable is accessible in Admin CP -> Styles & Templates -> Style Manager -> Style Variable Editor (for your style) -> search for favicon. Highlight the favicon style variable and on the right side of the page paste in the full URL to the png image you uploaded. Now this will be the favicon on the front end pages of your site. (Note- Admin CP pages will continue to have the default vBulletin favicon, these cannot be changed.) For more details on changing the favicon click here.


    More will be coming. Enjoy!
    Last edited by Joe D.; Fri 7th Apr '17, 1:35pm. Reason: Updated for 5.3.0

  • #2
    Adding an additional.css stylesheet to your vBCloud site - http://mudslide.vbulletin.net/blogs/...r-vbcloud-site

    Update: As of VB 5.1.2 you can now direcrly access the css_additional.css template in Site Builder. This work-around is no longer necessary.
    Last edited by Joe D.; Thu 31st Jul '14, 10:45am. Reason: Update for 5.1.2

    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 <- awesome site for html/css help

    Comment


    • #3
      Here is a quick way to add Facebook Like, Twitter Tweet, and Google +1 buttons to all your pages.

      In Admin CP go to Notices on the side menu -> Add New Notice

      Give a new notice a title like: Share Buttons

      In the Notice HTML paste the following code:

      Code:
      <div id="fb-root"></div>
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
      
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://twitter.com/share" class="twitter-share-button" data-via="twitterapi" data-lang="en">Tweet</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      
      <!-- Place this tag where you want the +1 button to render. -->
      <div class="g-plusone" data-size="medium"></div>
      <!-- Place this tag after the last +1 button tag. -->
      <script type="text/javascript">
        (function() {
          var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
          po.src = 'https://apis.google.com/js/platform.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
      </script>
      Make the the notice settings as follows-
      Active - Yes
      Persistent - Yes
      Dismissible - No

      Then, unless you want to restrict it to certain usergroups, forums, or styles, just hit Save at the bottom of the page and you should be all set. It should begin working immediately and look something like-

      Comment


      • #4
        Here is an article to put the share buttons in the header instead of an a notice: http://www.vbulletin.org/forum/showthread.php?t=309117 OR http://sedona.vbulletin.net/forum/vb...-sedona-forums

        Last edited by Joe D.; Mon 3rd Mar '14, 8:59am.

        Comment


        • #5
          Add additional pages (like a Privacy Policy) to your site and link it in the footer - http://www.vbulletin.com/forum/artic...-in-the-footer

          Comment


          • #6
            Adding a Google Calendar - How to: http://www.vbulletin.com/forum/artic...alendar-to-vb5

            Live example: http://sedona.vbulletin.net/SedonaCalendar
            Last edited by Joe D.; Fri 7th Apr '17, 1:36pm.

            Comment


            • #7
              Enable Facebook Connect
              (Also applicable to VB5 & VB4 Download Versions)

              Updated instructions available here: https://www.vbulletin.com/forum/node/4320865
              Last edited by Joe D.; Tue 12th May '15, 4:03am.

              Comment


              • #8
                Set custom Apple Touch Icon
                Icon used for iPhone/iPad and other mobile devices

                Currently if an Apple iOS user makes a shortcut to your vBCloud site (or any vBulletin site) they get an ugly default icon as the icon for the site. As an Administrator you must specify a custom image for your icon.

                Step 1. You must create and upload a 57 pixel x 57 pixel (square) png image using the vBCloud Upload CSS Manage Files tool in the Admin CP. Copy the image URL to your clipboard.

                Step 2. Go to your Admin CP -> Settings -> Options -> Google Analytics We have to cheat a little here. If it is not already set to enabled, change the Enable Google Analytics... to Yes.

                Step 3. If you do not use Google Analytics and the Google Analytics JavaScript code box is empty, paste in the following code-
                Code:
                </script>
                <link rel="apple-touch-icon" href="http://www.domain.com/path/to/image/apple-icon.png"/>
                <script>
                Note- Yes the <script> code is the opposite of what you are used to seeing. The closing tag comes first and the opening tag comes later. This is as intended. Remember, we are cheating. vBulletin has created an opening and closing <script> tag automatically. We must close the first one and open the second one so as not to break the source code of the page. We can also put our custom code in-between the two scripts.This is an ideal place to add any lines you must manually add to the page header.

                Now if you already have Google Analytics code (or other JavaScript) in this box then simply paste the above code below anything else already in the box.

                Step 4. Save Changes

                Click image for larger version

Name:	vbcloud-apple-touch-icon.jpg
Views:	1
Size:	77.1 KB
ID:	4065426

                You can test this by creating an icon for the site- http://sedona.vbulletin.net/ - You should see this image as the custom icon-



                Last edited by Joe D.; Thu 31st Jul '14, 10:44am. Reason: Updated for VB 5.1.2.

                Comment


                • #9
                  If you want to remove all traces of the "Like" functionality (The Like Button, the Like meter below the avatar, and the number of Likes in the topic list) add the following code to your css_additional.css template:

                  Code:
                  .b-post-control__bubble-flyout-container { display:none; }
                  .b-meter { display:none; }
                  .votes-count {display:none; }

                  Comment


                  • #10
                    How to customize the Reputation Images (pips) under the Avatars.

                    These instructions are for both vBCloud and VB5 in general.

                    In VB5 the images under the avatars showing the amount of a user's reputation (number of Likes they've received) can be customized using basic CSS.

                    The class of the greyed out images is:

                    Code:
                    b-meter__bar
                    and the class of the red images (indicating that pip is active) is:

                    Code:
                    b-meter__bar--selected
                    The red images are a background image which can be overridden.

                    As an example adding the following CSS to the css_additional.css template will replace the pips with small stars, yellow to show active stars and greyed out to show inactive stars.

                    Code:
                    .b-meter__bar {
                      background: none;
                      width: 10px;
                      height: 10px;
                      background-image: url(http://i.imgur.com/dXWoWyg.png);
                    }
                    
                    .b-meter__bar--selected {
                      background: none;
                      width: 10px;
                      height: 10px;
                      background-image: url(http://i.imgur.com/QxNevO5.png);
                    }
                    If you understand CSS you will see how easily you can customize the images. If you don't understand CSS than I will explain the basics to get you started. The top half deals with replacing the grey pips and the bottom half deals with replacing the red pips.

                    The image to the greyed out stars for the top half is: http://i.imgur.com/dXWoWyg.png

                    For the purposes of this example I uploaded the images to a free image host. If you use the download version of VB5 you would be better off uploading your custom images to your own server and you would replace this URL with a direct link to the image on your server. If you use vBCloud you can still upload the image directly to your server using the file upload tool in your Admin CP. Copy the URL it gives you after the image is uploaded and replace the URL in the code above with your own image. You are of course free to use a free host like imugur.com as well.

                    I have explicitly set the width and height to the exact dimensions of the custom image. You do not want to increase the width much beyond 10 pixels because it will not look good if the images don't fit on one line. It is important to note if you make the images larger than the default values you risk breaking the style in responsive mode. I have tested my 10px by 10px example and it looks good for me on small screens as well but it is not guaranteed.

                    So basically that is it. You can customize the images to anything you want and the sizes within reason.

                    Example of the above code in action: Click image for larger version

Name:	sedona-joe-rep.png
Views:	1
Size:	39.9 KB
ID:	4321862



                    As a reminder vBCloud users can add code to the css_additional.css template by turning on Site Builder in the front end. VB5 Download users can do the same or add code directly into the template editor in the Admin CP.

                    1. Press Style
                    2. Choose CSS Editor Tab
                    3. Select the style you use from the drop down menu. (If you use multiple styles repeat all steps for each one)
                    4. Paste in the CSS code you want into the big box. If there is already code in the box, add your new code to the bottom.

                    Save Changes when done.
                    Click image for larger version

Name:	vbcloud-additional-css.jpg
Views:	1
Size:	79.3 KB
ID:	4321863


                    Last edited by Joe D.; Mon 25th May '15, 2:03pm.

                    Comment


                    • #11
                      To setup a Favicon on vBCloud

                      1) First create a suitable favicon and save it on your local computer. This will be either a .png or .ico image file. You can use this website to help create the icon. Usually this is a 16 x 16 pixel image.

                      2) Go to your Admin CP and use your vBCloud Files Manager and click the Choose File button to find the image on your local computer and upload it.

                      Click image for larger version

Name:	vb5-cloud-files-manager.jpg
Views:	1
Size:	171.3 KB
ID:	4325338


                      3) After it is uploaded highlight the URL to the image with your mouse and "copy" the URL to your clipboard.

                      4) Now in the Admin CP go to Styles & Templates -> Style Manager

                      If you are using a vBulletin Default style or another full fledged style click the Go button next to the drop down menu to go to Style Variable Editor.

                      Click image for larger version

Name:	vb5-cloud-style-manager.jpg
Views:	1
Size:	159.6 KB
ID:	4325339

                      5) Scroll down to the Image Paths group and click on the favicon style variable in the left side menu. On the right size will load the settings for the file URL. Paste in the URL to the favicon image you copied earlier and click Save.

                      Click image for larger version

Name:	vb5-cloud-favicon.jpg
Views:	1
Size:	154.5 KB
ID:	4325340


                      Once you save changes it may take several minutes for your favicon to change on your live site. Browsers are notoriously slow at changing the favicon, clearing your cache or hitting F5 while refreshing a forum page should help. Be aware the favicon will only change on your "front end" pages. The favicon in your Admin CP and Mod CP cannot be changed.


                      NOTE: If you are using a "Theme" as your Style you cannot edit the Style Variables of a Theme. You must first create a Child Style of the Theme. Set that new Child Style as the Default Style for your site. You can then edit the Style Variables of that Child Style as you can any other full style.

                      To create a Child Style of a Theme go to the Admin CP -> Styles & Templates -> Style Manager -> Add New Style. Choose the Theme you want to use, give the new style a unique title, and set a display order. The value doesn't matter as long as it is 1 or greater. Save changes. Then go to the Admin CP -> Settings -> Options -> Style and Language Settings and select this new style for the Default Style and save changes again.

                      Once you have made this new style the default style you can continue from Step 4 above.

                      Comment


                      • #12
                        Local Video Upload and Playback via vBCloud

                        Sometimes you don't want to upload video to sites like YouTube and embed them in the forum. If you really need local video playback it is possible. (This is also applicable to VB5 sites that are not vBCloud.)

                        The first step is to add the mp4 (and possibly other video formats) to the list of allowed attachment types.

                        The second step is to create a custom BBCode that takes advantage of the HTML5 video tag that most modern browsers support.

                        This will show you how to do both of these and finally how to use this combination to display local, embedded, video as in this example.

                        Step 1 - Adding new attachment extensions.

                        The mp4 format is compatible with most modern browsers so that is the example I am providing, however if you prefer other extensions are possible. See more on browser video support.

                        1) Log into the Admin CP, go to attachments on the side menu, expand it, and click on Attachment Type Manager.
                        Click image for larger version

Name:	vbcloud-attachments01.jpg
Views:	1
Size:	161.0 KB
ID:	4327670


                        2) In the Extension box enter: mp4

                        3) In the Max file-size enter the largest file size you wish to allow in bytes. 10485760 is 10 MB which is the value I chose. The maximum file size allowed is displayed on the main page of your AdminCP with other server details. On most vBCloud sites the maximum upload size is 15 MB. This value cannot be changed therefore this size is also the maximum video size you can upload. The value set here must be equal to or less than this maximum value.

                        4) In the Mime Type & Headers enter: video/mp4

                        5) Click the Save button.


                        Create Custom Video BB Code

                        1) In the Admin CP go to Custom BB Codes, expand it, and click on Add New BB Code.
                        Click image for larger version

Name:	vbcloud-attachments02.jpg
Views:	1
Size:	220.1 KB
ID:	4327671


                        2) For title enter: mp4

                        3) For BB Code Tag Name enter: mp4

                        4) For Replacement copy and paste in the following:

                        Code:
                        <video width="640" height="480" controls>
                          <source src="{param}" type="video/mp4">
                        This browser does not support this video.
                        </video>
                        Note: Set a width and height value that works for you. You may even create additional BB Codes like widemp4 or tallmp4 and use the one that best fits the video you may have, that is up to you. For this example I chose 640x480 a standard YouTube like value. You may also customize the text that only displays if the browser does not support the HTML 5 Video Tag.

                        5) For the Example box enter: None. (If you want to provide a valid example that is fine too, you can change it after you see how it works.)

                        6) Description: Enter some basic description here. I went with: Allows embedding of an MP4 video file.

                        7) Leave "Use Option" set to No but change all the other settings here to "Yes."

                        8) Press the Save button.

                        Now that that we have created the new BB Code and previously added the MP4 attachment we can can go create a new post on our forum and upload a file attachment in the usual way. (Click the attachment icon in the editor, then the Upload Attachments button, then browse to the file on your computer and upload.) Let the file upload- as videos tend to be larger files it may take longer than you are used to waiting for the file to upload. If the file you chose is too large you will receive an error.

                        Now make your post. The video will be attached with a link below the post but not visible. This is normal.

                        After the post has been submitted and posted bring the mouse over the video link and right click with your browser. Choose the option "Copy Link Address" (the exact wording may vary from browser to browser.) This will copy the direct URL to the attachment to your clipboard. The link will be something like: http://www.example.com/filedata/fetch?id=999.

                        Now Edit the post you just made. Go to where you want to place the video and paste in the URL you just copied. Manually type the BB Code on either side so you end up with something like:

                        Code:
                        [mp4]http://www.example.com/filedata/fetch?id=999[/mp4]
                        Now save the changes.

                        If all has been done correctly you should see the video as in the original example. It is normal that it may take some time to load.

                        This isn't as ideal as embedding YouTube but it works and keeps all video files on your own (or vBCloud's) server.

                        Note: The same BB Code can be used to embed mp4 files on other servers, they do not need to be attachments. Any valid URL to an mp4 file should work.

                        Another Note: The video will only work if the user viewing it has the permission to download file attachments. If you don't allow some usergroups to download attachments they will not be able to view these videos.

                        Final working example:

                        Click image for larger version

Name:	vbcloud-attachments03.jpg
Views:	1
Size:	67.2 KB
ID:	4327672
                        Last edited by Joe D.; Sun 23rd Aug '15, 10:54am.

                        Comment


                        • #13
                          This is a neat trick if you want a large, centered, background image that stretches to fit the browser's background and doesn't scroll with the page (it remains fixed.)

                          In the Style Variable editor where you supply the background url for the body_background style variable instead of just supplying the background URL, include the rest of the needed CSS. For example I used the following:

                          Code:
                          url(core/css/0/0/0/0/9/5/images/sedona-bk.jpg);  background-size: cover;  background-attachment: fixed;
                          There's probably a limit to how much custom CSS you can use but just these couple of extra properties save a lot of time to set a modern, fixed, cover image background.

                          Click image for larger versionName:	sedona bk style variables.pngViews:	1Size:	126.9 KBID:	4371625

                          Comment

                          Working...
                          X