0

I am trying to size the banner in a Jackson theme on my site to fit to the 960px wrapper size have in customized folder in sites/all/themes/mytheme/styles/mytheme.css but no matter what I do the length won't change, only the height which makes no sense at all.

I have tried flushing the cache several times but still no changes take effect.

The code in jackson styles.css is

#banner-wrap {
   background: transparent url(../images/main-sprite.png) repeat-x scroll center -90px;
   height: 133px;
   overflow: hidden;
   width: 100%;
}

I have successfully changed the height but if I change width from 100% to 960px it does nothing.

  • 2
    Try changing the CSS using Firebug, Chrome developer tools, etc. If it doesn't take effect there, either, you know your CSS is wrong. – Patrick Kenny May 9 '13 at 5:01
  • You have to change it in Jackson theme style.css not in separate folder style.css – Bala May 9 '13 at 5:27
  • Either do what Bala said or try and use !important when you change the width. .banner-wrap { like you have it now ....; width:960px !important; } – Q10 May 9 '13 at 6:29
  • It is working now - I realized the image was what needed to be changed to be correct dimension for 100% width. BUT NOW the banner image not showing up on forum page but will ask that question separately. Thanks to all. – cea May 9 '13 at 6:52
  • So much confusion on CSS — based on questions to SE — can be avoided with a basic CSS understanding of inheritance, precedence and specificity. developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Screenack Jan 16 '16 at 13:32
0

Make the changes to the style.css file which is in Jackson theme folder. Not under mytheme

  1. Use

    #banner-wrap {
    background: transparent url(../images/main-sprite.png) repeat-x scroll center -90px !important;
    height: 133px !important;
    overflow: hidden !important;
    width: 100% !important;
    }
    
  2. Add this in to style.css file

  3. Flush the cache once.
  • actually I now have it working - my image was wrong dimension! BUT anyway I added that exact code in mytheme folder copied from jackson style.css. – cea May 9 '13 at 6:51
  • Thank you but I think it is important to add to mytheme because I changed the height dimension. – cea May 9 '13 at 6:53
  • so your image path should be something like: ../../images/main-sprite.png – AnAnD May 9 '13 at 6:54
  • I just reloaded the image with correct dimension and placed in sites/default/files and chmoded to 700 and apache chown and now it works except on forum pg and one of views result pg. – cea May 9 '13 at 6:57
0

Keep the 100% width in Jackson theme and make sure the image file is same width as the container.

0

As you theme's css file uses the image. It is better you should put the image in the theme's images folder itself so that you can give corresponding path such as ../images/main-sprite.png. If you place image file under sites/default/files folder then relative path will change every-time you visit different URL. That is the reason why you are not able to get the image on view and forum page. Image path should be accessible from css folder so better to keep the image under jackson_theme_path/images/main-sprite.png. This should solve the problem.

  • Interesting- I will see if you are right! – cea May 9 '13 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.