Problem with exercise in CSS chapter for Build your first Drupal 7 site

29 replies [Last post]
bneale
Offline
Last seen: 6 years 24 weeks ago
Joined: 2011-07-27

I've been running through the most excellent Build your fist Drupal 7 site videos. Finally got stuck on one part, the exercise in CH14. I created a CSS Injector rule below, but it does not affect the page when it's implemented. The picture does not float right with a margin as intended. It remains flush left at the top. Also, the breadcrumb is unaffected by the .breadcrumb item. I was able to use firebug and make the various interactive firebug changes (like font size changes) shown in the video.

On my test site, the phil-terry page is located at url: http://localhost/drupal/guides/phil-terry#

The rule is set to apply to only the listed pages. The pages listed are:
drupal/guides/* (and I've tried guides/* as well. I'm assuming I should the drupal part in the path)

The injector rule is below Any idea what's not correct or what I should check?

Thanks!

CSS Injector:
.field-type-image .field-name-field-guide-image {
float:right;
margin: 0 0 1em 1em;
}
.breadcrumb {
display:none;
}

obrignoni
Offline
Last seen: 7 years 1 day ago
Joined: 2011-02-28
To see the changes, you must

To see the changes, you must clear the cache at Configuration > Development > Performance. Did you clear the cache?

bneale
Offline
Last seen: 6 years 24 weeks ago
Joined: 2011-07-27
Yes, all caches cleared.

Yes, all caches cleared. Closed and reopened browser.

paul1
Offline
Last seen: 6 years 28 weeks ago
Joined: 2011-07-27
css_injector not working

I have the same issue with the css injector module as as well.

I'm Running aquiaDrupal with Drupal 7.7 with the css_injector 7.x-1.5 module installed on an xp box
I've tried this in FF 5, IE 8 and Safari

In firebug I can add the temporary rule
.breadcrumb{display:none;}
the breadcrumb is not displayed.

I add the rule to the css_injector module and it does not work.

I emptied cache, but that does not help.

I looked at the reports tab and I see this

CSS Injector directory writable Not writable
CSS Injector Directory public://css_injector is writable

So my css_injector file is writable.

I open the css_injector_2.css file and I can see the rule that I wrote, but I think it's not being read at runtime.

When I change the css rule for .breadcrumb in themes/bartik/css/style.css on line 1057
the breadcrumbs are not displayed.

What to try next.

fsjay
Offline
Last seen: 4 years 4 weeks ago
Joined: 2011-07-13
Mine works

Mine works fine.

http://www.askaboutdrupal.com/lesson6/guides/phil-terry

I think Im running an older version of 7.x though.

paul1
Offline
Last seen: 6 years 28 weeks ago
Joined: 2011-07-27
RE: Mine works

fsjay, I looked at the site you posted above, however the breadcrumb is still there.
When you click on any of the tabs besides the home page the breadcrumbs are still there.
So then, your css_injector is not working.

paul1

Chris Shattuck
Offline
Last seen: 3 days 10 hours ago
Joined: 2009-08-16
Hello bneale and Paul, Let's

Hello bneale and Paul,

Let's see if we can figure out what's going on here.

The first step is to make absolutely sure that the CSS isn't being added to the page.

1) View the source code of your page in the browser. Do a search for "css_injector" and see if you can see any css files being included. You'll see something like this:
@import url("http://loc.magnifascent.com/sites/default/files/css_injector/css_injector_2.css?lkqqpp"); . If it's not being included, then there is likely a permissions problem with the folder. Try giving /sites/default/files/css_injector full read/write permissions and then clearing the cache like obrignoni mentioned above.

2) If you see it there, let's make sure it's not empty by viewing it in the browser. You can copy the URL in the line you see (for the example above it's http://loc.magnifascent.com/sites/default/files/css_injector/css_injecto...). If you see the CSS code here, then it means that it's being included. If you're not seeing code here, it means that there may be a permissions problem. Try setting the folder /sites/default/files/css_injector to have full read / write permissions and then clear the cache to see if that solves the problem. If not, it means the CSS is not having an effect and it could be that the identifiers being uses are outdated.

Let me know if you're seeing the CSS in the file and it's not sticking, and I'll double-check to make sure that the selectors are still current with the latest version of Drupal.

Thanks!
Chris

paul1
Offline
Last seen: 6 years 28 weeks ago
Joined: 2011-07-27
css_injector

Ok everyone, I got the css_injector fixed.

I'm running Core Drupal 7.7 in aquia-drupal stack on xp

The problem: the relative path for the injector files are being set incorrectly by the module.

I went to the css_injector page and looked at the bug reports and sure enough at the end of the comments there is a patch. Find the bug report here: http://drupal.org/node/1044670

Get the patch here (right click on the link and "save as": http://qa.drupal.org/pifr/test/158179

To patch the module I had to install cygwin (a linux emulator)
Find out how to install cygwin here: http://www.lullabot.com/videos/install-cygwin-windows-xp

After you install cygwin you have to learn how to use the patch command.
You can learn how to do that here: http://linux.about.com/od/commands/l/blcmdl1_patch.htm

After patching the css_injector module I removed the old css_injector module and the css_injector folder it made in my site then reinstalled the patched css_injector module.

I then ran update.php

Next I enabled the css_injector module and set two new rules

.breadcrumb {display: none;}

and

.field-type-image img, .user-picture img{float:left}

I opened my site in safari (as a anonymous user) and sure enough the breadcrumbs are gone on all pages, not just the home page.
My lightbox images are floating to the left as well.

I opened the source and I now see that the css_injector style sheet is being included.

@import url("http://raising-dogs-with-calmness:8082/sites/raising-dogs-with-calmness/files/css_injector/css_injector_4.css?lpn01s");
@import url("http://raising-dogs-with-calmness:8082/sites/raising-dogs-with-calmness/files/css_injector/css_injector_5.css?lpn01s");

Hope this helps someone

Chris Shattuck
Offline
Last seen: 3 days 10 hours ago
Joined: 2009-08-16
Nice detective work, Paul!

Nice detective work, Paul! Thank you for posting your detailed solution. It looks like the development version of the module has been updated, so you can now download that instead of going through the patching steps above (though nice work with that, understanding patching will be very useful).

Thanks again!
Chris

paul1
Offline
Last seen: 6 years 28 weeks ago
Joined: 2011-07-27
css_injector patch

Chris, thanks for the encouragement.
Where did you see the new css_injector version?
I originally downloaded the css_injector-7.x-1.5.zip which is the latest version that I saw.
That version doesn't set the path correct so I used the patch on it and now it works.

Am I missing something?

core drupal 7.7 on top of acquia-drupal-win-7.2.3-5590.28012.exe
XP pro, FF 5, IE 8, Safari 5.0.1, Opera 11.11

paul

Chris Shattuck
Offline
Last seen: 3 days 10 hours ago
Joined: 2009-08-16
It sounds like you got this

It sounds like you got this figured out in your next comment, but the idea is that the dev and official releases have their own naming sequence. But, you can look at the Date column to see the release date and judge which is the newer version. The dev version will probably always be the latest, but there are some downsides to using the dev version, which I talk about a bit in http://buildamodule.com/video/build-your-first-drupal-7-web-site-trouble... .

Cheers!
Chris

bneale
Offline
Last seen: 6 years 24 weeks ago
Joined: 2011-07-27
css_injector

paul1 - thanks for all the detailed info. I tried doing the patching but kept getting an error that the patch ended prematurely. However, I downloaded the latest dev version of the injector module and that seems to fix it too. Turns out that wasn't the only problem. For some reason, the css code wasn't working either. When I replaced my rule with your rules (which were slightly different) the picture float and breadcrumb removal both work. Onward! Again, thanks!

paul1
Offline
Last seen: 6 years 28 weeks ago
Joined: 2011-07-27
bneale

The patch command ended prematurely for me as well, but that was because of the -p0 attribute which strips off the "/" at the beginning of the path. Since my patch was in the same directory as the the three files that needed repair, I used: patch < filename.patch and all went smooth.

I used the stable version because the dev number is smaller than the released version, go figure.

I'm glad you are up and running !

I'm going to bail from the bartik theme for now and try the "Danland" theme because it includes a local.css file that can be used to override the default rules. I find that easier than messing with the css_injector module. There are other features that make it attractive to me as well, like suckerfish menus etc.

Danland has some pretty good documentation too.

I was able to re-size the header height, changed the logo size and it's placement, moved the site name to -9000px so it doesn't appear on the site but it can still be printed. The spiders will still read it too so the value the SEO's give to the "h1" tag isn't lost.
I repositioned the slogan and it's font styles as well and all without much fuss.

Using other themes is pretty cool too; if you don't like it, just switch it out for another until you find one that suits my/your needs.

fsjay
Offline
Last seen: 4 years 4 weeks ago
Joined: 2011-07-13
alternative idea

In looking the comments for this thread, I see the only solution is to install the 'dev' version of the CSS Injector module?

I didn't want to resort to that (I don't) even like using modules that are in beta, so I thought of an alternative solution.

I created a new Rule in CSS Injector:

.breadcrumb {display: none;}

but the path was this:

/#overlay=admin (option selected - Add on every page except the listed pages.)

And it seemed to work. No breadcrumbs on the website, but breadcrumbs still appear in the admin.

What you think?

thanks.

paul1
Offline
Last seen: 6 years 28 weeks ago
Joined: 2011-07-27
fsjay

As long as it doesn't show up in the live site, that is a good thing.

However, it seems to me that the best solution is to abandon the css_module altogether.

An alternative solution would be to do the following.

1) Copy the bartik theme, or whatever theme you're using

2) Save it in your local site theme folder

3) Rename it to reflect your site name

4) Add your own style sheet to the .info file
stylesheets[all] = yourCSSFile.css)

5) Add the theme as the the default theme in the "Appearance" tab

6) Add your own rules.

You will eventually do this anyways unless you are satisfied with the "out of the box" theme look and feel.

As a webmaster, I always customize all my clients sites to fit the need of "their" target audience.

This has been an enlightening experience.

Chris, what do you think?

It seems to work for my development site and from what I can tell, as we learn and develop our Drupal skills we will be sub-themeing most of our sites anyways.

Chris Shattuck
Offline
Last seen: 3 days 10 hours ago
Joined: 2009-08-16
Good thoughts, Paul. I used

Good thoughts, Paul.

I used the CSS Injector module in the Build Your First Drupal 7 Web Site collection because the goal was to demonstrate how much can be done without creating a custom theme or module. However, for developers and themers, you will almost always create your own theme or sub-theme. The Drupal Theming Essentials walks you through the most common approaches to theming, like the 'cloning' approach you outlined above, Paul. It would probably have been a good idea to mention this at some point in the site building series.

For what you're doing, I might investigate creating a sub-theme instead of cloning the theme. That way, you're not duplicating code or files and as updates are made to Drupal core, you get to benefit from these, whereas with a cloned theme, you'd have to do updates manually.

Cheers!
Chris

paul1
Offline
Last seen: 6 years 28 weeks ago
Joined: 2011-07-27
Chris

I am so used to coding everything myself including php and js and the css_injector module just wasn't working for me so it was easier for me to clone.

Funny though, I thought I was sub-themeing not cloning, humm!
I'll have to march on through your other tuts.

It will take a while for me to wrap my thoughts around doing things the Drupal way.

In the end, I think it will produce beautiful SEO friendly sites.

Thanks for your work and reply's.

Paul

Chris Shattuck
Offline
Last seen: 3 days 10 hours ago
Joined: 2009-08-16
Awesome, great workaround!

Awesome, great workaround! Hopefully there will be a new release of CSS injector before too long, but if you can get a rule to work for you without using the dev version, that seems ideal.

fsjay
Offline
Last seen: 4 years 4 weeks ago
Joined: 2011-07-13
thanks!

thanks!

angeloca
Offline
Last seen: 2 years 48 weeks ago
Joined: 2010-04-09
Even bigger problem

The URL in that exercise is absolute, making the website not relocatable. In the CSS Injector rule I put this rule: background-image: url("../clouds.png");

Doing this, I can move the whole installation elsewhere, without breaking the CSS for the background.

rgmarquis
Offline
Last seen: 4 years 30 weeks ago
Joined: 2012-11-30
Still doesn't work in 7.18 with either module

I'm running the latest Drupal 7.18. I initially tried the CSS injector module 7.x-1.7. No change on the guide page after creating the rule. Searched the HTML in Firebug for "css_injector" and got nothing.

With some difficulty, I uninstalled the recommended module. I tried to install the dev version but received an error stating that CSS Injector was already installed. AS it turns out, while it indicated the uninstall was successful, it was still appearing in the modules list as disabled. So, I manually removed the directories /sites/all/modules/css_injector and /sites/default/files/css_injector.

After that, I was able to install the 7.x-1.x-dev version (2012-Sep-07), but still had the same problems. I even changed the permissions on the /sites/default/files/css_injector directory from rwxrwxr-x to rwxrwxrwx. Still, a Firebug search of the guide page yields no "css-injector" in the html of the guide page.

I haven't tried the patch from #7 yet, but both the recommended and dev modules are newer than the patch.

Now what?

rgmarquis
Offline
Last seen: 4 years 30 weeks ago
Joined: 2012-11-30
Patch failed.

Ok... I tried to apply the patch to the latest recommended module using:

patch -o css_injector-7.x-1.7-patched.tar.gz css_injector-7.x-1.7.tar.gz css_injector.fix_path_fiddling_1044670_12.patch

The result:

patching file css_injector-7.x-1.7.tar.gz
Hunk #1 FAILED at 67.
Hunk #2 FAILED at 101.
2 out of 2 hunks FAILED -- saving rejects to file css_injector-7.x-1.7-patched.tar.gz.rej
patching file css_injector-7.x-1.7.tar.gz
Hunk #1 FAILED at 61.
1 out of 1 hunk FAILED -- saving rejects to file css_injector-7.x-1.7-patched.tar.gz.rej
patching file css_injector-7.x-1.7.tar.gz
Hunk #1 FAILED at 48.
Hunk #2 FAILED at 67.
Hunk #3 FAILED at 171.
Hunk #4 FAILED at 219.
4 out of 4 hunks FAILED -- saving rejects to file css_injector-7.x-1.7-patched.tar.gz.rej

Drave Robber
Offline
Last seen: 5 years 48 weeks ago
Joined: 2012-08-07
Not tar.gz!

You're trying to patch an archive. That won't work, it's for uncompressed module files.

Patches sort of "know" what files they're supposed to patch as they contain information about file names; on a Linux system, I would simply place the patch in the module folder and use:

patch < css_injector.fix_path_fiddling_1044670_12.patch

On other operating systems, it might be slightly different.

rgmarquis
Offline
Last seen: 4 years 30 weeks ago
Joined: 2012-11-30
Screw it!

Back at it today. I just updated to 7.19; and, as I was moving files around anyway, I just jettisoned the css_injector altogether and subthemed with manual-injected css instead.

Ahh... so much better!

sainath
Offline
Last seen: 5 years 22 weeks ago
Joined: 2013-01-11
Facing the Same issue in 7.19

Hi rgmarquis,

I am facing the same problem in 7.18.

I have updated it to 7.19 but the problem is not fixed.

could you please elaborate on your subthemed concept approach.

Thanks
Sai.

sainath
Offline
Last seen: 5 years 22 weeks ago
Joined: 2013-01-11
It Worked..

Hello,

I put this code instead the one shown in the video and it works..

.field-type-image img, .user-picture img {
float:right;
margin:0 0 1em 1em;
}

.breadcrumb {
font-size:0.929em;
display:none;
}

I don't know the reason, but it worked.

markdm_ktp
Offline
Last seen: 5 years 18 weeks ago
Joined: 2013-05-16
Amazing

All this talk of patches and sainath's suggestion worked. To a 't'.

Thank you

ipclewisg
Offline
Last seen: 3 years 49 weeks ago
Joined: 2015-04-21
CSS_injector

I guess this issue has been around for a long time, followed all the steps in CSS_injector video but it did not work. I notice right away that the path in your video were not the same. Mine is pointing to public://css_injector/css_injector_1.css while yours is
sites/default/files/css_injector/css_injector.css. I looked into the css_injector.css and my rules in the file... I'm running Drupal core 7.36 on Acquia desktop, this module seem to have many issues and has been for a long time. I downloaded the 7.x-1.x-dev and of course now I can't update it or remove it.... so anyone have a clue how I get around it?

ipclewisg
Offline
Last seen: 3 years 49 weeks ago
Joined: 2015-04-21
aslo

when I tried to install something else i get
Archivers can only operate on local files: temporary://update-cache-311a8281/css_injector-7.x-2.x-dev.tar.gz not supported

ipclewisg
Offline
Last seen: 3 years 49 weeks ago
Joined: 2015-04-21
and now it works

I removed all the CSS_injector folders, deleted the rule but instead of installing the Dev version like I mention above I installed 7.x-1-10 recreated the rule and finally my picture floated to the right... sigh lol

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.