WebsiteBaker Logo
  • *
  • Templates
  • Help
  • Add-ons
  • Download
  • Home
*
Welcome, Guest. Please login or register.

Login with username, password and session length
 

News


WebsiteBaker 2.13.8 is now available!


R.I.P Dietmar (luisehahne) and thank you for all your valuable work for WB
https://forum.websitebaker.org/index.php/topic,32355.0.html


* Support WebsiteBaker

Your donations will help to:

  • Pay for our dedicated server
  • Pay for domain registration
  • and much more!

You can donate by clicking on the button below.


  • Home
  • Help
  • Search
  • Login
  • Register

  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Templates, Menus & Design »
  • Resolved- Changing the header in allcss template
  • Print
Pages: [1]   Go Down

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

nootkan

  • Guest
Resolved- Changing the header in allcss template
« 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?
« Last Edit: April 09, 2009, 08:00:04 AM by nootkan »
Logged

Offline marathoner

  • Posts: 495
Re: Changing the header in allcss template
« 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?
Logged

nootkan

  • Guest
Re: Changing the header in allcss template
« 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>
« Last Edit: April 07, 2009, 05:36:26 AM by nootkan »
Logged

BlackTiger

  • Guest
Re: Changing the header in allcss template
« 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
Logged

nootkan

  • Guest
Re: Changing the header in allcss template
« 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.
« Last Edit: April 07, 2009, 08:50:03 AM by nootkan »
Logged

  • Print
Pages: [1]   Go Up
  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Templates, Menus & Design »
  • Resolved- Changing the header in allcss template
 

  • SMF 2.0.19 | SMF © 2017, Simple Machines
  • XHTML
  • RSS
  • WAP2