Forums

Karma Theme Background Header Image Help

Permalink
Hi Everyone,

Im hoping theres someone that can help me as Im totally stumped! Im using the Karma theme, and have been trying to contact the developer for months, vis the support forum as well as PM, but they apparently don't exist anymore, as I have had zero reply.

All I want to do is add a background image into the header area. Ive attached a screen shot and outlines the area I am talking about. I have tried adding css to the 'add your own css' area of the theme edit area, tried adding it directly via the header.php file and also via the css file. But still no go! Ive managed to get it to work in every other theme Ive used, so Im not sure what Im doing wrong here. Any help would be so very much appreciated!

1 Attachment

 
enlil replied on at Permalink Reply
enlil
Is the site live? Can you give us a link? I've never used the theme but I'd be happy to take a poke and try to help you out!
Meje replied on at Permalink Reply
Fantastic, thanks! Ill PM you, as the directory is password protected.
enlil replied on at Permalink Reply
enlil
Hi Meje,
I was able to access the site. By all appearances you need to apply the css to the <header> tag. I would look for it in all of the existing .css files in your theme first, although it doesn't appear there is any kind of style applied to it. Simply adding something like:

.header { background-image: url(http://somesite.com/path/to/image-file.jpg); }

should do the trick. Probably in your theme-style.css file.

You will then most likely want to find the css for your navigation and adjust the top margin/padding as there will be about a 20px gap above it between it and the background image after it is applied.

If you have any further troubles let me know :)
Meje replied on at Permalink Reply 1 Attachment
Thank you for taking the time to look at it. It really does have me totally stumped! I cannot get it to work still, but am sure that Im just missing something and have a feeling that what will be need will be something that deviates from the norm. Im no whiz at coding, however have got a handle on the basics, and have not ben suck on something as simple as background, like I am here.

Ive attached a copy of the there-style.css if that helps at all?
Meje replied on at Permalink Reply
...and the header php file

<!DOCTYPE html>
<html>
   <head>
   <?php     Loader::element('header_required'); ?>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" media="all" href="<?php     echo $this->getStyleSheet('css/bootstrap.css');?>" />
   <link rel="stylesheet" type="text/css" media="all" href="<?php     echo $this->getStyleSheet('css/bootstrap-responsive.css');?>" />
   <link rel="stylesheet" type="text/css" media="all" href="<?php     echo $this->getStyleSheet('css/font-awesome.css');?>" />
   <link rel="stylesheet" type="text/css" media="all" href="<?php     echo $this->getStyleSheet('typography.css');?>" />
   <link rel="stylesheet" type="text/css" media="all" href="<?php     echo $this->getStyleSheet('theme-style.css');?>" />
      <!--[if lt IE 9]>
         <link rel="stylesheet" href="css/font-awesome-ie7.css">
         <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      <link rel="shortcut icon" href="favicon.ico">
Viewing 15 lines of 63 lines. View entire code block.
mhawke replied on at Permalink Reply
mhawke
Try adding this to the .wrapper css that starts on line 12:

.wrapper {
  -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, .2);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, .2);
  /* customize_wrapper_background_color */ background: #FFF; /* customize_wrapper_background_color */
  margin: 20px auto 0px auto;
/* new */
background-image: url(http://www.concrete5.org/themes/version_3/images/bg_header.jpg);
background-repeat: no-repeat;
}


If that works, replace the image URL with something other than the image from concrete5.org ;-)
Meje replied on at Permalink Reply
Thanks for taking the time to help out - unfortunately it didn't work :(
Meje replied on at Permalink Reply
Found it! You need to add the css to .wra on line 22 of the theme-thyle.css

see below:

}
.wra {
  margin-top: 20px;
background-image: url(http://www.concrete5.org/themes/version_3/images/bg_header.jpg);
background-repeat: no-repeat;
}


Just need to play around with the padding now to get it to fill the space.

Thanks for everyones help with this :)
Meje replied on at Permalink Reply
arghh! so frustrating. This worked perfectly in firefox, using the web developer tools to edit the code. But when I apply it to the actual code it doesnt work??
Meje replied on at Permalink Reply
right - fixed!! the url path needed to be adjusted to fit in with what the header php file was automatically putting in front of my url path.

You need to put your image in the following folder:

/packages/theme_karma/themes/theme_karma/images

and use the url path as shown here:

.wra {
  margin-top: 20px;
  background-image: url(/images/your-header-background-image.png);
  background-repeat: no-repeat; 
}
meanfigurines replied on at Permalink Reply
I have the same problem. Can you give me a link to your site for a reference?