I searched a lot on the internet to see a general answer about customizing the view of Drupal main components(if I can call them components) like Fields, Blocks, Views...
I know CSS can work and ... but I need to know if I find the html elements in which CSS files I should put the configurations.
I know it depends on theme css files. But which ones should be used for each of those components?
Thanks
Generally, the html files are in the theme folder.
If you are using Omega (for example), in the sites/all/themes/omega, you have the .tpl files, that Drupal uses to render the content.
For example, the file block.tpl.php is the file that contains the skeleton of any block in your site. Of course the content of the blocks is in the block page (not in the tpl).
The node content is in the node.tpl.php file, you may override the skeleton of any content type if you create other tpl file, for example node--article.tpl.php (for article content type).
You have html.tpl.php and page.tpl.php to customize the skeleton of your page. If you add some html in this files, this content appears in all pages.
Maybe this article helps you: https://www.drupal.org/node/171194
Regards.
Related
I often use small, page specific CSS files for a page in Typo3 using css_select. These styles usually apply only to some special element on these pages. Putting these styles in a global file doesn't feel right.
Using css_select I can select a bunch of files that may be included into the page's header, so that it loads it's special styles.
Now I'm looking for a way to do something similar in Django CMS 3. The only built in solution I'd know is to create a new template which seems a bit excessive for a single page where an image needs to be handled a bit differently from all the others, to name just one example.
Is there a way to do this using nothing but django CMS?
If not, is there an app that would do that?
If not, how could an app extend the page admin form in such a way that this function could be added.
You could extend the page.
See http://django-cms.readthedocs.org/en/latest/extending_cms/extending_page_title.html
A good example is https://github.com/nephila/djangocms-page-meta
This the above package allows you to add additional meta tags to page header.
I am Ishika Malhotra, I very new to opencart. I want to make custom themes in opencart using bootstrap 3 technology, I went ahead and followed the few steps below.
I made a copy of default theme and created a new theme mytheme
Catalog>>view>>theme>>default>>
Catalog>>view>>theme>>mytheme (copied css and images and template folder from default theme)
I included bootstrap required files from getbootrap
I am litte bit confused to start and new theme with bootstrap, I made html themme in bootstrap but not able to create one new theme in opencart with responsive features
I need the know all steps to convert from psd to bootstap, then opencart theme.
Please advise
There are not fixed steps , there are just few things you need to take care of :
tpl files are essentially php files and for your case just assume they are html files
Therefore all files in catalog/view/theme/your_theme/template are your tpl files which you will (may) need to edit
your HTML <head></head> section lies in template/common/header.tpl, so this is the file where you will add (reference) your bootstrap js and css files
As the name suggest template/common/ contains html code of parts of page which are common to all pages. e.g. header,footer etc
Put your bootstrap css files in catalog/view/theme/stylesheet/ folder
Put your theme specific image files in catalog/view/theme/image/ folder
That should be all . Just regard your tpl files as html files and do your styling there. Just don't edit/remove anything inside <?php ?> tags
Is there a place where I can place override theme files other than a theme's folder? For example, if I wanted to override the appearance of a view's row in the same style for more than one theme without having to use more than one file.
If there isn't a generic way to do this (for any theme file), is there a way to do it for a view's theme files?
In your module, you can use hook_theme to declare a theme function or template for your view's row. This way, your single template will be used by all your themes without any special code in them. See the Theming your views in your module section in the Views's API Advanced Help page.
You could include an include_once type statement in your tpl.php file and just import the code from where ever. This way you have any number of files that refer to one.
It is not recommended though since if you move your theme folder or rename anything this can be harder. Also if you put your theme in another site you need to keep track of all of these off-theme hacks.
I think views seeks tpls inside of the theme folder. It's be nice to have something like that though.
Apart from the global.css i'm including in my header.php, i would also like to load certain page-content specific styles.
But since my <head></head> is already covered by my header file, and i don't wish to resort to inlines, what is the best way to place the styles on the specific page?
Thanks ! :D
I would try one of the following:
Break the header.php in 2 distinct files to allow any pages including it to add their own link tags
At the top of the file, before including header.php, set an array like $included_css containing styles (style1.css, style2.css). Then in header.php you can do a simple foreach and include them after global.css (to allow them to take precedence)
in our CMS we have a header folder inside the template directory. If you name a file form.tpl its gonna insert it self only in when form.tpl is called (we handle that with the smarty template engine). What is good practice i think.
An other solution would be to uses classes or id's on your body. <body id="suscribeForm"> and to use them as reference in your css. (the problem is the CSS is loaded even if you don't use it, but on the other side its already cashed if the user changes to an other page).
You can link different CSS files in your main CSS also, but this is not a good practice, because your browser is gonna wait until mains.css is loaded and then load the linked 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.