firebug

CSS to move an Image by Node ID

I have a way that I want to be able to show users help. I have a nice ? icon for this purpose and I have

added a title to the image itself which will display as a hover. I have added the image to a Panel Page via a Panel Pane by the Node ID assigned by Drupal, in this case 960. But I want it to overlay a different pane. So, I place the Pane with the image at the bottom and then I use a CSS rule that affects only the node 960. See the screen shots. I simply add the position of absolute and the proper margin spacing to get the image where I want it to be.

Since the CSS is based on a specific node, which is presented by Drupal as an ID, the CSS rule is formatted like this. Done and done.

#node-960 {

position:absolute

margin:-69em 0 0 47em;

}

Add an easy to manage Footer

My site is coming along nicely but I needed a simple, but appealing footer section. I use Panels and have gotten pretty good with CSS so I put this together as shown:

Here is a summary of what I did to make this.

I created a panel style for the footer element called footer1.
I edited the css for footer1 in my custom css file in my subtheme and added a background image, a little 1k blue gradient sliver, that is repeated via css to cover the entire bottom of the page.
I made sure to check the “make this style available to other..” as seen here. The name that you give the region/pane will then be easily assigned to other panel elements in the in-place editor
Create a custom menu with whatever you want. Add that menu to a Superfish block. The superfish menu block doesn’t have to be handled by the Block Admin at all; it will be available via the in-place editor in Panels under Misc. as seen here.
So once I have configured the Superfish settings for the Block the way I want (without enabling the block in Blocks Manager at all) it will be ready to go. In this case, I have used CSS for the superfish menu I created to center the menu, make the text color white. That is tested in Firebug and Inspector (the chrome tool) and then added to my custom css file.
Since the background image and the menu are separate entities and handled by different css classes, they can sit on top of each well well.
Now, On any Panel page that I have, any at all, all I have to do to add this footer is add the fotter1 style to the region in Panels Pages, and add the Superfish Menu from Misc as a piece of content, also in the Panel in-place editor.

This is a little complicated to get set up. But I now have a lot of flexibility on the footer. It is easy to maintain (the menu items are just menu links in the standard m

enu config) the footer image takes a few clicks to insert. and if I wanted to update the image itself, all i would have to do is place a new “sliver” image with the same name in the same folder where it currently resides. Quite nice once it si in place. If you want more detail, let me know and I’ll be more specific.

Add a custom hyperlink to a View

This is similar to what I did last night with the More buttobn PNG file. I have the same file in a Panel Pane for a View that I put together. And I want it to go to a completely custom URL that links to a searchable View of the same aggregator items.

First, I need to get the link and the text on the screen. Since it is View, there are better, more flexible options than there were on the Block that I was working with last night. I decided to add a Link via the Header part of the View as seen below. Because there is a text area option for the header and you can place full HTML in there, I was able to add all of the styling elements directly in the header. So, it is really Inline CSS. Which is fine for here because I want complete flexibility over the element. I added positioning elements, opacity and a title to the More text and I now have my link right on the More PNG file button.

The Best CSS Reference

If you don’t know about W3schools.com then do yourself a favor and go there. Especially if you are trying to do something in CSS and you aren’t sure how. Not where, mind you. In Drupal, that is your own thing to find. But as to how, W3schools’ web site has some of the best free references around. And the Try It features are the best. Alter their examples to see if you are getting the results you want, then put the changes into Firebug to test on your site, then alter the actual CSS files and test your live changes.

http://www.w3schools.com/cssref/default.asp

W3Schools.com Rocks!

Customizing Superfish Menus? Look to the CSS for most changes

I had to do some tweaking on my Superfish menus today and what I have discovered is that if you are going to use Superfish, get ready to use Firebug and edit the CSS files.

Today I had to make (what I thought was) a really basic change. my drop downs weren’t wide enough for the submenus. i figured that there must be a setting for this but couldn’t find one. So I did some reading and found that to make a change as basic as this, I had to add some css. Not a big deal, but a little surprising.

CSS Files for Superfish within a subtheme

I have three Superfish specific css files that I have had to work with. Since there are now quite a few css files in the subtheme, I have created a subfolder for the superfish ones to go into. This is really important because one of them has the great name, default.css. so it needs to go into a sf specific home. here is a SS:

Make sure to change the .info file to reflect the new folder. Something like, /css/superfish/*.css

Add CSS Inline Elements to Drupal

So in my last post, I was trying to track down and change one CSS element in Drupal. Specifically, the text that I use in the header of my site. This header is actually a node from a Custom Content Type That I added to the page via Panels. This may get a little confusing, so I am going to try to be thorough.

Since the text is a node, I can edit it via the CKEditor, which I have covered previously. What this means is that the styling of the node can be edited directly within the editor. This will add the styling as an Inline CSS element. So, using Firebug, I can see the styling, but there is no CSS file reference. Makes sense because it is Inline.

So, how do I edit it? I really want to avoid making this complicated and getting into the TPL files, messing with the themable functions and all that. I do want to be able to do those things but I want to KISS – Keep It Simple Stupid. So, if I go to the actual piece of content in CKEditor and click the Source button, I can see the inline CSS! Awesome. And, I can edit it. This is where it gets quirky.

I add this CSS to the source on the CKEditor screen. The added parts are bolded:

DOCResource.org

I then save and check the page. And the changes are there. Great! In Firebug, I see the new CSS with no reference to a CSS file, Great! BUT, when I go back to CKEditor and look at the source of that piece of content again, there is nothing listed for the color. And I believe this is because the Colorbutton option in CKEditor has an issue. The button doesn’t show up and actually, when the option is checked (I have the proper library installed) in the CKeditor setup (under configuration in the Drupal Admin) the CKEditor breaks and won’t show the content at all. This is an issue that others have run into before. But, I DON’T want to spend a whole lot of time running down yet another Drupal Quirk. So, I just work around it. At least I understand how it all works. And why it doensn’t.

DOCResource.org

This is what I see when I go back to the content that is now appearing in white. as you can see the color:white css reference is gone. Without the library working properly, you can’t even see the reference in the editor. But the editor does allow you an easy way to add the inline css anyway. WHEW!

UPDATE – If you edit that piece of content again, the change will have to be readded or it will disappear. Ug. That means I have to fix CKEditor…..

Adding CSS to one element

So I have some text in my header. You can see from the SS that I have added a font size to the text from inside Firebug so that I can try out the change. And since I like what I have done, I want to add the CSS to the element’s selector in the CSS file. But…. this particular element isn’t IDd specifically in the CSS file yet. I need to add it. But how? That i

s what I will be working tonight. So while you are at the bar, swilling hops and grain, I’ll be doing that. Am I lucky or what on a Friday night?

When I figure out how to do this, I will post…

So, I used the native firebox debugging tool and I see that the style being used is Inline. Duh. But in Drupal, where does the inline come from and how do I overwrite it in CSS?

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.

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