CSS – Gradients and Images together

I really wanted to get the effect that you often see on nice looking sites like CNN where you have a gradient with a button in the corner of said gradient. Like the More buttons that you see.

This is a great tutorial on gradients.

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_gradients

Here is the actual syntax that I used to make this work:

.pane-plain-box-bs1 h2 {
background: url(‘/sites/images/more-btn1.png’) no-repeat top right, linear-gradient(to bottom,rgba(161,161,161,0) 0,rgba(82,81,80,1) 100%);}

Note that I am doing this in the subthemed CSS file from Panels. One important thing to note is that you have to have the image listed BEFORE the gradient in the line. Otherwise the gradient will cover it up.

CSS and Panels – Continued

Regarding the last post. I was able to use the subthemed css file with the system generated name of 5318d6b673b817f66f8dc5a5b1a54d56.css. I might try to rename the file into something a little easier to remember but for now I think that I’m good.

I believe that this file will be stable as long as it is IN USE when I clear the cache, which I have to do all the time even though I have all the performance enhancers disabled right now. I have seen that the system generated CSS files used by CTools are purged when the cache is cleared if the files are not being used by any Panel Panes. Fun huh?

04/30/13 update – I removed the styling from all the Panel Panes using it and then cleared the cache. This did not remove the style from the Stylizer or interfere with the way that I subthemed it. And changes I made to the CSS file that I subthemed (the 5318d6b673b817f66f8dc5a5b1a54d56.css file) were present.

So, this appears to be a viable way to add CSS to Drupal Panels in a fairly flexible way. Very nice!

CSS with Panels

It seems that the big problem for me with Panels and adding CSS is that the selectors that are used to style elements are a little too broad. Let me explain: I use Panel Panes exclusively. I also may use Minipanels within Panel Panes themselves. But whatever content I want to display, I use Panels to do it.

So what I wind up with are CSS selectors (.block, html, etc) that are broader than I need them to be. I change the CSS for a border in a Panel Pane for a View and it also adds a border to an Image that I display in the Header via a Panel Pane. No good. So this is what I do to work around this. I have a SS too but it is a mess. I’ll try to explain it.

learn drupal css panels

Look at the image… there are numbers in red that correspond to this explanation:

 

 

1 – create a Custom Style for your Panel Pane with the Panels editor. Don’t put much in it. You can use this to do all you styling but what I am trying to do it pin these elements down in CSS so that I have total control. Or more control anyway. Assign this Custom Style to any individual Panel Pane that you want to have these stylings. **

2 and 3- The Style has been assigned to a Panel Panes individually. Looking at the Firebug stuff (yes, I’m just using Chrome at the moment) you can see that each of these Panel Panes Elements now derives their styles from the .pane-plain-box.bs1 selector. So when I make a change to the one selector, only the two Panes that have been assigned that style are affected.

Now, I have to copy that css file to my subtheme and add it to the .info file. As long as I don’t change the style in the Drupal Stylizer or change it on the Panel Pane, the CTools generated name should stay the same and I should not have to worry about the file being overwritten and my changes lost. I think…. I’ll know after a bit but I think that this will work.

There may be a better way to do this. If there is please tell me and I will eat crow all day long. This isn’t the best way to do this I am sure….

 

 

I

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!

Rockblocks on the CSS Highway

I need to learn more stuff about CSS and Drupal. Too many disparate elements are styled under the same CSS selectors. So when I add a border to one set of elements, something that I don’t want to inherit that styling does. I’ll work it out and post some details on it.

Removing Bullets with CSS

I want the bullet points gone. Makes my site look like a word doc. I figured that it would be done easily via css and it was pretty simple. You can go fr

learn drupal

om what you see at the top to the bottom with one fell swoop.

The Global.styles.css file determines the css for these (and many more) elements. the one for UL is at line 92 in my at core (subthemed to a new name) theme’s file.

i simply add list-style-type: none; and the bullets will disappear. Easy!

blockquote {}

cite {}

q {}

address {}
/* pjm – added to remove bullets from lists 042813*/
ul {
list-style-type: none;
}

ol {}

li {}

CSS and Custom Content Types

I have a Custom Content Type for Images. I uploaded my logo to the site using this CCT and I also uploaded three images that I am using for my image slideshow that I posted about earlier today. Tonight I went to style the slideshow using some CSS to make a border. And lo and behold, when I make the test CSS changes in Chrome’s analyzer (I use it and Firebug) it changes the other image as well. No surprise really. I believe the easiest thing to do is to maybe create a new content type for things that will serve different purposes. I may be wrong, but I’m gonna try that out.