A drupal 7 based website has a custom home page. Presently, the whole drupal website has one css called
style.css
. I have written a new css just for home page. Being new to drupal, I have no idea how to specify to home page to use custom css. How to use <link rel....> kind of thing?
Thanks
Not sure why you would want to do this rather than just using different classes but if you really need to you can add a template.php file to your theme. In there use the hook_preprocess_page to add a new stylesheet depending on the homepage. Change YOUR_THEME to your themes name.
function YOUR_THEME_preprocess_page(&$variables) {
$homepage_id = YOUR HOMEPAGE NODE ID;
if (isset($variables['node'])) {
if ($variables['node']->nid == $homepage_id){
drupal_add_css(path_to_theme() . '/css/homepage.css');
}
}
}
I don't think this is the way to go.
If you customised the homepage, you could add a wrapper with a class specific for the homepage.
Then you could target that class with the style.css file and apply specific styles to the homepage.
Sincerely,
dimitril
Most themes have classes built into the body tag to designate "is front". That said, the proper way to do this is to open up template.php in your theme folder and add this code:
function YOURTHEME_preprocess_node(&$variables) {
$node = $variables['node'];
if (drupal_is_front_page()) {
drupal_add_css(drupal_get_path('theme', 'YOURTHEME').'/css/homepage.css', 'theme');
}
}
You'll replace YOURTHEME with your themes name.
Use the CSS tag .front to target only the homepage in Drupal 7. This works fine for me.
This example will target only the side bar second in the home page:
.front .region-sidebar-second{
background-color: #E9EDF2;
}
Related
I would like to be in a position to switch between themes in primereact rather than import one theme and then it affects my whole app and I don't have an option to switch between dark or light mode.
Observing how they do it on the website www.primefaces.org/primereact/showcase/, open Developer view: Elements, and one can notice that choosing a different theme changes css file link in HTML header:
<link id="theme-link" rel="stylesheet" href="./themes/bootstrap4-light-blue/theme.css">
becomes
<link id="theme-link" rel="stylesheet" href="./themes/bootstrap4-light-purple/theme.css">
It is fairly easy to switch link element HREF from one to another.
This page talks about primereact theme switching:
Switch Your React App Between Material, Bootstrap and Custom Themes at Runtime
But the method it describes is too convoluted, involves ejecting and custom webpack, to bundle all theme CSS files and import them programmatically, like that:
const changeTheme = (theme) => {
import(`./${theme}.scss`).then((module) => {
if (selectedThemeModule) {
selectedThemeModule.unuse();
}
module.use();
setSelectedThemeModule(module);
});
}
Instead, grab the example repo where they do method of link HREF swap: github.com/mertsincan/primereact-dynamic-theming/
example-1 has code for the convoluted method from the above page, you can skip it and go to example-2, which is much simpler.
In a nutshell, add to 'public/index.html', in <header> section:
<link id="app-theme" rel="stylesheet" type="text/css" href="saga-blue.css">
And use this function:
const changeTheme = (theme) => {
let themeLink = document.getElementById('app-theme');
if (themeLink) {
themeLink.href = theme + '.css';
}
}
Then just call changeTheme(XXX) when theme XXX is clicked.
Next put .css files into the right place - just copy all node_modules/primereact/themes/*/theme.css files into public folder (giving them corresponding theme names). Some theme.css reference fonts - search for "url" in each file, and if present, copy corresponding fonts/ directory too.
I should mention that benefits of example-1 is using minified and bundled CSS files, so themes will be switching faster. If that's important, then follow the above linked tutorial and example-1. Also note that example-2 has very similar setup to example-1 (eject and custom webpack config), but only to copy css files to the right output folder, which can be skipped in favor of copying files by hand once.
I want to remove the sidebar from the specific page and all its subsequent pages in Drupal 7
My code is mention below.code is in mytheme_preprocess_node(&$variables) function
if ($variables['type'] === 'project'){
$node = $variables['node'];
if($node->type=='project'){
//print_r($node);
echo $node->type;
unset($page['sidebar_second']);
}
why don't you create a tpl file for that specific content type and remove the sidebar from there ? just an idea
Try restricting the block in Blocks UI or with the Context module.
You can restrict that sidebar content in admin panel itself. login as admin and configure that sidebar block to display only on perticular url.
I am a new developer and I want to implement a popup screen in Drupal 7.
I found a code online and it works, except for the "link rel" code the example has at the <head> section.
The code is the following:
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
I tried opening this link and adding the whole code at the styles.css file, but the popup appears without any style.
Is there a way to do it correctly?
If you added the CSS content to your CSS file maybe you should clear the CSS cache to see changes.
You also should check the selectors match to the CSS rules (for instance with Firebug in Firefox browser).
Or in the template.php you can add external CSS in this way:
function mytheme_preprocess_html(&$variables) {
`drupal_add_css('http://www.jacklmoore.com/colorbox/example1/colorbox.css',`
`array('type' => 'external'));`
}
I need to make the cs-cart home page full width and I'm not able to sort out how to do that.
I can change the "maximal widht" parameter but it affect the whole website.
Any suggestions ?
Thanks !
You can use hook index:content to add all content into a new div that can have different class for homepage and base on that you can change the css only for hompage
For doing that you can use My Changes add-on:
Please add files:
1.
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/content.pre.tpl
with content
{if $runtime.controller=='index'}<div class="homepage">{/if}
2.
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/content.post.tpl
with content
{if $runtime.controller=='index'}</div>{/if}
Please add custom CSS:
please add css and save
.homepage .container-fluid{ max-width: 100%; }
The custom modification is for CS-Cart 4.2.x / 4.3.x on Responsive theme and also require My Changes add-on to be active.
Although I've seen some 'clean' answers on this topic here, it still doesn't work in my case, which is the following: being in Drupal 7 with a completely customized theme, I have created a custom content with the machine name cco_product. I want to override the page markup for the page generated for this content type. I have tried, as per the documentation,
page--cco_product.tpl.php in the tmemes folder, based on /module/system/page.tpl.php, but my Hello world on top of this file doesn't show up.
Thanks for help
First, try clean your cache, if did't help, i can advise to look into the an array of templates for your page. Maybe one of your modules or your custom theme overrides array of templates like this:
function MYTHEME_preprocess_page(&$variables, $hook) {
//Add multiple suggestions for pages based on Node
if(arg(1) == 3) { //For node 3
$variables['theme_hook_suggestions'][] = 'page__contact';
} if(arg(1) == 4) { //For node 4
$variables['theme_hook_suggestions'][] = 'page__about';
}
}