Announcement

Collapse
No announcement yet.

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

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

  • 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?

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

    Comment


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

      Comment


      • #4
        .b-topicpreview__previewtext try this one.
        It's js generated, so you find it in the mouseover function.
        vBulletin-forum.de | Das deutschsprachige vBulletin 5 Forum! | Widgets, Mods und Anleitungen auf deutsch.
        Team online, Latest Profile-Visitors, Disable-Postcount, Auto-close Threads, Latest Likes, Top-Posters PRO, New&Free: vB5 MemberMap

        Comment


        • #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


          • #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 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


            • #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 8th Dec '17, 4:00pm.
              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


              • 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.

            • #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 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


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

            • #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

              Related Topics

              Collapse

              Working...
              X