Announcement

Collapse
No announcement yet.

How to find css elements using Firebug

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

  • [Forum] How to find css elements using Firebug

    This tutorial has been updated. Please see this thread:

    https://www.vbulletin.com/forum/show...-using-Firefox


    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 11th Jun '12, 10:18am. Reason: Title edited at OP's request.

  • #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


    • #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


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

        Comment


        • #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


          • #6
            Originally posted by juanporro View Post
            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 Joe D.; Wed 15th Feb '12, 9:13am.

            Comment

            Related Topics

            Collapse

            Working...
            X