Recent
Categories
View Replies (4)

Kindle - backgrounds

0
Votes
Undo
  1. keithvb
    keithvb
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 13 December 2013
  5.  Subscribe via email
Working with the Kindle template: http://work.thesciencecouncil.com/index.php
I've made rather major changes and perhaps have gone beyond what can be done but anyway...

1. Need to make header background transparent or non-existent so the "stripe" can show. The logo will be a png with transparent bg.

2. Want to put peach colored stripe (an image) behind the navbar & extends the entire page width. The image is in place but only shows behind the navbar. Normally I'd make a wrapper for the navbar with width: 100%...

3. I've put a gradient image behind the main content and want to see the gradient. The text & globe are a transparent png. Just can't seem to get rid of the white bg

Thanks for your help.

Keith
Responses (4)
keithvb
keithvb
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
I solved item #3.
Added to custom.css:

#container_main .wrapper960, #container_spacer1 .wrapper960, #container_bottom_modules .wrapper960, #container_hornav_mobile .wrapper960, #container_top3_modules .wrapper960 {
background-color: transparent !important;
}

#main.block_holder {
background-color: transparent !important;
}
#content_full {
background-color: transparent !important;
}
.maincontent {
background-color: transparent !important;
  1. more than a month ago
  2. Commercial Templates
  3. # 1
keithvb
keithvb
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Solved #1. by adding custom.css

#header, #container_spacer2 .wrapper960 {
background-color: transparent !important; /* turns off header bg */
}
#header.block_holder, #footermenu.block_holder {
background-color: transparent !important; /* turns off header bg */
}
  1. more than a month ago
  2. Commercial Templates
  3. # 2
keithvb
keithvb
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
OK. I've got #2 working but I can't believe there isn't a better way...

#hornav {
margin-top: 2px;
/* margin-right: -305px;
width: 1600px; */
margin-left: 330px;
margin-right: auto;
}
.hornavmenu:before {
/* background: url("../images/navbar-bg.jpg";) no-repeat; */

background-position:right top;
z-index: 40;
/* opacity: 1; */

}
.hornavmenu {
height: 30px;
box-shadow:0px 0px 0px #ffffff; /* shadow around navbar */
margin-top: 0px;/* use this to move the menu up (-10px) or down (10px) */
margin-right: 0px;
background-image: none;
background-repeat: none;
border: none;
border-bottom: none;
background-color: transparent !important;
background: url("../images/navbar-bg.jpg";) no-repeat;
margin-right: -305px;
width: 1600px;

}
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Keith

1. Presuming I understand you correctly this can be removed with the following...


#header {

    background: none  !important;

}


2. Presuming I understand you correctly try using the following where image.jpg is your background image...


#container_header {background: url("../images/image.jpg") }


3. Not sure if I understand you correctly here... would you have a URL to an example of the white background?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!