Now I seem to be off and running with Drupal, but I see that on my Web-Hosted directory-tree under [/home/public_html/sites/all/themes/"CURRENT DRUPAL WEBSITE"/css]-folder there are many different css files. I am sure there is some method to this madness and these names. I also see that when I use Inspector on Firefox, that many times other css files are being brought in to manage the form of the web-page from other locations, but I don't know where these are.

I have also tried to find web-tutorials on this subject, but I can't seem to locate them. Anybody know about these Drupal mysteries or where any useful documentation might be found?

All these css-files have specific names and I am sure specific functions and they are are kept in specific locations on the folder-tree. This is what I am hoping to understand.

Comments

bander2’s picture

There's not really anything "Drupal" about the organization of css within the theme. It's really up to the author of the theme to do that however they want.

As for Drupal as a whole, css can come from a lot of places. That's because modules can also introduce them.

If you are trying to alter the look of your site, you should read up on theming:

https://www.drupal.org/documentation/theme

It's worth mentioning now that you should not be altering any existing css files in modules or themes. If you do, your changes will be reverted the next time you update them. Instead they need to be overridden. That is what subtheming is for:

https://www.drupal.org/node/225125

- Brendan

chandraswami’s picture

Yes, I am talking about modifying the subtheme, not the original theme. After much struggle, and NO help from Drush or the Drupal-Administrator Control Panel (they both created subthemes that were not really connected), I finally managed to create a working subtheme by hand. And of course with some help from good YouTube tutorials. The 'Level-Up-Tuts' seems to be the best.

I am trying to work with the CSS in these subtheme folders, not the original Omega-Theme.

Anyway, I very much thank you for the heads-up about these CSS-folders being somewhat arbitrary and not canonical Drupal and thank you for the lead on where to find Theming tutorials. Many of the Theming tutorials that I have looked at so far were too deep-end-of-the-pool for me, immediately talking about hooks and PHP and such. Although I have a basic idea of what these are, I am not up for that side of Theming. I am not code-developing a Module or Theme for Drupal, I just want to do something much more pedestrian which is style a website.

Jaypan’s picture

A lot of time, CSS files will be for a specific piece of content. For example, a specific page may have a CSS file for that specific page. Other times it may be a type of content - for example there will be a specific CSS file for nodes, or even for a type of node content. Sometimes it will be specific for a block. And then usually every theme will have a theme-specific file that handles the CSS for the overall elements of the theme.

What can make this confusing for newbies is that when CSS aggregation is turned on, all the files will be compiled into a single file (for faster downloads for users), with confusing names on it. When this happens, the name of the original file is lost, making web inspectors unhelpful in determining where the CSS exists. To get around this, you should turn off CSS aggregation (on a development site, not a live site) which will expose the original file names.

chandraswami’s picture

Thank you for this comment about CSS aggregation, I was about to check out doing it, but I am glad now that I haven't.

I am working directly in the webserver, because, so far I have been unsuccessful at making a Localhost WAMP stack version of my website and I have not yet seen any tutorial on how to upload changes from a Localhost WAMP version of a website to the Webserver version.

boban_dj’s picture

In drupal the css is not arbitrary, it is actually very well organized.
In your sites/all/themes folder, your current theme is doing all the css work for that theme. If you make a theme from scratch, you will see an your_theme.info file. There you can add some files to load with your drupal installation (css or js)
If you want to see just the raw output of drupal, you can install a theme like Tao, this will 'reset" all the css that drupal is giving. So it could be used as a base theme. But this is a bit for advanced users.

Here i wrote some specific steps and good tutorials links where you can learn more about drupal:
https://www.drupal.org/node/2323141#comment-9064387

Also the drupal installation is just a drupal folder with the core inside, your "workspace" is in sites/all folders.
then it is connected with a database, when you migrate from one server to another or localhost on WAMP or XAMPP you just copy the drupal folder and export the database, and import it.

You can do by hand from mysql:
in terminal if you have WAMP installed (my os is linux)
export: mysqldump -u [username] -p [database_name] > [dumpfilename.sql]
import: mysql -u [username] -p [database_name] < [dumpfilename.sql]

Then import the database in mysql or mariaDB, and serve to the http://localhost/your_drupal_folder
So to be clear the three components for migration, drupal core, your sites folder(inside the drupal core folder), the database.
In the sites folder there is a default folder with a settings.php file, and a default.settings.php.
This settings.php holds your info for connecting with the database, so if you want a complete new drupal installation, remove this settings.php, copy and rename default.settings.php and goto localhost/drupal_folder. then the install will start again.

You should play around with it so you understand the drupal core should stay untouched, but playing with the sites folder, settings.php and the database is a must to understand that drupal core with all its modules and themes, should remain untouched so updates or changes easily can be made.

goodluck

Boban_dj

chandraswami’s picture

Thank you very much for taking the time for this reply. I have copied your link to your numerous Drupal-reference-links. Thank you so much. It seem much is hidden in Drupal Documentation unless you know exactly where to look and exactly the nomenclature used.

By the way last night I finally got an Acquia-DevDesktop WAMP-Stack up and running and managed to install Drush, though the Drush part was not easy or straightforward. But now even Drush seems to be working on Windows. I also downloaded the recent incarnation of Drupal so that I am not using the Acquia Version of Drupal.

As an aside, it turns out that the reason that I could not get an Acquia-DevDesktop WAMP-Stack to work before was not due to my Router blocking it somehow, but the fact that when Acquia showcases their WAMP-Stack, the first option that you see is 'BETA' version. This Acquia-DevDesktop is a little too 'Beta' and actually does not work, at least for me. When I downloaded the slightly older general release version, all was happy and fluffy.

So as best as I understand it. The workflow is to design a website on your Localhost version and then when it is everything you want it to be, move it over to you webserver, understanding its 3 major components: Drupal-core-code, the sites-folder, and the database. Obviously you will have to change some of the links and references in the CSS to point to their new migrated equivalents.

boban_dj’s picture

I suggest that you have a look at some basic about Apache server, php and mysql.
This way you will get more clear what to change and what to watch for when you migrate.

It is not that hard really. The stacks like Acquia Dev and Xampp or Wampp are just easy installers for these three Apache , php and mysql (or equivalent database. They also have an easy interface (GUI) for starting stopping, and editing the configuration files.

In your sites/all folder you will see themes folder and modules folde. The modules is for extensions you can download (drupal installs them automatically for you) and to add more functionality to your site. Browse to drupal.org/modules.

The themes is where you can download custom themes, ready for you to use, but you can also make your own theme.
In this custom theme you can change the appearance, through css, or through the templating system drupal provides.

With templates you can change or manipulate the output of the php codes that drupal generates when you use the cms.

Again, at least it really made sense to me when I understand the relation between Apache server, mysql and php, and at the end of course html and css.

Also installing and changing files in your themes or installing modules, also reinstalling drupal, removing your sites folder and install with new drupal core, all this should be clear, before you use an advanced too as Drush.

I hope you don't mind me telling this.
goodluck

Boban_dj

Andrej Galuf’s picture

If you load a theme such as Zen, you will have a lot written in the files themselves or readmes that accompany them.

Specifically for CSS, you can do something quite cool in your subtheme's info file - you can remove the CSS styles from modules by referring to a nonexistant CSS file within the theme. This is amazingly handy if you want to comply with Atomic Design, SMACCS or some similar "standard", keeping all the CSS in one location.