This may have been asked elsewhere, but I am having trouble finding it. Sorry if this is a stupid question, I am very new to all of this...
I am completely new to CSS and Drupal, so I have been having some trouble with this. I am using Display Suite to display fields in three columns. Right now the fields look very drab. I want to put space in between them (wrapper?) and change the fonts, etc.
I have seen how when I click "expert" mode I can change the elements/classes of each field. What I don't understand is, how after I choose elements and classes (supposing I can figure out div vs. span and everything), I directly specify the attributes of the classes. Do I have to edit a file somewhere with code for classes? Should the classes already exist somewhere?
Comments
No question is stupid when
No question is stupid when learning Drupal. We' ve all had to face the drupal learning curve.
An invaluable tool for theming your site is mozilla+firebug. Firebug is an add on for firefox which exposes a web page's css and html. Using it, you can easily see the classes that affect each html element and the css files where the styles are stored. You can then override the default styles in your theme's css file.
In essence, after you specify the attributes through classes, you then create the styles for the class in your theme's stylesheet then inspect the page in firebug to see the classes you specified. Firebug also allows you to make changes to your stylesheet on the browser so the changes are reflected immediately.
You can google firebug for more details. Hope this helps.
Extra classes for regions
Additionally, you may want to use the "Extra classes for regions" tab at the bottom and add CSS classes that you have created/will have to create at admin/structure/ds/styles (the link is there: "Manage region styles"). You must still create the classes in a stylesheet the way Irisibk has explained.
A handfull of often used style classes for fields: "Styles for fields" at admin/structure/ds/styles, is also useful. Then you can "Choose a field style" using standard or minimal field template.
The difference between "Field items" and "Field item" wasn't obvious to me, so I will mention that too, with an example: setting Field items element to ul and Field item to li creates an unordered list.
Have fun, or ask again ;-)
Hey, Thank you both so much
Hey,
Thank you both so much for your feedback!
I ended up finally figuring it out yesterday. Using developer tools in Chrome (I don't have firefox at the moment) helped a lot. I was able to make my own classes and apply different styles to my blocks.
Thanks so much,
Mary