Announcement

Collapse
No announcement yet.

Add transparent background to HTML Modules

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

  • Add transparent background to HTML Modules

    So the title says it all really. I am looking to make the HTML Modules background transparent so that there is not a white box around the element I am displaying. I have tried CSS such as below

    Code:
    .promo {
      background-color: none;
    }
    (.Promo being the class of the module I want to change the background colour on.

    Code:
    .promo {
      background-color: #FF5733;
    }
    I have also tried a hex colour as above to see if it would just add a colour, but still no change.

    Any Ideas ?

    Thanks,
    P

  • #2
    .promo and .Promo are not the same thing. To set a transparent background you would use {background-color: transparent;}.

    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API - Full / Mobile
    Vote for your favorite feature requests and the bugs you want to see fixed.

    Comment


    • #3
      Hey Wayne,

      Thanks for that, unfortunately I am still getting a white box around what I am displaying. Please see below screenshot, See the red box around the HTML Module. The image shows fine, just the white area that I do not want to show. Please also see my screenshot named CSS showing my current CSS for this. I have also tried having in the first .promo section but still the same issues, see my other CSS attempt below...again does not seem to make a difference.

      Click image for larger version

Name:	HTML Box.jpg
Views:	76
Size:	155.2 KB
ID:	4422158

      Click image for larger version

Name:	promo CSS.jpg
Views:	39
Size:	353.5 KB
ID:	4422159
      Click image for larger version

Name:	promo CSS Attempt 2.jpg
Views:	36
Size:	167.5 KB
ID:	4422160

      Cheers,
      P

      Comment


      • #4
        You probably want to apply your transparent code to the Widget Instance ID that is in the code. If you right-click the area for your widget, and choose inspect, you should be able to see it. It would be something like id='widgetid_XX' where the XX will vary for each widget. Then in your CSS you would use: #widget_XX to apply CSS to that area.

        You can also change all modules to use a transparent background by editing the module_content_background and module_header_background style variables in the AdminCP and putting transparent as their values.
        Last edited by Wayne Luke; Mon 16th Sep '19, 11:01am.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API - Full / Mobile
        Vote for your favorite feature requests and the bugs you want to see fixed.

        Comment


        • #5
          You da man ! That worked great, I will keep in mind to use the widget ID's in future !

          Many Thanks,
          P

          Comment

          Related Topics

          Collapse

          Working...
          X