Author Topic: Resolved- Changing the header in allcss template (Read 3412 times)

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:

Here is what is happening:

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?

marathoner · « **Reply #1 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?

nootkan · « **Reply #2 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>

BlackTiger · « **Reply #3 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

nootkan · « **Reply #4 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.

News

Support WebsiteBaker

Author Topic: Resolved- Changing the header in allcss template (Read 3412 times)

nootkan

Resolved- Changing the header in allcss template

marathoner

Re: Changing the header in allcss template

nootkan

Re: Changing the header in allcss template

BlackTiger

Re: Changing the header in allcss template

nootkan

Re: Changing the header in allcss template