Help Understanding What the CSS Is Doing
-
Hello,
Frist, I am sorry for this question, because I am sure its very basic, but it’s just not clicking for me.
I understand that I can only edit the CSS and what CSS does, but my understanding of CSS requires me to know what HTML is being used in order to modify it. So what I am struggling to get with WordPress is how I know what I can change with CSS for a given theme if I can’t see its HTML. I am hoping this makes sense.
I was going to start with the Toolbox theme, something very basic and slowly start adding some CSS, but I can’t seem figure out what it is that I can really manipulate without seeing the HTML. Obviously this isn’t an issue as people make some great WordPress sites, but I need a little help getting my mind around this.
Many thanks!
The blog I need help with is: (visible only to logged in users)
-
Please be patient while waiting for one of the two Volunteers who help with CSS editing log-in to get to your thread. This article is helpful before starting your editing > http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/
-
First off the underlying theme files in wordpress are PHP script, not HTML. The HTML sent to a browser upon request is built on the fly by the PHP files and sent to the browser. That means that all you have to do to see the HTML is to do a “view source” from your browser view menu.
A great addon for Firefox, is Firebug. When active it shows the CSS in a right pane at the bottom of the browser page, and the markup (HTML) on the left. There is an inspect function that allows you to select elements on the web page, and the HTML and CSS for that element is then shown in the Firebug panes at the bottom of the screen. You can even try out changes and additions to the CSS in real time before committing them to your custom CSS.
If you are not using Firefox, download it and also get the Firebug addon and read through the getting started stuff (there are videos as well) and get a feel for how it works and it will make things a lot easier.
-
thesacredpath
Thank you. I was aware of the PHP, but I kept trying to find a place where this info might be presented to me. It makes sense to use a developer view to get a look at the HTML that way, just not what I was expecting.
While this isn’t a problem it does strike me that a theme having some type of document which would offer the relevant tags for HTML it would generate to be useful, but perhaps for more experienced developers this isn’t a real issue. In any case, thank you for your help.
-
The problem with having a document that lists the CSS classes and ID’s and what they are related to in the HTML is a daunting project since staff is constantly updating the themes here to include more features such as custom colors and background images and such, so it would be a huge amount of work keeping over 100 documents updated and really it would be a moving target given how much change happens in the background that none of us are even aware of. The Theme Team here is constantly busy tweaking and adjusting the themes here and I’ve noticed a lot of changes to the CSS on themes that I am very familiar with. It seems each time I look at the CSS I see new stuff.
The best thing is to get Firebug, spend a little time getting to know it and how to use it because then it doesn’t matter what adjustments or changes staff makes, you will always be seeing the current CSS and HTML.
Another thing, all the themes here are right now being updated to HTML5 compliance. Another bunch of things that would require considerable updating of documents.
- The topic ‘Help Understanding What the CSS Is Doing’ is closed to new replies.
WordPress.com Forums 