Ad Module Titles Missing

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Wayne Luke
    vBulletin Technical Support Lead
    • Aug 2000
    • 73981

    #16
    That widget is #widget_366. CSS applied to #widget_43 will only affect that widget and no others. If you have multiple Ad Modules, you will have to have code for each one if you want to go the specific route.

    Code:
    <div class="b-module js-module canvas-widget default-widget axd-widget axd-container" id="widget_366" data-widget-id="43" data-widget-instance-id="366">
    <div class="widget-header h-clearfix">
       <div class="module-title h-left">
    <h1 class="main-title js-main-title hide-on-editmode">FORUM SPONSORS</h1>
    </div>
    <div class="module-buttons">
    <span class="toggle-button module-button-item collapse" title="Collapse" data-toggle-title="Expand"><span class="b-icon b-icon__toggle-collapse">Collapse</span></span>
    </div>
    </div>
    <div class="widget-content restore axd axd_366">
    <div class="axd-inner js-module__hide-if-empty ">
    <div class="ad_366_inner"><a href="https://www.amsoil.com/offers/index.aspx/?zo=1907169"><img src="core/css/0/0/3/4/5/5//images/Amsoil 320.jpg"></a></div>
    </div>
    </div>
    </div>
    Each ID like #widget_366 can only exist on the page once. Every single widget on your site will have its own unique ID. You need to inspect them in the browser to see what your Widget is designated as.

    Click image for larger version  Name:	Screenshot_21.png Views:	1 Size:	41.3 KB ID:	4388319

    You should be able to target all Ad Widgets with CSS like:

    [data-widget-id='43'] .widget-header {CSS CODE HERE}
    Translations provided by Google.

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

    Comment

    • Letzride
      Member
      • Jun 2017
      • 81
      • 5.5.x

      #17
      I tried putting #widget_366 {CSS stuff here} and it didn't work, targeting all the ad widgets I just found gives me a blank grey strip above all my other ad modules since the title is hidden


      The other problem remaining at this point now is in mobile phone format the grey header area is still off centered to the left side when I would like it to display centered. If you visit the home page www.camarov6.com and put it into a mobile container for an Iphone 7 you will see this


      By the way thank you for the help this far - I truly appreciate it
      V6 Camaro Forum | Deep Scratch Repair | How To Guides | Project Cars


      Vote for:

      Ability to display ads for xx number of views / impressions: http://tracker.vbulletin.com/browse/VBV-18045

      Comment

      • Letzride
        Member
        • Jun 2017
        • 81
        • 5.5.x

        #18
        update: just kept at it and it appears this code has fixed it - which is what you guys suggested and I have now learned to apply:

        Code:
        #widget_366 .widget-header {     display: block; width: 285px; margin: auto;
        margin-bottom: 2px; border-style: solid;
        border-width: 1.25px; border-color:
        #BB0000; border-radius: 2px }
        This has also seemed to correct the header to the center now as well in mobile platforms

        Thank you everyone!!
        V6 Camaro Forum | Deep Scratch Repair | How To Guides | Project Cars


        Vote for:

        Ability to display ads for xx number of views / impressions: http://tracker.vbulletin.com/browse/VBV-18045

        Comment

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

          #19
          I guess I haven't been clear.

          Anything starting with a # will affect one module only. It is a CSS ID and must be unique on every page. You cannot use IDs for multiple elements. In the case of modules, something like #widget_366 applies to the module with that specific instance id and is the container for everything in the module. You would add additional tags and CSS classes to your CSS to drill down to a specific element.

          If you want to target all instanced of the Ad module you need a more global identifier. This is done through the data-widget-id attribute. On your system, it appears that Ad Modules have a widget id of 43. Here you would use the [data-widget-id="43"] designation in CSS but you would still have to target the individual child and sub-elements with additional tags and CSS classes.
          Translations provided by Google.

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

          Comment

          • Letzride
            Member
            • Jun 2017
            • 81
            • 5.5.x

            #20
            Originally posted by Wayne Luke
            I guess I haven't been clear.

            Anything starting with a # will affect one module only. It is a CSS ID and must be unique on every page. You cannot use IDs for multiple elements. In the case of modules, something like #widget_366 applies to the module with that specific instance id and is the container for everything in the module. You would add additional tags and CSS classes to your CSS to drill down to a specific element.

            If you want to target all instanced of the Ad module you need a more global identifier. This is done through the data-widget-id attribute. On your system, it appears that Ad Modules have a widget id of 43. Here you would use the [data-widget-id="43"] designation in CSS but you would still have to target the individual child and sub-elements with additional tags and CSS classes.
            So is that what I did in post #18? The main module I was wanting this to work for was my two ad modules that are for Sponsors - which appears to be widget_366 for both my home page and my default conversation pages (the only page templates that have my sponsors listed). Right now it appears to be working - but your comment makes me a little concerned that this may not continue to work down the road?

            I don't think that you are being unclear - it is likely more just attributed to my understanding of this kind of stuff is extremely limited - while learning along the way to get to where I am, I don't have an education of any sort in coding at all. So I am piecing this all together as a strict newbie
            V6 Camaro Forum | Deep Scratch Repair | How To Guides | Project Cars


            Vote for:

            Ability to display ads for xx number of views / impressions: http://tracker.vbulletin.com/browse/VBV-18045

            Comment

            Related Topics

            Collapse

            Working...