By ail2010 on

Hey Drupal Community,

We're looking to launch our drupal e-commerce site, we're working with an actual drupal developer. However I noticed a trend of "bland" styling on the site I'd like to see if I could change. I don't mind reading up on it and I've been shown alot of the powerful flexibility in drupal. I captured a few pics to give you guys an idea.

https://www.dropbox.com/s/005ven6egq0vzn8/dru1.JPG
https://www.dropbox.com/s/cstd2ibk5pq3p8b/dru2.JPG
https://www.dropbox.com/s/0lxdfulnc5o15ia/dru3.JPG

I'd like to know exactly what option would it be in the theme, css, or module to change how it displays this object. I'm speaking specifically about how the white window with gray font and heading is displayed. I'd like it to have some more style to it. Maybe different shape color of the window and different kind of font?

⋅ Categories: Drupal 7.x

Comments

john_b’s picture

john_b commented

I looked at the jpegs. You can reset the fonts by the selector (maybe h1 or or h2) and addding a css rule for h2 { font-family: Verdana; } or whatever. Some Drupal themes allow you to change fonts from the graphical interface.

I know that is probably not useful, but it sounds as though you are starting with little knowledge of website styling, a complex website, you are asking for a styling 101 tutorial (rather than a Drupal-specific question) on a Drupal forum, and you posted screen grabs which allow only a wild guess about where the background colour and fonts are being set. It does not work that way. Taking a basic course in CSS would be a good start. If you understand basic html and css, one of the best places to learn about Drupal theming is the documentatin on this site http://drupal.org/documentation/theme. There are also books and videos. If the fonts can be set from within the theme then you can ask for an explanation of that during the training which every good Drupal developer will supply to the client as part of the contract to make and maintain a Drupal website.

Digit Professionals specialising in Drupal, WordPress & CiviCRM support for publishers in non-profit and related sectors

ail2010’s picture

ail2010 commented

Thanx for the info. I have had some experience in CSS and was actually looking at the page in Chrome developer mode. I just wasn't familiar with Drupal at all and where would you edit or change the stylesheets.

john_b’s picture

john_b commented

Rule of thumb is never change Drupal core. Check which theme is set as default from source code (look for path yoursite.com/sites/all/themes/[theme-name]/~) or from the Appearance page (accessible from the admin pages, provided you have an admin account). If you have a contributed theme add a custom stylesheet (there may be one already) and edit that so that your styling is not overwritten at every updates. This D6 page for doing so is pretty much right for D7 too http://drupal.org/node/171209. If you have a custom theme you can do what you like as no danger of being overwritten. The theme stylesheets are in sites/all/themes/[theme-name] or a subdirectory thereof.

To check what styling settings are available through gui go to www.yoursite.com/admin/appearance/settings/[theme-name] Some themes have a lot, a custom theme is probaly more lightweight and has fewer.

Be sure to turn off CSS aggregation and clear caches before working on theme. Go to the Configuration page and click performance for those settings.

Digit Professionals specialising in Drupal, WordPress & CiviCRM support for publishers in non-profit and related sectors