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.

Improve this question
5
  • 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, 2013 at 5:01
  • You have to change it in Jackson theme style.css not in separate folder style.css
    – Bala
    May 9, 2013 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, 2013 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, 2013 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, 2016 at 13:32

3 Answers 3

Reset to default
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.
Improve this answer
4
  • 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, 2013 at 6:51
  • Thank you but I think it is important to add to mytheme because I changed the height dimension.
    – cea
    May 9, 2013 at 6:53
  • so your image path should be something like: ../../images/main-sprite.png
    – AnAnD
    May 9, 2013 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, 2013 at 6:57
0

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

Improve this answer
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.

Improve this answer
1
  • Interesting- I will see if you are right!
    – cea
    May 9, 2013 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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