Resolved- Changing the header in allcss template

WebsiteBaker Support (2.8.x) > Templates, Menus & Design

(1/1)

nootkan:
I've been trying to replace the image in the header with my own image and cannot seem to get it to work without repeating. Here is the image:

Here is what is happening:

Here is the code I've been working with:

--- Code: ---.banner, .search_box {
height: 80px;
background-image: url(vifeheader4.gif);
background-repeat: no-repeat;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
padding-top: 20px;
}
.banner {
width: 530px;
padding-left: 20px;
float: left;
text-align: left;
--- End code ---

I've tried a few things link placing the no-repeat after the image url changing the original script from background-image: repeat-x; to y etc. Also tried changing banner width with no luck. Nothing seems to work. Any ideas?

marathoner:
You didn't provide a URL to see how you are using these classes but I would guess that the first time that you see it is because of the banner class and the second time that you're seeing it is because of the search_box class. Why are you placing the background image in the search_box class?

nootkan:
Sorry but I'm running this on my computer at home with easywamp server. The search bar is in the banner which I like actually. Here is the original code from the template that I changed:

--- Code: ---}
.banner, .search_box {
height: 80px;
background-image: url(header.jpg);
background-repeat: repeat-x;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
padding-top: 20px;
}
.banner {
width: 530px;
padding-left: 20px;
float: left;
text-align: left;
}
.search_box {
float: right;
clear: right;
width: 200px;
}
.search_string {
width: 100px;
height: 16px;
font-size: 10px;
vertical-align: middle;
}
.search_submit {
width: 50px;
height: 22px;
font-size: 10px;
vertical-align: middle;
}
.highlight {
background-color: #D0D0D0;
}
.banner a {
color: #FFFFFF;
}
--- End code ---

Not sure what to give you for the classes as I'm a noob when it comes to php. Here's the script inside the body tag for index.php:

--- Code: ---<body>

<div class="main">

<div class="banner">
<a href="<?php echo WB_URL; ?>/" target="_top"><?php echo WEBSITE_TITLE; ?></a>
<font color="#D0D0D0">| <?php echo PAGE_TITLE; ?></font>
</div>

<div class="search_box">
<?php if(SHOW_SEARCH) { ?>
<form name="search" action="<?php echo WB_URL.'/search/index.php'; ?>" method="get">
<input type="text" name="string" class="search_string" />
<input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?>" class="search_submit" />
</form>
<?php } ?>
</div>
--- End code ---

BlackTiger:
You define the image as background of the two classes banner and search_box so the image behind the searchbox is no repeat. You have to put the background-image directives into the next rule below.

regards
Michael

nootkan:
Thanks Michael, I got it to work by changing the .banner, search_box code to show just the background image without the logo
--- Code: ---background-image: url(vifeheader5.gif);
--- End code ---
and then added
--- Code: ---background-image: url(vifeheader4.gif);
background-repeat: no-repeat;
--- End code ---
with the logo to the .banner code. Thanks again for your input, greatly appreciated.

Navigation

[0] Message Index

Go to full version