Pages: 1 
Hi:) I am a first timer building my company website so I decided to go simple, at least until I can get a handle on everything being newly self employed. I thought I would use a template from the quick shopping cart and just modify it. I am about to pull my hair out-if I have any left:). (If I misuse any terms please forgive me I have learned what I know about all this coding in like the last 5 days from reading and researching on line with a total of maybe 12 hours sleep during that time). I followed there CSS coding to change the background image that spands the width of the header but I do not have a clue how to change the image that lies on top of that background image in the left hand corner. Nothing I have tried has worked. I am at a complete loss. Any suggestions? Any help would BE GREATLY APPRECIATED!!!!! This is what they provided for the change in the background image that spans entire header:
Code: css
#header-content {
background-image: url(sample_header.png);
height: 175px;
}
.titles h1.company-name {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
So I got that with no prob changing out the URL addy. But how do I get the other image to layer on top of that one in the left corner? I used firebug and was able to change it there but I couldn't find a CSS coding that would translate what I did in the HTML editing. My brain and eyeballs thank any one who attempts to help me:)!
Member
From: Bega, Sapphire Coast Australia
Registered: 2005-08-18
Posts: 1539
I've been thanked 43 times.
Offline
Well, G'day there cranegirl78! Welcome to SR forum! 
Looks like we're in for some great interaction as you get more of a handle on this stuff. 
Here are some suggestions to help you get the most out of SR:
1) When you find that SR will be of value to you, fill out all the information in your profile, including a photo avatar. This will help us see with whom we are communicating and add to the feeling of community.
2) Give us the URL of the site you are asking about so we can see what it is you are asking. We'll then be able to see the full CSS and HTML codes.
This won't violate the forum rules.
Best wishes,
Laurie.
Australian Exploration and Adventure on Horseback and Motorbike
Member
From: San Antonio, TX
Registered: 2006-08-07
Posts: 507
I've been thanked 27 times.
Offline
Assuming #header-content is a division in the html portion of your page (something like <div id="header-content"> ... </div>), you would probably need to put an image tag just inside the div like this:
Code: html
<div id="header-content">
<img src="mylogo.jpg" alt="Logo" id="header-logo" />
...
</div>
then add the following to your css file:
Code: css
#header-logo { float:left; width:80px; height:80px; } /* or whatever the height and width are for your image file */
Anything inside the division after the image will try to fill in the space to the right of your image first, then if it runs out of room there will start filling in below.
can't give ya more than this without seeing what you're trying to do. Like Laurie said it's easier for us to see what you're asking if you post your URL
Sorry I just published the new site I am working on. The addy is (in signature panel- Nic put it there so it will now be on all your posts now automatically)
I want the Mountain scene to be replaced with my logo.
Warning Label: Please don't judge to harshly this site is TOTALLY UNDER CONSTRUCTION:)
Thanks again I REALLY appreciate it!
Part of my problem is that I can only access the html coding through firebug but I can't edit it. The only way I can access coding through my shopping cart is through Advanced CSS. When I spoke to the shopping cart provider explaining that I made all the HTML changes through FireBug they said that those changes would have to be coded in Advanced CSS not HTML because they could not allow me access to that. So that is what has brought me here in despair and going bald:) I am just glad bald is beautiful or I would be in trouble:).
Member
From: Bega, Sapphire Coast Australia
Registered: 2005-08-18
Posts: 1539
I've been thanked 43 times.
Offline
Ah, great photo cranegirl78, with the little dog looking on.
First up, make a backup copy of your css file. Very important!
Looks to me like the mountain image is this:
Code: css
.sf_extra3 {
background-image: url(images/header-img.jpg);
background-repeat: no-repeat;
float: left;
height: 175px;
width: 240px;
}
Simply delete that bit of code and the picture will disappear.
Then the grass background image will be visible right across the top of the page and your logo, which is text, will move the where the mountain image currently is.
Is that what you want?
By rights you should also remove the html reference to that image, but given that you are not permitted to edit the html, that's the best you can do.
See how you go with it. You can always reload the backup copy if it all goes wrong.
Code: css
/*------------------------------------
Theme Name: Mountain Cabin
Theme#: 240
File: Theme
------------------------------------*/
/*-----------------------------------
Main Layout Tweaks
-------------------------------------*/
.outer {
/* WARNING: borders affect the critical values below, so use them with that in mind. */
/* border-left: 1px solid #f90; */
/* border-right: 1px solid #f90; */
/*** Critical left divider dimension value ** */
/*** Critical right divider dimension value ** */
margin-left: 240px; /*** Critical left col width value ** */
margin-right: 170px; /*** Critical right col width value ** */
}
.left {
float: left;
position: relative; /* Needed for IE/win */
width: 240px; /*** Critical left col width value ** */
margin-left: -240px; /*** Critical left col width value ** */
/*** Critical left divider dimension value ** */
}
.right {
float: right;
position: relative; /* Needed for IE/win */
width: 170px; /*** Critical right col width value ** */
margin-right: -170px; /*** Critical right col width value ** */
/*** Critical right divider dimension value ** */
margin-left: 0; /*** Critical right divider dimension value ** */
}
#page-wrap {
}
/*-----------------------------------
End Main Layout Tweaks
-------------------------------------*/
/*-----------------------------------
General
-------------------------------------*/
body {
background-position: center top;
background-repeat: repeat-x;
}
#sizer {
max-width:none !important;
width:auto !important;
}
#expander {
margin: 0px auto !important;
width: 960px !important;
min-width: 0px !important;
}
.clearfix:after {
clear:both;
content:".";
display:block;
font-size:1px;
height: 0pt;
visibility:hidden;
}
.content {
}
.center,
.float-wrap {
background-color: #FFFFFF !important;
}
#wrapper2 {
}
a:link {
}
a:visited {
}
a:hover {
}
/*---------------------------------------------------
Header
-----------------------------------------------------*/
.header {
}
.sf_extra1 {
}
.sf_extra1 span {
}
.header:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.header {
height: auto !important;
display: inline-block;
padding: 0px;
}
/* Hides from IE-mac \*/
* html .header {height: 1%;}
.header {display: block;}
/* End hide from IE-mac */
/*-------------------------------
Header Content
---------------------------------*/
#header-content {
height: 175px;
background-image: url(images/header-bkg.jpg);
background-repeat: repeat;
height: 1%;
}
#header-content:after {
clear: both;
content:".";
display:block;
font-size:1px;
height: 0pt;
visibility:hidden;
}
#header-content img {
}
.sf_extra3 {
background-image: url(images/header-img.jpg);
background-repeat: no-repeat;
float: left;
height: 175px;
width: 240px;
}
.sf_extra3 span {
}
#logo {
float: left;
position: relative;
display: block;
}
#logo img {
max-width: none !important;
padding: 10px;
}
/*----------------------
Titles
-----------------------*/
.titles {
position: relative;
float: left;
text-align: left;
width: 40%;
}
.titles h1.company-name {
font-weight: normal;
text-align: left;
margin: 10px 0 0 15px;
padding: 0;
}
.titles h3.slogan {
margin: 5px 0 0 15px;
padding: 0;
text-align: left;
}
.header h1 {
margin: 0;
padding: 0;
}
/*----------------------
End titles
-----------------------*/
/*----------------------
Address
-----------------------*/
.address {
float: right;
text-align: right;
word-wrap: break-word;
overflow: hidden;
margin-top: 75px;
margin-right: 15px;
margin-bottom: 5px;
}
.address ul {
}
.address ul li {
}
.address ul li span.adr { /*address */
}
.address ul li span.tel { /*Telephone */
}
.address ul li span.tel span.type { /*What type of telephone */
font-weight: bold;
}
.address ul li a:link, .address ul li a:visited {
}
.address ul li a:hover {
}
.address ul li a.email, .address ul li a.email:visited {
}
.address ul li a.email:hover {
}
/*----------------------
End Address
-----------------------*/
.sf_extra4 {
}
.sf_extra4 span {
}
/*-------------------------------
End Header Content
---------------------------------*/
/*-------------------------------
"TOP" Navigation - Navigation can
go on top or bottom of the
header or in the sidebars
---------------------------------*/
.navigation1 {
padding: 5px;
font-family: Verdana, Geneva, Kalimati, sans-serif;
}
.navigation1 ul {
clear: both;
margin: 0px;
padding: 0px;
}
.navigation1 ul:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
.navigation1 ul li {
list-style-type: none;
float:right;
margin: 0px;
padding:2px 10px;
}
.navigation1 ul li a {
margin: 0px;
padding: 0px;
font-weight: normal;
font-size: 11px;
text-decoration: none;
text-transform:uppercase;
}
.navigation1 ul li a:visited {
}
.navigation1 ul li a:hover {
}
.navigation1, .navigation2 {
margin-bottom:0px;
}
/*-------------------------------
End Navigation
---------------------------------*/
.sf_extra2 {
}
.sf_extra2 span {
}
/*---------------------------------------------------
End Header
-----------------------------------------------------*/
/*---------------------------------------------------
Search
-----------------------------------------------------*/
.quick-search ul li {
padding: 3px 0 3px 0;
}
.quick-search ul li a:link {
}
.quick-search ul li a:visited {
}
.quick-search ul li a:visited {
}
.container-left .textpadder {
}
.container-left .content-block, .container-right .content-block {
padding: 0px;
margin: 0px;
}
.quick-search-header {
font-size: 15px;
/*border-bottom-width: 1px;
border-bottom-style: solid;*/
}
.quick-search-button {
font-size: 10px;
border-width: 1px;
border-style: solid;
margin-top: 4px;
padding: 2px 4px;
}
.quick-search-button:hover {
}
.container-left .quick-search,
.container-right .quick-search {
}
.container-left .quick-search,
.container-right .quick-search, .quick-search {
padding: 0px 5px 5px 5px;
text-align: left;
}
.container-left .quick-search h3,
.container-right .quick-search h3 {
/*margin-bottom: 5px;*/
}
.header .quick-search li,
.header .quick-search h3 {
display: inline;
margin-right: 3px;
}
/*---------------------------------------------------
End Search
-----------------------------------------------------*/
/*---------------------------------------------------
Sidebars
-----------------------------------------------------*/
.container-right {
}
.container-left {
}
.container-left .content-block {
margin: 0;
padding: 0;
}
.content-block table a {
text-decoration:none;
}
.container-right .content-block {
}
.container-left .category-list {
}
.container-right .category-list {
}
.category-list-header {
font-size: 15px;
font-weight: bold;
margin-top: 5px;
padding: 5px;
}
.container-left .category-list h3,
.container-right .category-list h3 {
padding: 5px;
}
.category-list ol {
}
.category-list ol li {
}
.category-list ol li a {
text-decoration: none !important;
height: auto !important;
padding: 7px 5px 7px 15px;
display: block;
width: 220px;
}
.category-list ol li a:visited {
}
.category-list ol li a:hover {
}
.container-left .category-list a:link,
.container-left .category-list a:visited,
.container-left .category-list a:hover,
.container-left .category-list a:active {
}
.container-right .category-list a:link,
.container-right .category-list a:visited,
.container-right .category-list a:hover,
.container-right .category-list a:active {
}
.container-left .content-block h3,
.container-right .content-block h3 {
}
.featured-item {
color: #ffffff;
}
.container-left .featured-item h3,
.container-right .featured-item h3 {
font-size: 15px;
font-weight: bold;
margin-bottom: 10px;
padding: 5px;
color: #ffffff;
}
.product {
margin: 5px;
}
.smallimage {
}
.shortdescription {
padding: 3px 0;
}
.list {
}
.list em{
font-weight: bold;
}
.sale {
}
.sale em {
font-weight: bold;
}
.featured-item-button {
margin-top: 5px;
}
.product h4.title {
font-size: 12px;
color: #ffffff;
}
ol.categories, ol.products {
padding: 0;
}
/*---------------------------------------------------
End Sidebars
-----------------------------------------------------*/
/*---------------------------------------------------
Wrapper
-----------------------------------------------------*/
.wrapper1 {
font-size: 12px;
}
.wrapper2 {
}
.center {
}
.content {
}
.content form {
padding-left: 10px;
}
/*-------------------------------
Alert Messages
---------------------------------*/
#messages {
}
#messages li {
}
#messages li.info {
color: #0099ff;
padding: 5px 0px 5px 5px;
margin-top: 5px;
margin-bottom: 7px;
background-color: #DFDFDF;
}
#messages li.error {
color: #e90505;
padding: 5px 0px 5px 5px;
margin-bottom: 7px;
background-color: #DFDFDF;
}
/*-------------------------------
End Alert Messages
---------------------------------*/
/*-------------------------------
Breadcrumbs
---------------------------------*/
#breadcrumbs {
padding: 5px 0;
}
.breadcurmb {
}
.category {
}
#breadcrumbs span.item {
}
/*-------------------------------
End Breadcrumbs
---------------------------------*/
/*-------------------------------
Welcome
---------------------------------*/
.welcome {
line-height: 17px;
}
.welcome img {
margin-right: 10px;
}
.welcome:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
.welcome { display: inline-block; }
/* Hides from IE-mac \*/
* html .welcome { height: 1%; }
.welcome { display: block; }
/* End hide from IE-mac */
/*-------------------------------
End Welcome
---------------------------------*/
/*-------------------------------
Search Result Controls / Paginator
---------------------------------*/
.search-result-controls {
margin-bottom: 10px;
text-align: center;
font-weight: normal;
}
/*-------------------------------
End Search Result Controls
---------------------------------*/
/*-------------------------------
Category and Search Results
---------------------------------*/
.search-results .content-product {
}
.content-category {
}
.content-product { /*--the whole box - border overwrite--*/
}
.content-product .options li, .content-product .prices li {
padding: 3px;
}
.search-results .content-product dd {
}
.search-results .largeimage {
display: none;
}
.search-results .content-product .content-product-header a {
}
.content-product-header h4 { /*--Box top--*/
font-size: 12px;
font-weight: bold;
}
.content-product-header a:link, .content-product-header a:visited,
.content-product-header a:active, .content-product-header a:hover {
}
.btn {
/*cursor: pointer;*/
}
.btn:hover {
}
dd.content-category-header h4 { /*--Category Title--*/
font-size: 12px;
}
.content-category-header a:link,
.content-category-header a:visited,
.content-category-header a:active {
}
.content-category-header a:hover {
}
dd.description {
}
dd.title, dd.description {
}
/*-------------------------------
End Category and Search Results
---------------------------------*/
/*-------------------------------
Product Layouts
---------------------------------*/
/*----------------------
Upsell tables
-----------------------*/
.upsell-group {
}
.upsell div {
/*border-style: double;
border-width: 3px;*/
}
.upsell-header { /*--this is an h3--*/
font-size: 13px;
padding: 3px;
}
.upsell-item1 { /*--zebra striping on tr's--*/
}
.upsell-item1 td {
padding: 3px;
}
.upsell-item1 td a:hover {
}
.upsell-item2 {
}
.upsell-item2 td { /*--zebra striping on tr's--*/
}
.upsell-item2 td a:hover {
}
/*----------------------
End Upsell tables
-----------------------*/
/*----------------------
Product Detail
-----------------------*/
.product-page {
}
.product-detail {
border-width: 0px;;
}
.product-detail,
.product-primary,
.product-secondary,
.product-options,
.imageanddetails,
.product-bundle,
.product-misc {
}
.product-detail,
.product-bundle {
}
/*-------------
Primary
--------------*/
.product-primary {
border-width: 0px;
}
.product-detail-header {
}
.product-detail-header h2 {
font-size: 20px;
padding: 3px;
margin-left: 3px;
}
.product-image {
margin-top: 10px;
}
.product-description {
font-size: 12px;
line-height: 17px;
padding-left: 10px;
}
.product-features {
}
.product-features ul {
margin-left: 10px;
}
.product-features ul li {
line-height: 16px;
}
.product-features ul li em {
font-weight: bold;
}
/*-------------
End Primary
--------------*/
/*-------------
Secondary
--------------*/
.product-secondary {
margin-bottom: 10px;
border-width: 0px;
}
.product-options {
}
.product-options form ul {
}
.product-options form ul li {
padding-top: 3px;
}
.imageanddetails {
margin-left: 10px;
}
.product-misc {
}
.product-options {
}
.product-detail-button {
}
/*-------------
Secondary
--------------*/
/*----------------------
Product Detail
-----------------------*/
/*-------------------------------
End Product Layouts
---------------------------------*/
/*-------------------------------
Forms
---------------------------------*/
.required {
color: #cc0000;
}
button content-accent1 {
}
/*-------------------------------
Forms
---------------------------------*/
/*---------------------------------------------------
End Wrapper
-----------------------------------------------------*/
/*---------------------------------------------------
Footer-section
-----------------------------------------------------*/
.footer-section {
text-align:center;
clear: both;
/* Min-height fast hack */
min-height:1%;
height:auto !important;
height:1%;
/* End min-height fast hack */
}
#paymentlogos {
text-align: center;
padding-bottom: 10px;
}
/*-------------------------------
"Bottom" Navigation
---------------------------------*/
.navigation2 {
text-align: center;
float: none !important;
margin: 0 auto;
padding-top: 5px;
}
.navigation2 span {
padding-top: 5px;
font-size: 11px;
line-height: 14px;
margin: 0 auto;
}
.navigation2 a {
text-decoration: underline;
}
.navigation2 a:visited {
}
.navigation2 a:hover {
text-decoration: none;
}
/*-------------------------------
End "Bottom" Navigation
---------------------------------*/
.footer {
margin-bottom: 0;
padding-bottom: 7px;
font-weight: normal;
display: block;
position: static;
}
.footer h3 {
font-size: 12px;
}
/*---------------------------------------------------
End Footer-section
-----------------------------------------------------*/
Best wishes,
Laurie.
Australian Exploration and Adventure on Horseback and Motorbike
TY Laurie! BainBrydge (the pup:)) and I found each other on a VERY busy interstate when I was on my way back from meeting a client on a graphics job. After crossing 4 lanes on foot of flying vehicles and climbing a concrete divider he is just one of the furry family members:) That's the pic of us arriving home and me catching my breath:). Hard to take a pic and hold a wiggly worm:).
Actually I have an image I use for my logo. I don't have it up because I wanted to replace the mountain image with it. So how would I code it so I can replace the image with my logo. I have it all ready and it is waiting on photobucket. I sized it when I was in FireBug. I tried that code and it doesn't work-mountain still standing tall. I keep reminding myself you take a mountain down one rock at a time but this mountain is taking FOREVER to take down:). I really appreciate all this help I am going nuts trying to figure it out. THANK YOU for the advice on the CSS file back up. Never thought about that:). Always take notes from a Pro!!! Note taken!!!!
PS
Not sure if I am explaining this correctly but I can't take out code I can only place code in the Advanced CSS. It's a weird thing. I was told this is how they maintain security for the templates?!?!?!?!? Which I get, but ????? It makes it a bit difficult for a newbie to attempt to learn.
Member
From: Bega, Sapphire Coast Australia
Registered: 2005-08-18
Posts: 1539
I've been thanked 43 times.
Offline
Something else you may like to try while you're fiddling, cranegirl78.
This part:
Code: css
#header-content {
height: 175px;
background-image: url(images/header-bkg.jpg);
background-repeat: repeat;
height: 1%;
}
looks to me like the grass image.
Cut the height back from 175px to 100px. This will avoid the image wasting some of your valuable "above the fold" space. If the text doesn't sit right in the 100px space, then adjust tyhe height to suit.
But get one thing fixed at a time or you could be in all sorts of bother, being new to this. 
Regards,
Laurie.
Australian Exploration and Adventure on Horseback and Motorbike
Member
From: Bega, Sapphire Coast Australia
Registered: 2005-08-18
Posts: 1539
I've been thanked 43 times.
Offline
OK.
The URL for your grass image is:
Code: html
http://i429.photobucket.com/albums/qq14/theblackcrane/webpage%20logos/LogoforWebpageTOPAcross.png
I see it's on Photo Bucket and not on your site host's site as a part of the theme. You must have input that URL somewhere in the web building process.
So can you change the second image in the same place. I would think, however, that if the mountain image is a part of the theme and is relates to the bit of css code that I highlighted, removing that code would remove the image. If this is the case, then changing the background image URL to the photo bucket URL for your logo, should change the image.
Have a bit more of a try. I'll have a bit more of a look at the html and get back to you. I'll be surprized if you can't change the image simply by changing the background URL in the css.
Regards,
Laurie.
Australian Exploration and Adventure on Horseback and Motorbike
Member
From: Bega, Sapphire Coast Australia
Registered: 2005-08-18
Posts: 1539
I've been thanked 43 times.
Offline
As far as I can see, this is the css for the mountain image:
Code: css
.sf_extra3 {
background-image: url(images/header-img.jpg);
background-repeat: no-repeat;
float: left;
height: 175px;
width: 240px;
}
As far as I can see this is the html for the mountain image:
Code: html
<!-- 3 --><div class="sf_extra3"></div>
You'll find it in the html code like this:
Code: html
<body class="col2left">
<div id="sizer">
<div id="expander">
<div id="page-wrap">
<div class="header vcard">
<div class="sf_extra1"><span></span></div>
<div id="header-content">
<!-- 3 --><div class="sf_extra3"></div>
<div class="titles">
<h1 class="company-name"><span class="qsc-site-companyname">The Black Crane</span></h1>
<h3 class="slogan"><span class="qsc-site-slogan">Unique gifts for unique people.</span></h3>
</div>
<!-- 4 --><div class="sf_extra4"></div>
</div>
So if you upload your logo to Photo Bucket and put the Photo Bucket URL in .extra3 in the css, you've got it.
If you have trouble coding the css, post the Photo Bucket URL and I'll code it for you.
Regards,
Laurie.
Australian Exploration and Adventure on Horseback and Motorbike
Member
From: Bega, Sapphire Coast Australia
Registered: 2005-08-18
Posts: 1539
I've been thanked 43 times.
Offline
cranegirl78.
I note that there is something going on here that is beyond my understanding. Maybe Steven will help you with it.
I see that the URL for your grass, background image is not called up either in the css or html, yet displays. So I think there must be a redirect working from the htaccess file or something like that, determined by something you've inputted in the template setup.
I suspect you need to find the equivalent box for the mountain image and all will be well. It's difficult to know what is going on with an online site builder that I can't see.
Best wishes,
Laurie.
Australian Exploration and Adventure on Horseback and Motorbike
My site is through godaddy.com. I am using one of their quick shopping cart templates. I couldn't read anything if I didn't have Firebug installed (I wouldn't have figured that out if I didn't find a site that suggested it). I read one of their tutorials on how to change the header and used the CSS they provided to change what they had to my grass pic. But they never changed the Mountain image. So I have been trying everything I could come up with reading on the net. It is weird and I understand they want big $$$$ to design my page but until you make big $$$ you can't pay it. I'm a DIY girl anyways:). Hopefully I will learn enough from you guys to build my own (fingers and toes crossed). Until then I just want the mountain torn down and the Crane logo up:) This is the link to the Crane logo:
http://i429.photobucket.com/albums/qq14 … enBlk4.png
I tried that and it didn't work either.
I hope Steven will come to the rescue. THANKS AGAIN Laurie! At least I feel better knowing it is not just me that is a little confused:).
Thanks again!
Heather
Member
From: Bega, Sapphire Coast Australia
Registered: 2005-08-18
Posts: 1539
I've been thanked 43 times.
Offline