Simple CSS Question

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
cbuquid's picture

I'm trying to change some really simple things for css. All I want to do is add borders to the blocks and change the background image.

I know this is simple, but could somebody please walk me through this using the omega theme?

I'd really appreciate it.

Comments

try this

rggoode's picture

Selector.for.Block {
border: 1px solid #000;
background-image: url(PathToImage/image.jpg);
}

change the properties for the border to suit

Roger

_________________

Art has gone to the dogs
GoodeGallery.com

thanks! i'm using the omega

cbuquid's picture

thanks! i'm using the omega theme which breaks it's css files up. Do you know where to put that?

are you using a sub-theme?

rggoode's picture

You want to make a custom CSS for your sub-theme and then declare it in the sub-themes INFO file.

The Starter Kit for the sub-theme has a commented line all set for this. Just un-comment it and name your custom CSS file there. Then you can add any CSS you like to override and add styles of your own.

The lines to edit are near the top of the sub-theme info file and look like this:

; ------- Declare default stylesheets

stylesheets[all][] = css/yourCustomCSS.css

Roger

_________________

Art has gone to the dogs
GoodeGallery.com

Omega has a custom.css file

Enzomaticus's picture

Omega has a custom.css file in the css folder. Put it in there.

Editing Omega CSS is like hacking core...

himerus's picture

The problem with adding CSS to the omega/css/custom.css is that any Omega updates (and there are a lot!) will overwrite those changes.

This is also the reason that subthemes should be placed in sites/all/themes and NOT inside of the Omega package (this is the same with ANY base theme) as updates could destroy a subtheme.

There are commented lines in the starterkit's README.txt file that explain creating a subtheme as well as comments in the .info file regarding adding a custom CSS file to a subtheme.

Typo / brain freeze

Enzomaticus's picture

Sorry - my mistake, that's what I meant to say. Put it in the subtheme css/custom.css.

We've never had any issues using this approach with the Omega theme, in fact I have my own custom.css that I now use on all our projects. It contains my custom block styling, commented out rounded corners for when its needed etc. When the projects is ready to go live I just go through it and delete everything that wasn't used. Its saved me hours.

Wayne

Okay!! My Bad!!

himerus's picture

Okay, I just was unclear on if you were saying edit Omega's own custom.css or the method Roger mentioned above!!
Sounds like we're on the same page!

subtheme css/custom.css not working

RmrJmrGrl's picture

I'm trying to get this to work on my site as well and have the css code in the custom.css file under the subtheme. However, the site isn't "seeing" that css file. I checked the .info file and it seems to be set up correctly. I've also cleared the cache in hopes that would reset and get the css displaying.

Any idea why the site isn't using the css classes I've created?

If you send me an e-mail at

willyk's picture

If you send me an e-mail at willy@mirrormirror.net, I can give you some quick help with the code to sort it out. It's likely easiest to address it by e-mail. It could be to do with your paths, how you have your dev environment setup, caching or the theme code itself.

Custom CSS not visible

giraldo's picture

Go to your theme settings then select Toggle styles and make sure the Main Styles box is checked. That's it.

CSS and Omega

davidgaia's picture

Frustrated :( Although such a great model to build sites, I am finding CSS management really tricky, I want to incorporate @fontyourface stuff, which works on drupal but managed through module, this surely could be managed through CSS? Also, controlling background and general styles, I am using the subtheme option and have it enabled and set as default, do I need Alpha and Omega enabled too? I notice CSS references to these themes. I prefer using a master CSS sheet for style,text etc. I have searched tinernet to no avail. No vids on the latest release of Omega, I must be missing something. Please, please, please someone help.... I know that the Omega 960 grid is the way forward, I just need to have clear guidelines for ensuring all these CSS files don't compete against one another.

I think you are missing a lot

fubhy's picture

I think you are missing a lot here. Start on this page: http://groups.drupal.org/node/155884

Note: The documentation that you can find there is in an early state and has not (yet) been revised by me or Jake and might not be 100% accurate (that's mainly my fault since we have been moving forward at a really fast pace during the last months and couldn't keep up with documenting it all). Those pages are a collaboration of some of the Omega users (thanks guys!!!). They will be serving as a blueprint for what will be in the official Omega 3.x documentation.

There are quite a few resources already that will help you with setting up your subtheme properly. I don't quite understand the sentence "I am using the subtheme option". What is the "subtheme option"? There is no (good practice) way of using Omega without a subtheme. You surely missed something on the concept there.

No, you don't need to (and should not) activate Omega or Alpha.

Look at your theme settings page and check out the "Toggle Styles" tab. There you can see all the stylesheets that Omega loads for you on all your pages. You can deactivate / activate those and combine them in the way that you think suits you (your theme) best. You can of course also deactivate them all and write your own CSS from scratch, its all up to you.

I am not going to describe the whole CSS concept right now. I did that about 100 times during the last months and I think someone gathered all the information that I provided about the concepts on the various places (irc, g.d.o, issue queue) and placed them on one of the documentation pages that I linked above (@see link).

The concept IS completely new to basically EVERYONE who was not involved in developing / debugging / documenting Omega during the past months and might therefore be confusing for you but we spent countless hours on building the architecture and once you understand the basic ideas behind it you will see that it all follows a simple logical structure. There are a few additional topics that you might want to read about before diving into Omega: Responsive Layouts, Mobile First, Content First, Grid systems (960gs), etc.

Make sure you also check out the Omega Learning Session #1 (subtheming Omega) by Jake. Note: "style.css and mobile.css" got replaced by one single "global.css" (you might need to manually activate this file on your theme settings "Toggle Styles" page before it will have an effect if you built your subtheme on the Beta version (we accidently did not enable the "global.css" by default in that version).

thanks too

davidgaia's picture

This is excellent, and really supportive, I am sure I'll be able to move things forward now, I appreciate your time and input. Here's to happy Omega building :)

You don't necessarily need to

bhosmer's picture

You don't necessarily need to use the font your face or the google fonts module. This can be accomplished through CSS as well. You need to download the font or put the proper pointers to it.

@RmrJmrGrl: I sent you an email a while back and offered to help you sort out your issues. I assume you got those fixed and these are new ones you are having?

thanx

davidgaia's picture

Thats what I thought, having now recd. fab comments and further detail of support, I hope to be moving things forward. I really think that Omega is the way forward, lets hope its not the end :)

Creating my subtheme global.css

TomMurphySF's picture

I'm new and having a similar problem.

I go to "Toggle Styles", disable all the "Enable optional stylesheets" except "Your custom global styles (all) - global.css", but it still doesn't seem to recognize styles declared within my subtheme/css/global.css file.

Did I need to do something with this in my subtheme.info file?

; OPTIONAL STYLESHEETS

css[global.css][name] = Your custom global styles
css[global.css][description] = This file holds all the globally active custom CSS of your theme.
css[global.css][options][weight] = 10

Getting closer....
-Tom

global.css stopped working...

otton's picture

Hello! My Omega template worked fine with custom global.css file until at certain point something strange happened and…since that time it refuses to read this file directly. I can’t see it among css stylesheets any more, my Firebug shows that my global.css definitions has been copied to default/files/css/css_F8Upo6Ab7iXwyNp-hypQNeKHz7Ix2OKIoiYCgsVPGlw.css

Making any changes became a nightmare as now I have not only overwrite global.css via ftp, but disable and enable this stylesheet at theme settings as well. This forces Omega to read my global.css settings and copy them to it’s own css_F8Upo6Ab7iXwyNp-hypQNeKHz7Ix2OKIoiYCgsVPGlw.css file.

Please, help!

Forgot to hit reply Disable

Gerard's picture

Forgot to hit reply
Disable aggregation of css in /admin/config/development/performance when you're working on your stylesheet or clear all caches after a change.

Disable aggregation of css in

Gerard's picture

Disable aggregation of css in /admin/config/development/performance when you're working on your stylesheet or clear all caches after a change.

WOW!

otton's picture

Thanks a lot - everything works again :-)

Where do I go from here?

drdave17's picture

Can I get a newbie version step-by-step how to actually add my own custom style? I already have my subtheme setup using alpha version (mytheme-alpha-default-wide.css) along with the other mytheme alpha-default css files I just can't seem to find how to get started. I see the global.css in my own sub-theme directory with only this line.

"/* This file will hold styles for the mobile version of your website (mobile first). /
/
This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */"

Is there like a really simple step tutorial with examples?

Basic Drupal CSS Tut [D7 March 2012]

jebbushell's picture

1 Checkout w3schools.com for CSS tutorials. There are tons of excellent alternatives.
2 Install a developer-friendly browser, e.g. Chrome, Firefox, Chromium.
3 If it's Firefox, make sure that Firebug is installed. I think the others have equivalent by default
4 Navigate to the page you wish to style.
5 Right click on something you want to style. Select "Inspect Element", or similar. A toolkit opens.
6 Explore the toolkit. It is your friend.
7 Note that when you hover over parts of the toolkit, parts of the page get highlighted.
8 Determine the class of an element you wish to style. Pick a div with a class that also occupies a chunk of real estate when you hover over it in the toolkit. Let's say it looks like:

<div id="some-id" class="some-class" ...> ... </div>

9 In global.css make the following entry:

.some-class { background-color:red; }

10 Save your change
11 Refresh your page.
12 Your div should now be unmissably red.
13 You're a styler. Knock yourself out.

.

I am coming from Wordpress

drdave17's picture

I am coming from Wordpress background with css using Firebug/Firefox. So sorry for the mixup.

Right now I have a brand new installation of Omega on a test site as a learning tool. On this new installation I see no styling at all just a plain page unless I enable debugging options which of course only shows blocks, regions, etc. I think they are called. I have at least one content and a block up right now but that's it. I guess I need to add content first before applying the styles sorry for my ignorance.

I will try your advise though and see how far I can get for now, but also just one more question. Don't I need to @import (Wordpress lingo) some source css first into global.css or maybe it's mytheme.info? I know it's called different on Drupal "Overriding core modules and styles" stylesheets[all][] = system-menus.css I think.

Your help so far is a breakthru for me.

Thanks so much!

starter css file

ontological's picture

Hi drdave17, I have found this a useful starting point -- on this page there is a style.css file that you can download. https://github.com/benhosmer/Omega. Put that in your css folder and rename it global.css. What it does is color all of your regions. I've found that makes it easier to get going.

Best regards

I added the file to...

drdave17's picture

I added the file to sites/all/themes/mytheme/css/global.css. Apparently I am doing something wrong. I see no change.

@drdave17 did you trying

jmolivas's picture

@drdave17 did you trying clearing cache ?

--
http://jmolivas.com/
@jmolivas

Yes several times

drdave17's picture

Yes several times

Suggest you look at view

jebbushell's picture

Suggest you look at view source to check that global.css is present, and that it is where you think it is.

There are two references to global.css in the view source I'm looking at. One is easy to read, the other is in an escaped form. Both resolve to the same location.

This is what the easy-to-read one looks like:

@import url("http://tnpr.dev/sites/all/themes/tnpr-omega-xhtml/css/global.css?m0h1tw");

This is the other:

"sites\/all\/themes\/tnpr-omega-xhtml\/css\/global.css":1

Note that the location of my global.css is below the subtheme, not the theme.

Try renaming it to

bhosmer's picture

Try renaming it to subtheme.css.

When I made that guide I was using the 2.x version of Omega. I think there has been a name-change for the css file. Also, make sure it is enabled in the theme settings under toggle libraries.

Should it be subtheme.css?

jebbushell's picture

Should it be subtheme.css? Maybe I've strayed from the path. I use global.css exactly as shown above and it works. That doesn't make it right, of course.

I'm sorry, I've confused the

bhosmer's picture

I'm sorry, I've confused the issue a bit.

If you are using the colored css file from my github account, you should just replace the styles.css file that is created within your subtheme with that file.

This will color the zones and regions for you so you can identify them. You also need to enable the styles.css file from the subtheme settings.

What version of omega are you using? How did you create your subtheme?

Omega Alpha 7.x-3.0 with

jebbushell's picture

Omega Alpha 7.x-3.0 with subtheme TNPR Omega Starter 7.x-3.0.

I don't remember how I created it but it was by the book. I know that because at the time I was a total newb and could not have done otherwise (now only 99.9% newb).

I also have three deltas.

I am not using your coloured css file.

Great looking out guys. Upon

drdave17's picture

Great looking out guys. Upon checking source I had two sub-theme folders in themes directory and the one with the underscore ruled.
Thanks much

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: