CSS, Firebug and content location on FTP.

**Aboudie** · Dec 12, 2012 19:47

Hi.

I've recently been working on my internet site for a couple of weeks now. I wanted to use CSS to get a better overall design on my site, and since i already had firebug installed i used it to inspect the element and decided to changed things up on filezilla. I'm also using dreamwever to read the CSS file. However, while doing this, i have encountered some problems:

1. The Location is not shown in firebug
2. When there is a file location available it shows up differently in dreamweaver
3. I can't seem to precisely changed certain things like the tittle of a blog, instead it would change most of the site content
4. The file location sometimes given is not availabe when i look at filezila. For instance the file location is too simple like "simplewaystogetfit.com"
Here are pictures to better explain my problem.

I am probably asking too much, but i have tried virtually everything i've been trying to figure this one at myslef but to no avail.

I appologize in advance i've seem like i am asking too much

**ralph.m** · Dec 12, 2012 21:51

Hi Aboudie. Welcome to the forums.

There's an explanation to all those things, so I'll try to help.

The Location is not shown in firebug

When you just see the page url listed like that, it normally means that the styles are embedded on the page itself, in the <head>, inside <style> tags.

When there is a file location available it shows up differently in dreamweaver

Can't address this directly without an exact example, but sometimes there are various style rules applying to an element, and CSS has rules for which one wins out if there are conflicts. Firebug will show you which rule is winning out, and the other rules will appear crossed out. That may be part of the confusion here.

I can't seem to precisely changed certain things like the tittle of a blog, instead it would change most of the site content

Not sure what you mean by that. Are you talking about changing the HTML?

It would be easier to explain this to you if we had a link to your site.

Edit:

OK, I see the URL in the screen shot. Perhaps identify what elements you are confused about.

**Aboudie** · Dec 12, 2012 23:10

Wow Ralph you're very active on this forum. I tried searching for a similar problem before creating this thread, and i am pretty new here but i've seen you post many times while looking for answers

. Awesome help. I apologize for not explaining myslef better.

My site is

www.simplewaystogetfit.com

What do you mean by "styles are embedded on the page itself, in the <head>, inside <style> tags"? Does this mean, i can't edit this with because i can't locate the file?

If there are vaious rules to an element, how do i go on about changing them on filezila?

Here are better screen shots to explain my problem

On this case, the line shown on firebug is different and only has a link visited color.

**ralph.m** · Dec 12, 2012 23:40

Originally Posted by Aboudie

What do you mean by "styles are embedded on the page itself, in the <head>, inside <style> tags"? Does this mean, i can't edit this with because i can't locate the file?

There may be some confusion here about what Firebug is and what it's for. It is merely a tool for looking under the hood of the browser. It's not a tool for updating your site in any way. You have to do that with your code editor and upload the changes via your FTP client (be it Dreamweaver, FileZilla or whatever).

You can make changes in Firebug to see what they will look like, but then you'd need to copy those new styles and apply them to your site with your code editor and then upload them. The add element style option means you are just feeding that style to the browser to see what it does. As soon as you refresh the browser, it's gone though. It's just for testing purposes. So copy it first and add it to your style sheet if it does what you want.

So, your site is made of HTML, CSS etc. There are various ways to apply CSS to an HTML page. Most commonly, all the styles are stored in a .css file. But you can also put the styles right on the HTML page instead. The HTML page has a basic structure to it—a <head></head> section at the top, where you put things like your links to the CSS file, and a <body></body> section below that, where you place all the HTML code that will actually be displayed in the browser.

So when you are inspecting an element in Firebug and it tells you that the styles in question is on, say, www.simplewaystogetfit.com, that usually means that this particular style is not in your style sheet, but is inside <style> tags up in the <head> section of the actual web page. So to edit those styles, you'd have to open the page file in Dreamweaver and make the changes there, rather than in your style sheet.

Your home page has lots of these styles in the head section, such as this:

Code:

<style type="text/css" media="screen">
	html { margin-top: 28px !important; }
	* html body { margin-top: 28px !important; }
</style>

So in Firebug, it will tell you that those styles are at simplewaystogetfit.com, rather than in your style sheet.

I know I'm not answering all your questions, but bit by bit, I guess.

**Aboudie** · Dec 13, 2012 00:44

I do understand what firebug does. I know that to change the files you would have to do it on dreamweaver than put it on filezila. I guess you can say i am having trouble figuring the styles of my theme.

I seem to understand now that my only real issue is finding the right location or the right pages to change those styles. I mean my theme has a common CSS box, a javascirpt box and an HTML box. I can simply add in codes there to make changes for the site. I guess you can say, i can do these now by going to my wordpress settings..I just gotta find that page on dreamweaver if i want to change these files on Dreamweaver.

Certainly one of the most helpful individuals I've encountered when trying to learn CSS editing

**ralph.m** · Dec 13, 2012 00:49

Originally Posted by Aboudie

I just gotta find that page on dreamweaver if i want to change these files on Dreamweaver.

I'm sure once you get used to understanding the locations of those locations Firebug is citing it won't be too hard. The problem sometimes with things like WP is that they may serve up strange looking CSS links, depending on how it's set up. It looks fairly straighforward in your screen shots, though.

Maybe there's a setting in Dw that determines how it interprets line numbers.

**Aboudie** · Dec 13, 2012 13:41

Originally Posted by ralph.m

I'm sure once you get used to understanding the locations of those locations Firebug is citing it won't be too hard. The problem sometimes with things like WP is that they may serve up strange looking CSS links, depending on how it's set up. It looks fairly straighforward in your screen shots, though.

Maybe there's a setting in Dw that determines how it interprets line numbers.

Yeah, will have to figure this one out myslef.

Last question though, what do i do with the ones that have no shown location, the ones wich usually says element.style? I mean i understand now what to do with those that just say "simplewaystogetfitcom"....

**ralph.m** · Dec 13, 2012 17:10

Originally Posted by Aboudie

what do i do with the ones that have no shown location, the ones wich usually says element.style?

That normally means that the styles have been added dynamically via JavaScript. So to modify them, you have to dig in to your JavaScript files.

It can also mean that there are inline styles hard coded into your elements, like

Code:

p style="float: left">Text</p>

but in most cases when you see that, it's not in the actual HTML but has been added by JavaScript.

**Aboudie** · Dec 13, 2012 20:34

Originally Posted by ralph.m

That normally means that the styles have been added dynamically via JavaScript. So to modify them, you have to dig in to your JavaScript files.

It can also mean that there are inline styles hard coded into your elements, like

Code:

p style="float: left">Text</p>

but in most cases when you see that, it's not in the actual HTML but has been added by JavaScript.

Thanks for the awsome help ralph.

My fielzila, has PHP, CSS and javascript files. I'm guessing those are the only thing i can fix. Regadless, I'm gonna go ahead and check them one by one.

At least now i know what i should be looking for.

Thanks again.

**ralph.m** · Dec 13, 2012 20:50

You're welcome.

Originally Posted by Aboudie

My fielzila, has PHP, CSS and javascript files. I'm guessing those are the only thing i can fix. Regadless, I'm gonna go ahead and check them one by one.

Yes, there is a good amount of JavaScript on the site, and it won't be so easy to trawl though all that to find out where styles are being set unless you are quite good at JS.

If you are having a problem, or what to know where a style is coming from, don't hesitate to ask in the forums.

**Aboudie** · Dec 13, 2012 21:03

For now, i'm going to edit things up on my theme editor, style while i try to learn more about JS.

Thanks again.

User Tag List

Thread: CSS, Firebug and content location on FTP.

Thread Tools

Display

CSS, Firebug and content location on FTP.

Bookmarks

Bookmarks

Posting Permissions