More… Custom Styling with CSS

I have been doing a lot of CSS work and it is all going pretty well. The main thing to do is:

1. read up on a LOT of CSS to find out what your options are.
2. use firebug to track down what needs to be changed and test how to change it.
3. alter the css file or the inline css. inline css can often be changed from within drupal if you have a content type with some text. The title text on the SS below uses inline css that i added via the “source” button of the CKEditor module on that particular piece of content.
4. subtheme all your css files by copying the ones you need into your subtheme directory, making sure to note their existence in the .info file for your subtheme.

 

How to do Basic Styling with CSS and Drupal – Final Post

In regards to CSS and Drupal from a high level perspective, this is the last post. Any other CSS stuff will involve specific Drupal parts like Superfish Menus, Views, Panels, etc. But here is what I have and what I do to make CSS changes in Drupal.

What I have:

1. Hosted Drupal site from Blackmesh Hosting, the BEST hosting in the known universe
2. File System access to the server via SSH with the proper permissions
3. Firefox browser with FIREBUG
4. Aptana Studio 3 Code Editor
5. Lots of CSS Reference Books

I have a Sandbox environment but I don’t have to use it for CSS because of the MIRACLE of Firebug. I also normally use Chrome but the Firebug version for Chrome doesn’t do it for me.

How I test/make CSS changes:

1. Browse to the site with Firefox
2. Right click on the page and choose “Inspect Element with Firebug”
3. Click on the second icon in the top left corner of Firebug. Looks like a rectangle. This tool will allow you to track down a specific element on your page. Click an element.
4. The element’s HTML will be highlighted below. Its CSS will be on the right.
5. You can use your mouse to enter a CSS element and change it.
6. ***Use the arrow keys to move values up and down. This is a powerful tip. You can use the arrow keys to scroll through available CSS options even when none are listed explicitly. Just play with it and get used to it. These changes are dynamic and are totally isolated to your browser if your setup is like mine***
7. When you have a change in place that you like, track down the CSS file using the right hand pane of Firebug. If you hover your mouse, you will see the path to the file. The CSS line number will also be listed.
8. ****DO NOT HACK THE “CORE” THEME CSS FILES**** Make sure to subtheme what you are changing. ****ALWAYS**** Don’t put yourself in a position to have to skip an upgrade from Drupal.org because you changed a file within the theme and not the subtheme. Or worse, lose your cool changes because the upgrade replaced the CSS file. Make a subtheme. Look up how to do it. It isn’t hard. But make sure to do it.
9. Now that you know what CSS file you need to work with, use your SSH file browser to fine the correct file. Double click it in the right hand side of SSH. If confiured properly, Aptana will open along with the file. You can make your changes, save them and SSH will sense that the file has been changed and ask you if you want to overwrite it. Click Yes
10. Open a different browser and check out the change. Use Chrome, Safari, FF, IE and a mobile device to make sure the change looks good on all platforms.

That’s it! You are now a Drupal CSS wiz!

More fun with CSS – Use Firebug, Firefox and Aptana

Well, I can say it: I am not good at design. I can make the tech stuff work. I can figure out all the strange little details, but I can’t look at a bunch of text and decide how to make it pretty. So, like all non-artistic people, I’m going to copy someone else’s work. I have a few ideas but they are going to take time.

So, CSS and Drupal. It isn’t too bad ONCE YOU GET USED TO USING FIREBUG. If you haven’t used this tool yet, go get it. Now. Then come back. Greatest tool for doing design ever. Let’s you test out chang

es on the fly. Which is great because there are so many choices with CSS. So, get Firebug. And, get Aptana code editor. It is free and there are integrations with Firebug. I believe that the best browser to use is Firefox. I usually prefer Chrome but Firebug just seems to work better with Firefox. Anyway, here is a SS of the integration offered with this set up:

As you can see, I can move right into the selector for the element that I want to work with from Firebug. I can then right click on the CSS file and open it directly into Aptana. Very nice. I can then FTP the altered CSS to my server via SSH and I am rolling.

One small CSS change to my Drupal Home Page

I want to move the whole page down just a little bit. My logo is flush against the top of the page. I just want a little head room. So, I want to do this via CSS.

Using Firebug and Firefox, i right click on the top of the page and choose inspect element. this doesn’t get me right where i need to be but it is close.

the two ss will show you everything that you need to see in red outlines. by using firebug, i can trace down the element I want by simply digging a bit into the

lower left toolbar of firebug. Then, on the right, i see the margin area that I need to change. I can make the change in FB in a completely safe way to make sure that the change is the one that I want. the right hand side of FB also shows me the CSS file that it is coming from and even the line number that I need to alter.

I can then FTP the CSS file over SSH, open it with Aptana (or textpad, if you like) and change it. SSH will sense the changed file and ask me if I want to overwrite it. I do and then the change is a part of prod. Very easy, very safe and very nice!

 

 

 

 

 

Drupal, CSS, Firebug & Aptana

Well, I finally have been able to start with the CSS portion of my site. I am using Firefox with Firebug to assist me. This combo works really well with Aptana Code Editor, my favorite open source editor.

I have a couple of ss to show what to do on a really basic level. if you right click an element you want to know about and choose inspect with firebug, you’ll get a whole bunch of info about it. You can also click the rectangle in the red oval in the top pic and choose to inspect it that way. You

will see the element that you want to inspect in the blue rectangle as above, also in the red oval.

look to your right now and you will see how you can change the element on the fly by altering the css in the bottom right hand window. Notice that I have changed the font of the element to Arial. This way you can test out your changes and then make them to the correct place in prod when you are happy with it. Of course, FB will do a lot more than this but a good start is a good start.

This is a good reference for CSS from W3Schools.com

Error with the Core Contact Form and Google Analytics Tokenizer

well, today I enabled the user contact form and tested it. The form works but I received an error from PHP about a deprecated function. Here is the link to the fix:

http://drupal.org/node/1198504

To be honest, I’ve had more luck installing these patches manually than using the patch application from the command line. I might be doing something wrong but I don’t think so. I believe that what is happening is that the patch is issued for a version of the module, at a specific line number. Then, the module is changed and the line number changes but the patch isn’t necessarily committed to the module. So the line numbers no long match. Or, I am an idiot who doesn’t know what he is doing.

So i usually open the patch, check out what is being changed and add it manually with Aptana. that way i have to look at the code too.

WAMP and Aptana code editor

well, i have all my great drupal environments setup. but as i started working with php code in aptana, i realized pretty quickly that i was going to need a local web server to test the php pages. so, install apache for windows xp. let me digress. windows xp is one of the best OSs ever developed. this MCSE isn’t big on MS much these days but XP is still a masterpiece. it will run so much stuff and run it well. i have a nearly ten year old dell running XP and it works great. it will run all the modern open source crap that i want and it is as solid as a rock. there is a reason that the biz community ran XP for as long as it did. and DOES. there are still millions of PCs out there in offices all over the place that run xp. there just isn’t a good reason to get rid of it when it will do 96% of what you need on hardware that is now pretty old. the only thing it won’t run that i actually care about is IE9. and i would never use that anyway if i didn’t have to plan my development around its css quirks.

i love XP. it’s great and it is a product like americans used to make: no planned obsolescence.

so, i’m installing a full WAMP server. most of the config for WAMP was pretty easy. the hard part was getting aptana to work properly with apache and the installed browsers so that the preview features could be used. for clues on that i am attaching a SS of what my server config looked like in aptana. it was a pain and i don’t believe that it was well documented. so, i posted what i did to stackoverflow here: http://stackoverflow.com/questions/12188045/aptana-studio-3-generic-server-doesnt-support-start/14402908#14402908

Prod and Dev

I have everything set up the way that I want it. i set up ftp on my dev server and  did a little configuring to get the permissions setup so that I could get to the /var/… dir tree. that wasn’t too much of a stretch. since it is dev, i just opened it up. plus, it is on a vm on my laptop so it isn’t a big deal.

so i can open the dev site with ftp, the prod site from ssh and open the same file from each side. the have the same name and the same dir location. so, i test the code on dev and then copy and paste it to the prod server. works pretty well.

Production and Development, SSH, Quality and Testing

So I have my two environments up and running. What I need to do now is get them aligned so I can do proper testing in the dev environment before moving the files to prod with a minimum of trouble. So, I have my dev environment on a vm on my laptop. i can access prod from the laptop or desktop via the drupal web interface. I can also access it via SSH and aptana. that’s the way that i can upload the code to prod. but i need to be able to access the dev code consistently from the desktop (the vm is on the laptop and the files are too big to move around).

so i need to be able to access the laptop vm from the desktop. and since they (desk n vm) are on different networks i have to route packets from the vm network to the home wireless network. otherwise, i’m going to have to sync the code files from the desk to the lap, upload the files on the laptop to the vm for testing, then upload from desk to prod via ssh. i think that i might try to get SSH running on the vm centos install then make it accessible to the desk. that would also closely mimic prod. that’s the ticket.