Announcement

Collapse
No announcement yet.

Module header colour

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

  • Module header colour

    Hi. How can I change colour to a specific module? I mean I want to change header background colour to search module only, no all of them. How can i do it? Thanks

  • #2
    Which search module? To change the background for one module you need to know the ID and classes associated with the module. You can obtain these using the right-click Inspect Element function in Firefox. Once you have the ID and classes for the specific module you can then write CSS to override the default background for the module.

    Comment


    • #3
      To change the colors of a specific module. You have to create Custom CSS and apply it to the CSS ID for that module. It will be in the HTML as id="widget_XX". To view this, you can right-click on the header and choose Inspect (Chrome) or Inspect Element (Firefox) to get the layout of the HTML code and its attributes. You can find out information on element inspection in Chrome here: https://developers.google.com/web/to...tools#elements

      You can find out how to change the background using CSS here: https://developer.mozilla.org/en-US/...CSS/background

      An example would be something like this:

      Code:
      #widget_339 .widget-header {
        background: orange;
        color: black;
      }
      the above code means find the block of code with the ID of widget_339 then find a child element with the CSS Class of widget-header. If found, change the background color to orange and the text color to black.
      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


      • #4
        Originally posted by Wayne Luke View Post
        To change the colors of a specific module. You have to create Custom CSS and apply it to the CSS ID for that module. It will be in the HTML as id="widget_XX". To view this, you can right-click on the header and choose Inspect (Chrome) or Inspect Element (Firefox) to get the layout of the HTML code and its attributes. You can find out information on element inspection in Chrome here: https://developers.google.com/web/to...tools#elements

        You can find out how to change the background using CSS here: https://developer.mozilla.org/en-US/...CSS/background

        An example would be something like this:

        Code:
        #widget_339 .widget-header {
        background: orange;
        color: black;
        }
        the above code means find the block of code with the ID of widget_339 then find a child element with the CSS Class of widget-header. If found, change the background color to orange and the text color to black.
        found the id, but the code doesn't work , any advice ?

        Comment


        • #5
          What is the code that you're using? Where should it be working at?

          My example won't work on your site unless you're trying to change a widget with the id of 339. The number is a random number I chose.
          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
            Click image for larger version

Name:	2020-02-13_11-38-09.png
Views:	24
Size:	44.6 KB
ID:	4434427

            I am using this on a test site:

            Code:
            #widget_7 .widget-header {
            background: navy;
            }
            
            #widget_7 .module-title h1 {
            color: white !important;
            }
            
            #widget_203 .widget-header {
            background: red;
            }
            
            #widget_203 .module-title h1 {
            color: white !important;
            }
            
            #widget_8 .widget-header {
            background: green;
            }
            
            #widget_8 .module-title h1 {
            color: white !important;
            }
            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
              Originally posted by Wayne Luke View Post
              What is the code that you're using? Where should it be working at?

              My example won't work on your site unless you're trying to change a widget with the id of 339. The number is a random number I chose.
              #widget_228 .widget-header {
              background-color: #8b0000;
              background: linear-gradient(to right,#8b0000,#ff8a00);
              }

              Comment


              • #8
                Are you sure you have the right Widget ID? Also you need to make sure to add the custom CSS to the proper style. If you use the Style tab in Site Builder and click on CSS Editor, it will always choose the active style.

                Click image for larger version  Name:	2020-02-13_12-16-36.png Views:	0 Size:	22.9 KB ID:	4434430
                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


                • #9
                  Originally posted by Wayne Luke View Post
                  Are you sure you have the right Widget ID? Also you need to make sure to add the custom CSS to the proper style. If you use the Style tab in Site Builder and click on CSS Editor, it will always choose the active style.

                  Click image for larger version Name:	2020-02-13_12-16-36.png Views:	0 Size:	22.9 KB ID:	4434430
                  Yes, I'm sure that's right ID widget

                  Comment


                  • #10
                    Originally posted by Wayne Luke View Post
                    Are you sure you have the right Widget ID? Also you need to make sure to add the custom CSS to the proper style. If you use the Style tab in Site Builder and click on CSS Editor, it will always choose the active style.

                    Click image for larger version Name:	2020-02-13_12-16-36.png Views:	0 Size:	22.9 KB ID:	4434430
                    All sorted, thanks.

                    Comment

                    Related Topics

                    Collapse

                    Working...
                    X