I recently started using Drupal for a new website I am trying to build. Front-end is normally what I focus on and I'd use external services to integrate backend functions. In this (and potentially from now on) I want to start using Drupal. Now, I have installed a bootstrap module and want to start adding own css from there but I can't seem to figure out how/where. I can't do it straight into the bootstrap style files so I - apparently - need to create my own theme and place css files in there. This is what I have done so far:
1: Have my css file with the code.
2: Created a new folder next to the bootstrap folder in sites/all/themes.
3: Put the css file in there.
4: Created an my_theme.info file.
But it is not resulting in any changes on the website (it also does not show up in the source code) most likely because it is not being called by Drupal. How can I make sure Drupal calls my css code?
Thanks in advance and take care!
Assuming this is DRUPAL 7 (Drupal 8 uses yaml)
Create a subtheme of the theme you choose.
In the YOURTHEME.info you add a line like stylesheets[all][] = css/style.css
In YOURTHEME/css directory, here you can start writing your css rules in the file style.css
Make sure caching is off or else you will not see your css being updated.
Related
I inherited an already built Drupal 7 site. I have been able to figure out many things. But I am unclear on the CSS. A found a folder full of long-named CSS files but the code is all minified and hard to read. The previous developer had to be using some tools or services to alter and change the code in a more readable way. Does any know what the deal is ?
Also, I cant seem to find any way inside Drupal to enter CSS. I do not even see any classes or ID assigned to the blocks, views, nodes, or fields. So I have no clue how they were able to customize this site at all even though they obviously did. It uses Bootstrap 3 as a theme. Can anyone help explain how this works?
I will try to figure out the essence of the informations you given.
First: You have a Drupal 7 installation with compressed css files based on Bootstrap. That sounds the theme use less or sass precompiler for the theme css and you have the production (builded) instance of the project. Without the uncompressed less/sass/scss files it will be hard to edit the css. if you have no way to get the source files, the best way you can try is to add a extra css file and write you own css in it.
Second: Drupal strictly separates the code from the administration interface. Your PHP, HTML, CSS and other codes (except the WYSIWYG output) should not be entered via the administration interface. That's the best practice way. But anyway, there is a couple of modules that allows to write code inside the Drupal backend like this https://www.drupal.org/project/extra_css_js
Third: As information for you, Drupal 7s End of life is on November 28, 2022 so the best and recommanded way for you is: Freeze the Drupal 7s Instance as is (only Sercurity Updates and Hotfixes) and relaunch the Project with Drupal 9.
Drupal theme css files are mostly located in theme folder like "theme folder/css/style.css". As above mentioned, it might be used css minify tool or module for theme performance aspects. If it is created by drupal tools/module then once cache clear it will delete automatically and regenerate with new one with updated new css code on after page visit. You can also add custom css file by hook alter.
I have been tasked with making a small design change (CSS) to a Prestashop site that used an off the shelf theme.
I know that in WordPress you can make a child theme to put your design changes in which is best practice.
Is there a similar method I should be using in Prestashop? Or alternatively is there anywhere in the dashboard I can put these changes?
If you're building from a default theme, then the correct way would be to go to Themes > Add New Theme > Create New Theme > Copy default-bootstrap and create a new theme.
There are no child themes in PrestaShop (any kind of inheritance system for themes would majorly complicate an already complex system). What you have is what you work with. If you bought a third party theme, then go modify it directly (modify .tpl files, modify global.css, etc.). IF you copied default theme, then work with your copy (just don't work with default theme, it may get updated).
An event better way would be to install compass and modify .sass files (that is the most correctest :D way).
Can't style my menu css,i tried to change in master-ccda(my site www.blobus.on.kg)It helps for 5 minutes than changed back.Please help me to find place where i can change it.
You use a rocketheme/gantry template. Your website has compression/caching enabled for the css. This is enabled either by the template settings or another compression/caching system plugin. Therefore what you get as a final css file, is a dynamically generated compressed css file. Any edits you are doing on this file are getting lost, as soon as the system will generate a new final master.css file.
You need to disable these functions while you are building your website. Doing so will stop the compression of all the css files into one and you will see what rules and from which files your menu and other elements/sections of your website inherit their styles.
In addition keep in mind that it is best to avoid making changes on the core files of your template/extensions.
Gantry templates allow you to create a custom css file where you can put your own css overrides.
The custom css file need to be place inside the css folder of your template and usually needs to have a name of this convention: rt_templatename-custom.css.
The problem is like this:
We're trying to implement a versioning scheme for our CSS and wherever we have accessed CSS through href (like \themes\ssss\abc.css) we append this link with a build number programatically (such as \themes\ssss\abc.css?1011) so that with new build the client gets the latest css files.
The problem is coming in themes. For e.g. under App_Themes we created a theme folder with the name MyTheme; now wherever this theme is used we need the CSS for this theme to be replaced by latest build files. How to do that?
why don't you create a new theme folder on each build/deploy?
Something similar to \themes\ssss-1011\abc.css.
Add some extra hash to your css url ("#somethingnew"). You can also you tools like SquishIt. It also can minify you css/js files.
I am trying to build an website for my college's magazine. I used the "views" module to show a block of static content I created on the front page.
My question is: how can I edit the theme's css so it changes the way that block of static content is displayed?
For reference, here's the link to the site (in portuguese, and with almost zero content for now).
I can't access your site at the moment, so I'm basing this on fairly limited information. But if the home page is static content, the views module might not be appropriate. It might be better to create a page (In the menu, go to: Create content > page), make a note of the page's url, and then change the default home page to that url (Administer > Site Configuration > Site information, 'Default front page' is at the bottom). Although I might be misunderstanding what you mean by 'static content'.
But however you're creating the front page, don't edit the css in the theme - it'll get overwritten next time you upgrade. Instead you need to create a sub-theme.
As an example, if you want to subtheme Garland, in drupal 6. You first need to setup a directory for your themes. Go to sites/all/ in your drupal installation, and create a subdirectory called themes if it doesn't already exist. Go into that directory, and create a directory for your subtheme, say mytheme (i.e. sites/all/themes/mytheme/). Then use your text editor to create a file called mytheme.info in that directory, with the contents:
name = My Theme
version = 0.1
core = 6.x
base theme = garland
stylesheets[all][] = mytheme.css
And then use your text editor to create a file called mytheme.css in that directory, and put the extra CSS in there.
For more information, there's the druapl documentation on .info files and style sheets. Although, you might want to buy a book, as the online documentation isn't great.
The main css file that drives your content is the styles.css file located in your currently selected theme. In your case that means that most of your site styling is driven by this file: /aroda/roda/themes/garland/style.css with basic coloring effects handled by this file:
/aroda/roda/files/color/garland-d3985506/style.css
You're currently using Garland, the default Drupal theme included with the core download, so for best practices you shouldn't edit the included style.css file directly. Instead, you should, as Daniel James said, create a subdirectory in /sites/all called "themes".
If you're using Drupal 6, I'd follow Daniel James directions from there. If you're using Drupal 5, I'd go ahead and copy the garland directory into the themes directory and rename it for something specific to your site (aroda_v1) so you would have something like /sites/all/themes/aroda_v1 which would contain styles.css. At that point, you can edit the styles.css file directly to make any changes you see fit. Hope that helps!
It looks like most of your CSS info is in some *.css files. There is also some inline Style info on the page. Your style for the static info comes from the in-line stuff. I am not sure how Drupal generates the page but the place to start looking is for any properties for "ultima-edicao". That is what the surrounding DIV is called.