Posts Tagged ‘firebug’

I’m totally in love with firebug!

January 21, 2010

Wow -css is awesome!

I have been able to style my whole website in new colours without affecting anything else. I haven’t ruined anything! I have just coloured the site in line with the colours of the brand. Its sooooooo exciting!

My two most useful tools have been a book called Head First HTML with CSS & XHTML
and firebug.

Why I found an old-fashioned book to be useful –

I’ll talk about the book first – it has been really great for a few reasons. One is that I could read it while my boyfriend was on the computer, meaning that it was more useful than a website or a blog. I was able to read it while outside tanning on the balcony!

The other reason is that it is written in a style called Metacognition, which basically means that it is easy for the brain to pick up and remember. And I think it really works personally. Well it seems to have worked for me!  And its also not boring and I could just read it like any normal book.

And finally it has just been really good to have the whole HTML thing explained from basic principles as I had no knowledge of it at all until now. I really understand CSS better now that I have begun to understand what came before it and I am really keen to know more and more and more now!!!

Why I love firebug –

Wow – its amazing! I never knew that websites could be so fun! With firebug there is hours of fun to be had and nothing bad can happen, so that makes it even more fun!

Basically it allows you to see what will happen when you alter the css. But it doesn’t actually change anything so, as I said before, nothing can go wrong. Its a great way to test things out before actually implementing them and also its good to show you which line of css to alter. that was what I found extremely useful.

Here you can see what happens when you hover over an element on the page. (In this example I am hovering over the footer element)

At the bottom of the browser window firebug lists the html on the left and the css on the right. So then you can go into the css on the right and make changes and then look at the screen above to see what those changes will affect. Its so awesome!!

I could change the whole appearance of my site without ruining anything and totally go wild with the colours and styling. It was a great education for me just to play with it. Playing after all is supposed to be one of the greatest ways of learning things.

So I would really recommend trying firebug if you haven’t already. Its just an addon for firefox and it takes no time to install and its really easy to use. And actually while adding the link to this page I saw that firebug has an option for Safari, Opera and IE, which is called firebug lite – so thats cool!

Here is a screen shot of my new colours, do you like them?

First Bad Day

December 23, 2009

So I have just had the first sh*t day.  I feel really annoyed!

Basically I was feeling quite good about it all after creating the layout and I added firebug to my firefox and decided that I would set about adding a banner to the top of the page and changing the colour of the background. But it wasn’t that easy!

I got myself a bit confused. I actually got really really stressed out coz I couldn’t find where the html file was! I know – it seems so stupid now but I was going through all the folders for ages looking for this file ending .html or .htm. But of course there isn’t one! I feel so dum and frustrated about how much I don’t know and also a bit annoyed that I had to Skype my brother to ask him about it >-(

It was ok tho – he was real nice about it and explained a few things to me that I didn’t really know before so I guess I benefited from swallowing my pride and asking him and I guess I will have to do it again about a million times because I’ve set myself such a mammoth task!!

What he explained to me in simple terms, was that php is just a scripting language and that erm… it sorta has rules in it like “if this happens, then this happens” I think. And so there is no physical html file, there are just these php files that tell it what to do and also there are the css files. So he then explained that if I was to make changes to the site I will have to make changes to the .css files and that these are in a sort of heirarchy with certain files over-riding others so its important to be careful about where the changes are made. So for example I should not be making changes to the base.css file as it is (as the name says) the base. There are other files such as the style.css file that I should be looking at to make my changes. It does of course say this in the READ ME file within the themes folder but I didn’t think to read that!

So that might be a bit of a problem as I jumped in there as soon as I had firebug installed and I played about with a whole load of things in the base.css file.  Ooops

I have to tell you tho that the first thing I did was to make the changes in firebug and believe that I had changed the website, that was until I watched this video tutorial on it and realised that it only shows you what the changes would look like and I have to go manually into the file to actually implement them. I liked that video actually, it was real easy to understand. Its great that there are so many resources out there for people like me who need to learn a lot!

I realised yesterday that I am so excited to have the internet in my home and to have the time and energy to try to do something really difficult because it is giving me so much opportunity to learn and opening my eyes to what is out there! Its just amazing really. An the best thing is that even if it doesn’t work out I will still know more at the end that I do now. I kinda wish I started to get interested sooner but then I would have missed out on many hours of tv and partying 😀   There is a time and a place for everything and I think now might just be my computer time…

For a moment there I forgot how mad and frustrated I am!

I am tearing my hair out!!

Coz after all that and realising that I had been changin the wrong file, I also realised that my subtheme folder that I made seems to be in the wrong place. It is inside the themes folder but not inside the genesis theme folder. But the other sub-themes are inside the genesis folder. So I think mine is wrong.

So I just dragged it into the genesis theme folder and now its lost everything and the website is completely blank. Just a white page.  Hmmmmm

Time for that backup already?….

First Layout Attempt

December 22, 2009

So now that I have chosen my theme its REALLY REALLY difficult and I dunno really what I am doing!

I have it sorted into a layout with a sidebar on either side – just followed the instructions on the drupal site, well I say JUST, it was a long and difficult process. And then adding information in to a whole load of different pages took ages and I didn’t really know what to write in them. Some people use lorem ipsum I think but I dunno even what that is, so I decided its better to write sort of what I want in each page. Then at least I have thought about each one. So after all that effort, I think it took me about 3 days to go from downloading the theme to now, I had great expectations for how I would feel about the site and how I would be able to see the potential in it by now. But I can’t really it still looks rubbish. I mean its layed out ok but its not nice and I don’t know how to get it to look good. I actually don’t have the first idea.

I only just worked out how to get an image into the site yesterday! (I had to download a module from the drupal site – I was surprised at that, I thought it would have been one of the core modules)

Here it is anyway –

I had an idea tho! I am going to get firebug so that I can see what is goin on with the html and css and hopefully that will make it more clear for me about what makes it look how it does…

Oh and in case you didn’t know – firebug is an add-on for firefox (the browser) it shows up at the bottom of the browser window and shows the code for each element as you hover over it with the mouse!  How cool is that! I have high hopes!