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'));`
}
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 am not sure this issue is related directly to brunch, but it's the first time I use this framework and first time I see something like this ...
I am trying out brunch/with-react skeleton and there is a little issue with my DOM elements.
I changed my body's background color as follow, in app/styles/application.css
body {
background-color: #cfcfcf
}
Here is the result
DOM rendering
I am using Chrome so I went ahead and inspected every elements.
I cannot find any element responsible for this behavior.
Your html pages says:
<link rel="stylesheet" type="text/css" href="/app.css">
But your css filename is application.css
I can't seem to get the thumbnails I have placed on this page to open in the lightbox:
http://prussellartist.com/custom-leather-dog-collar-gallery2.htm
I tried changing the order and placement of these 2 elements:
<link rel="stylesheet" href="dist/css/lightbox.css">
<script src="dist/js/lightbox.js"></script>
At a glance is there anything wrong?
Please take a look at the JavaScript errors ... It seems like you forgot the fourth step of the getting-started guide (http://lokeshdhakar.com/projects/lightbox2/#getting-started) - namely - to include jQuery.
I have spent 2 hours + on the lightbox. I have checked paths to CSS and Javascript. I have used both the included jquery and Google's imported JQuery.
When I click an image it opens a new window with that image larger on a white background. I want it to overlay the current page with <> and x.
You can see an example: http://demopbdesignsource.tierstrategies.com/a.aspx
Thanks
Looking at your code on your page I do not see where you are calling the lightbox.js script - that needs to be called right before the body close tag.
Also lightbox help states : If you already use jQuery on your page, make sure it is loaded before lightbox.js. - ◦Include the Javascript at the bottom of your page before the closing /body tag:
I used the lightbox-plus-jquery.js and called that just before the close of the body tag and it worked. I called the lightbox-plus-jquery.js just before the close of the body tag because it has both jquery and lightbox combined.
I am still working on the page and I am just using html not .net but the lightbox would work the same. If you look at my source you will see the script call right before /body tag.
http://just-in.com/recycledDresser/index.htm
Hope this helps.
Debra W.
You need to call the Lightbox script.
Something like
Placing it in the line before the line works for me.
Both
http://demopbdesignsource.tierstrategies.com/X/LightBox.css
and
http://demopbdesignsource.tierstrategies.com/X/LightBox.js
cannot be found.
The link provided in the question is giving 404 right now.
but I think you just need to follow the steps given at
http://lokeshdhakar.com/projects/lightbox2/
to set up lightbox.
you may have missed either of the following :
Include the CSS at the top of your page in your <head> tag:
<link href="path/to/lightbox.css" rel="stylesheet">
Include the Javascript at the bottom of your page before the closing </body> tag:
<script src="path/to/lightbox.js"></script>
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;
}