Anyway to target via css those "balloons" that popup up showing some of the text of a post?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • StephenKay
    Senior Member
    • Apr 2003
    • 437

    Anyway to target via css those "balloons" that popup up showing some of the text of a post?

    When you hover over a topic in the forum list, a balloon pops up that shows some of the text in the post. I was trying to uncover the class or id to target those via css but it's difficult...

    As a secondary question, anyway to turn them off, especially for guests and not-logged in members?
  • In Omnibus
    Senior Member
    • Apr 2010
    • 2310

    #2
    .ui-tooltip might be what you're looking for.

    Comment

    • StephenKay
      Senior Member
      • Apr 2003
      • 437

      #3
      Thanks, but that does not seem to be it. Changes to background-color have no effect.

      Comment

      • delicjous
        Senior Member
        • Mar 2014
        • 499
        • 6.X

        #4
        .b-topicpreview__previewtext try this one.
        It's js generated, so you find it in the mouseover function.

        Comment

        • StephenKay
          Senior Member
          • Apr 2003
          • 437

          #5
          Thanks - that's closer! Test changes to background-color do work, but not on the whole balloon - just the text block within the balloon.

          Actually, what I was hoping to accomplish was to hide these (especially for guests/non-logged-in viewers), using css display:none; - which somewhat works, but only hides the text, a tiny empty balloon still pops up. Maybe this is an impossible dream.

          BTW, what was the .js file? I think I found the class in channel-rollup-533.js and channel-rollup-534.js, which appear to be the relevant ones. But I'm certainly not going to get into trying to edit the .js!

          Comment

          • Wayne Luke
            vBulletin Technical Support Lead
            • Aug 2000
            • 73976

            #6
            The defaults can be found in the css_b_topicpreview.css template.

            It is controlled by these two style variables:
            • primary_module_subheader_border.color
            • sticky_topic_background_color


            In the CSS class, the 'b' stands for block and the 'topicpreview' refers to the specific block of code. Applying CSS to that class .b-topicpreview should affect the entire block.

            Here is the default CSS so you can overwrite it in your css_additional.css template:
            Code:
            .b-topicpreview .ui-tooltip-content {
            	border-color: {vb:stylevar primary_module_subheader_border.color};
            	background-color: {vb:stylevar sticky_topic_background_color};
            }
            
            .b-topicpreview .b-topicpreview__previewtext {
            	font-size: 12px;
            	line-height: 1.6;
            	margin-bottom: 5px;
            }
            
            .b-topicpreview .b-topicpreview__topicinfo,
            .b-topicpreview .b-topicpreview__count,
            .b-topicpreview .b-topicpreview__lastpost {
            	font-weight: 300;
            	font-size: 9px;
            	color: #838789;
            }
            I don't recommend editing the default template because it can cause problems in upgrades. The css_additional.css template should be the most specifically applied code. If you know the class of the item, you can find out where it is referenced by searching for that class in the AdminCP under Styles -> Search in Templates.
            Translations provided by Google.

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

            Comment

            • Wayne Luke
              vBulletin Technical Support Lead
              • Aug 2000
              • 73976

              #7
              You can also find out more about the vBulletin CSS by reading the documentation on your site. Just add /special/css-examples to the end of your base vBulletin address. It won't work on this site because you need to be logged in as an administrator with template editing privileges to see the page.

              So for my test site running the latest development version of vBulletin, the URL is http://vbulletin/vb5_dev/special/css-examples

              Here is a link to the overall structure of how the CSS is written and the method in the madness: https://howchoo.com/g/mde0mjgyytj/ho...hy-its-awesome

              You should be able to turn them off for specific groups by targetting the data-usergroupid on the body tag. i.e. body[data-usergroupid="1"] .b_topicpreview {display:none}. Though I haven't tested this line.

              Though it would probably be more efficient to use a javascript override here. I don't know what that code would be.
              Last edited by Wayne Luke; Fri 8 Dec '17, 3:00pm.
              Translations provided by Google.

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

              Comment


              • StephenKay
                StephenKay commented
                Editing a comment
                Thanks, but...

                1. The link for your test site doesn't work.
                2. When I add /special/css-examples to the end of my base vBulletin address, logged in as admin, I get a blank page with "CSS Examples Page > Table Of Contents" and nothing else.
            • Wayne Luke
              vBulletin Technical Support Lead
              • Aug 2000
              • 73976

              #8
              1) The link for my test site is a private site on my own network. It isn't accessible from the outside world. That is why there is no .com or anything in the address. You wouldn't be able to see the page on that site anyway since it requires an administrator with edit template permissions.

              2) You should look at your administrator permissions and make sure they are all set to Yes. Or the page has been corrupted somehow. Running upgrade.php should restore it.
              Translations provided by Google.

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

              Comment


              • StephenKay
                StephenKay commented
                Editing a comment
                I must not have been logged in through the adminCP. Now I can see it. Thanks!
            • StephenKay
              Senior Member
              • Apr 2003
              • 437

              #9
              I figured out how to hide the topic preview balloons for guests/not-logged in viewers, for anyone who cares:

              HTML Code:
              .logged-out .b-topicpreview{
                  visibility: hidden;
              }
              display:none doesn't quite work, it leaves a little piece of the balloon still visible for some reason. And you have to apply it to a bunch of tags. This works just applied to the one tag.

              Comment

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