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:
The Location is not shown in firebug
When there is a file location available it shows up differently in dreamweaver
I can’t seem to precisely changed certain things like the tittle of a blog, instead it would change most of the site content
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:(
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.
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:D. Awesome help. I apologize for not explaining myslef better.
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.
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, [noparse]www.simplewaystogetfit.com[/noparse], 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:
<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.
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
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.
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”…
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.
