Announcement

Collapse
No announcement yet.

Removing border, title, etc. on widgets

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

  • Removing border, title, etc. on widgets

    Just wondering if the borders, title, collapse icon, etc. can be removed on a per-widget basis (B19)? For example, say I want to add a Adsense 300x250 ad by itself on the right column, or simply have text by itself like on a main index/home type page. I guess the idea is to (perhaps) replace my entire site with vB5 and kill my old existing /index.html page. I prefer to not have it looking too 'forumy' for a main 'index' page.

    Also, I added a PHP code widget and nothing showed at all. I used the exact same code (simple copy n paste) from my vB4 test install (which worked perfectly).
    ΜΟΛΩΝ ΛΑΒΕ

  • #2
    If you examine the code and they have their own CSS class/ID, then you can override the styling for the default in the css_additional.css template.
    Vote for:

    - *Admin Settable Paid Subscription Reminder Timeframe*
    -
    *PM - Add ability to reply to originator only*
    - Add Admin ability to auto-subscribe users to specific channel(s)
    - "Quick Route" Interface...

    Comment


    • #3
      Like this line? 'widget-id' and 'widget-instance-id' can be specified in css_additional.css?

      <div class="canvas-widget default-widget wol-widget" widget-id="64" widget-instance-id="95">
      ΜΟΛΩΝ ΛΑΒΕ

      Comment


      • #4
        It needs to be a CSS ID. Currently widgets do not have their own CSS ID. For the widget types you want to customize for this, you can edit their template and add this. In the different widget templates -

        Find:
        Code:
        <div class="canvas-widget default-widget custom-html-widget" widget-id="{vb:raw widgetid}" widget-instance-id="{vb:raw widgetinstanceid}">
        Change to:
        Code:
        <div class="canvas-widget default-widget custom-html-widget" id="widget{vb:raw widgetinstanceid}" widget-id="{vb:raw widgetid}" widget-instance-id="{vb:raw widgetinstanceid}">
        Then in your css_additiona.css template you can assign CSS to #widgetXX where XX is the widget you want to change.

        This is actually one of the first improvement requests that I put in on vBulletin 5. You can see it here: http://tracker.vbulletin.com/browse/VBV-1270

        The other attributes are custom attributes allowed under HTML and used for Javascript. Please note they will have data- prepended to their names in an upcoming release to fully comply with the HTML 5 schema.
        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 can also create your own templates for the different widgets. Just enter the name of the new template in the Widgets > Configure screen.

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

          Comment


          • #6
            Originally posted by Lynne View Post
            You can also create your own templates for the different widgets. Just enter the name of the new template in the Widgets > Configure screen.
            Just a note, this is for vBulletin 4... Widgets or Modules in vBulletin 5 do not have this option.
            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


            • #7
              Interesting, I'm going to have a play with the template edits above because there's a few widgets I'd like to manipulate.
              MARK.B | vBULLETIN SUPPORT

              TalkNewsUK - My vBulletin 5.6.3 Demo
              AdminAmmo - My Cloud Demo

              Comment


              • #8
                Originally posted by Wayne Luke View Post
                Just a note, this is for vBulletin 4... Widgets or Modules in vBulletin 5 do not have this option.
                And just a note to myself to make sure I look at the forum I am replying in!

                Sorry to the OP for not seeing that this was in the vB5 forum.

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

                Comment


                • #9
                  I'm having some trouble with my css trying to style an individual html widget. Can somebody give me the correct identifier?

                  Code:
                  <div widget-instance-id="93" widget-id="1" class="canvas-widget default-widget custom-html-widget">

                  Comment


                  • #10
                    You need to apply the code modification in post #4 and then use the new CSS ID created by that code modification.
                    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

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