Need FireBug & Customization help, please!

[gizmo_girl]

I am building a new website using version 1.5.1 (www dot personalizetpetid dot com)

First of all, I am using FireBug to play around with the stylesheet, etc, to find where to make changes for font colors, etc. The problem I have, is that I can find the line of code in the html/php files, but I cannot find WHICH file(s) to edit to make my changes permanent. The first image attached shows where I have a facebook button I want to edit. I found the line of code using FireBug...but how do I find which FILE it's in?

Second, I want to add a bar with a colored background along the top, where I've indicated in the second image. I assume that would be in the stylesheet (??) somewhere, but which one and what code would I use? There is an outline around the invisible box when I inspect it, but I can't figure out what to add to make it add a colored box in that place.

Any help is greatly appreciated!!

[dbltoe]

To the right of the element in the firebug window, you should see a link. Hover over that link and you will see which css file is being used for that call.

[gizmo_girl]

To the right of the element in the firebug window, you should see a link. Hover over that link and you will see which css file is being used for that call.

I can see the css file(s), but the image I want to edit does not appear to be tied to the stylesheet. I was able to manipulate it in FireBug on the html screen, but the problem is that I cannot decipher WHICH file it is. I don't get why FireBug shows you which stylesheet, but not which html/php docs to edit.

[dbltoe]

Your link does not work or I would be able to help you better.


>>figured out the link, now let us with trifocals know where you are talking about so we can find the file. prob an image change in the images folder.

[gizmo_girl]

Your link does not work or I would be able to help you better.


>>figured out the link, now let us with trifocals know where you are talking about so we can find the file. prob an image change in the images folder.

I found the image folder, the issue is that I want to use two different facebook logos to link to my FB page. I changed the image (at the bottom of my page), which, in turn, changed the one on the "Connect" tab, as well. I created and uploaded a new, smaller image to use under the "connect" tab. I just can't figure out where to change the image name for the link. Using FireBug, it appears to be in an HTML or PHP file somewhere...but where...oh...where??

[dbltoe]

If you are talking about the facebook image at the bottom of your main page in the social-media div, clicking on the div in the left-hand Col of firebug will expand the div to show several <a target calls. Expand the target call and you see an img class. At the end of that call is src="includes/templates/brighton_pets/images/facebook.png. That's your source.

To the second item, open the stylesheet_mega_menu.css file in the template's css folder.

Add the following line to the #mega-wrapper call:

background-color: #584368;

Adjust the color as you need.

[gizmo_girl]

I got the wrapper in the stylesheet fixed, thank you...it looks so much better!! Thank you!!

As for the image, I found where to upload my new (additional) image, but I can't find where to change the code in a file. I am using two facebook logos: facebook.png and facebook_sm.png. That drop down "Connect" box, as well as the link at the bottom of the page, are both pointing to the facebook.png image. I want the image that displays under the "Connect" drop down box to point to facebook_sm.png. I can't figure out where to change that.

[gizmo_girl]

I still can't find the file for that "Connect" tab that will allow me to change which facebook image that is linking to. Anyone?

[dbltoe]

When you right-click on the small image for facebook, you should be able to select "Inspect Element with Firebug."

You will see that firebug highlights the facebook image. Two lines up is the div that controls the image and its title. <li class="hfacebook">

If you search using the Developers Tool Kit for hfacebook, it should show you the file that utilizes that call.

While you are at it, go to http://tinyurl.com/o6oe75w and click on Add to Cart. This should be fixed ASAP. The Please Select Options (and any option that is not really part of the item) should be set to Display Only. Otherwise, you have to call the customer to find out what they really wanted.

[gizmo_girl]

When you right-click on the small image for facebook, you should be able to select "Inspect Element with Firebug."

You will see that firebug highlights the facebook image. Two lines up is the div that controls the image and its title. <li class="hfacebook">

If you search using the Developers Tool Kit for hfacebook, it should show you the file that utilizes that call.

While you are at it, go to http://tinyurl.com/o6oe75w and click on Add to Cart. This should be fixed ASAP. The Please Select Options (and any option that is not really part of the item) should be set to Display Only. Otherwise, you have to call the customer to find out what they really wanted.

Thanks, I FINALLY found the file...but can't get the coding right to point to the correct image. I loathe this whole PHP business...Here's what I have and it's not changing to the desired image:

/*bof connect with us*/
define(CONNECT_IMAGE,'facebook_sm.png');
define('TITLE_CONNECT','Connect');

Additionally, thanks for the pointer on the options, but I have to leave it where the customer can make their choices. The drop down boxes are there to allow them to choose from the hundreds of different options available. On my other site, it's rare that a customer neglects to make their choices...perhaps one out of a hundred will forget to make a selection. I have found when I have to rely on them to email with their choices, there are typically numerous messages back & forth before they actually provide all of the necessary information. This system has worked beautifully on my other site.