WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: nootkan on April 07, 2009, 01:23:23 AM

Title: Resolved- Changing the header in allcss template
Post by: nootkan on April 07, 2009, 01:23:23 AM
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:

(http://www.bassonhook.com/vifeheader4.gif)

Here is what is happening:

(http://www.bassonhook.com/screenhunter.gif)

Here is the code I've been working with:
 
Code: [Select]
.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;
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?
Title: Re: Changing the header in allcss template
Post by: marathoner on April 07, 2009, 03:52:59 AM
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?
Title: Re: Changing the header in allcss template
Post by: nootkan on April 07, 2009, 05:33:19 AM
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: [Select]
}
.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;
}
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: [Select]
<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.&#39;/search/index.php&#39;; ?>" method="get">
        <input type="text" name="string" class="search_string" />
        <input type="submit" name="submit" value="<?php echo $TEXT[&#39;SEARCH&#39;]; ?>" class="search_submit" />
        </form>
        <?php } ?>
    </div>
Title: Re: Changing the header in allcss template
Post by: BlackTiger on April 07, 2009, 07:46:30 AM
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
Title: Re: Changing the header in allcss template
Post by: nootkan on April 07, 2009, 08:21:29 AM
Thanks Michael, I got it to work by changing the .banner, search_box code to show just the background image without the logo
Code: [Select]
background-image: url(vifeheader5.gif);  and then added
Code: [Select]
background-image: url(vifeheader4.gif);
background-repeat: no-repeat; with the logo to the .banner code.  Thanks again for your input, greatly appreciated.