Announcement

Collapse
No announcement yet.

Modules background

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

  • Modules background

    Hi again. Could I ask what template I need to edit to change modules background,(not header). And also same thing for the channel directory?

    Thanks

  • #2
    You really shouldn't be editing templates at all. Doing so will cause problems when we provide new versions that update those templates.

    To change the background of all modules, you can edit the Module group of style variables in the AdminCP.

    For a specific module, you would modify the Module Background the exact same way you modified the Module Header Background in your previous topic. You need to create custom CSS that targets the specific CSS identifiers of that module.

    What is the "Channel Directory?"
    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
      Originally posted by Wayne Luke View Post
      You really shouldn't be editing templates at all. Doing so will cause problems when we provide new versions that update those templates.

      To change the background of all modules, you can edit the Module group of style variables in the AdminCP.

      For a specific module, you would modify the Module Background the exact same way you modified the Module Header Background in your previous topic. You need to create custom CSS that targets the specific CSS identifiers of that module.

      What is the "Channel Directory?"
      So what CSS should I use for it ? i mean not the header but the background

      Comment


      • #4
        Originally posted by Wayne Luke View Post
        You really shouldn't be editing templates at all. Doing so will cause problems when we provide new versions that update those templates.

        To change the background of all modules, you can edit the Module group of style variables in the AdminCP.

        For a specific module, you would modify the Module Background the exact same way you modified the Module Header Background in your previous topic. You need to create custom CSS that targets the specific CSS identifiers of that module.

        What is the "Channel Directory?"
        i found it out, but how i want the code to not be showed for page title module.

        Comment


        • #5
          All page title modules?

          Using the development tools in my browser, I see that the Page Title module has the calls page-title-widget available. By applying Custom CSS to this class and its children, I can control the way it looks when presented to the end user.

          If I wanted to affect the page title module on a specific page, I would get the page's class from the body tag of the HTML code and use it to make my CSS more specific.

          Spending a few hours with an online CSS class/tutorial can probably save you time in the long run.
          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


          • #6
            Originally posted by Wayne Luke View Post
            You really shouldn't be editing templates at all. Doing so will cause problems when we provide new versions that update those templates.

            To change the background of all modules, you can edit the Module group of style variables in the AdminCP.

            For a specific module, you would modify the Module Background the exact same way you modified the Module Header Background in your previous topic. You need to create custom CSS that targets the specific CSS identifiers of that module.

            What is the "Channel Directory?"
            What's teh code to change background colour to specific module. the one which I used is for all of them.

            Comment


            • #7
              To apply code to a specific module, you would have to do exactly what you did in your previous topic.

              https://forum.vbulletin.com/forum/vb...-header-colour

              The difference is you would apply your custom code to the module content classes, not the module header classes.

              #widget_XXX .widget-content {whatever your css attributes are...}
              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


              • #8
                Originally posted by Wayne Luke View Post
                To apply code to a specific module, you would have to do exactly what you did in your previous topic.

                https://forum.vbulletin.com/forum/vb...-header-colour

                The difference is you would apply your custom code to the module content classes, not the module header classes.

                #widget_XXX .widget-content {whatever your css attributes are...}
                Code:
                  #widget_66 .widget-content {
                border: 1px solid #CCD1D5;
                background: none 0 0,#F8F8F8;
                padding: 15px;
                margin: 0 0 16px 0;
                float: left;
                width: 100%;
                position: relative;
                min-height: 24px;
                height: auto;
                box-sizing: border-box;
                border-radius: 3px;
                }
                Is there anything wrongs as does not working

                Comment


                • #9
                  Originally posted by Wayne Luke View Post
                  To apply code to a specific module, you would have to do exactly what you did in your previous topic.

                  https://forum.vbulletin.com/forum/vb...-header-colour

                  The difference is you would apply your custom code to the module content classes, not the module header classes.

                  #widget_XXX .widget-content {whatever your css attributes are...}
                  All works Wayne, Thanks

                  Comment


                  • #10
                    Originally posted by Wayne Luke View Post
                    To apply code to a specific module, you would have to do exactly what you did in your previous topic.

                    https://forum.vbulletin.com/forum/vb...-header-colour

                    The difference is you would apply your custom code to the module content classes, not the module header classes.

                    #widget_XXX .widget-content {whatever your css attributes are...}
                    Sorry Wayne, once again. I have a small issue, the background does change colour but not fully background. I tried to put .canvas-layout-container .canvas-widget and does change everything. Is you are using in your forum same code as provided, same as in an other thread, you showed the pictures.

                    Comment


                    • #11
                      All good now, I've changed from stylevar the content background colour.

                      Comment

                      Related Topics

                      Collapse

                      Working...
                      X