How to find css elements using Firebug

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Andy
    Senior Member
    • Jan 2002
    • 5886
    • 4.1.x

    [Forum] How to find css elements using Firebug

    This tutorial has been updated. Please see this thread:




    Here is a simple tutorial which shows how to find css elements and will show how to make changes to the element.

    1) Download and install Firefox

    In this example we will change the background color of the login box.

    2) Right-click on the login box background as shown:

    Click image for larger version

Name:	Untitled-1.jpg
Views:	1
Size:	36.3 KB
ID:	3715267

    3) Select Inspect Element

    4) Highlight the css element as shown:

    Click image for larger version

Name:	Untitled-2.jpg
Views:	1
Size:	30.0 KB
ID:	3715268

    5) Go to your Admin CP and edit the additional.css template

    6) Add the following

    .toplinks .remember {
    background: #000000;
    }

    7) Save template

    8) That's all there is to it. Once you refresh your forum page you will see how the background of the login box is now black.
    Last edited by Andy; Mon 11 Jun '12, 9:18am. Reason: Title edited at OP's request.
  • JeffM
    New Member
    • Mar 2010
    • 6
    • 4.0.0

    #2
    Hmm. Never even crossed my mind to use Firebug in the vB style customization, although I use it everyday. It's nice that I've been able to setup and customize my forum installation almost without posting one question. Lots of info and helpful people on these forums.

    Comment

    • is_it_me
      Senior Member
      • Apr 2008
      • 546

      #3
      Lynn suggested I downloaded Firebug the other day and I've managed to find and sort out a couple of things by accident, but for a numpty with no pervious experience in web-design nor coding this thread has been very useful, thanks Andy.

      Can I suggest it be made a sticky?


      testing 1..2..3

      Comment

      • orok
        New Member
        • Feb 2005
        • 25
        • 3.7.x

        #4
        Anothe tool for IE : Internet Explorer Developer Toolbar
        Thank you

        Comment

        • juanporro
          Member
          • Mar 2009
          • 41

          #5
          Not really working for me. I am a dummy. I need more explanations.

          I am doing these things on a 3.85 board and I get the html code and when I click on css I dunno where to highlight.

          Any help please?

          Comment

          • Andy
            Senior Member
            • Jan 2002
            • 5886
            • 4.1.x

            #6
            Originally posted by juanporro
            I am doing these things on a 3.85 board and I get the html code and when I click on css I dunno where to highlight.Any help please?
            This thread is located in a vBulletin 4 forum. That means the information only applies to those that have vBulletin 4.0 or higher.edit test
            Last edited by BirdOPrey5; Wed 15 Feb '12, 8:13am.

            Comment

            Related Topics

            Collapse

            Working...