×

Notice

The forum is in read only mode.
Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
General
Adding a horizontal bar image below top menu
  • Page:
  • 1

TOPIC: Adding a horizontal bar image below top menu

Adding a horizontal bar image below top menu 14 years 9 months ago #8881

  • Mhike
  • Mhike's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 7
  • Thank you received: 0
Hi Daniel,
Not sure if this would fall under your support but I thought I'd ask anyway.
I wanted to add a red&white horizontal strip across the template just below the top menu module. I was hoping that you can show or point me to the right direction on how to add this on the template? As a temporary work around, I added the strips on top of my logo. But i will need to put some kind of banner on the banner module to the right....which means i will lose half of my strip on that case.
I have attached an image of what i want to do. As always, thanks for any help you can provide.

Adding a horizontal bar image below top menu 14 years 9 months ago #8885

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
Hey Mike, how good are you with css and html?
The question is important so that I can explain everything better to you :)

Adding a horizontal bar image below top menu 14 years 9 months ago #8889

  • Mhike
  • Mhike's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 7
  • Thank you received: 0
I'm a rookie with CSS but have a pretty good understanding on HTML. Thanks again Daniel!

Adding a horizontal bar image below top menu 14 years 9 months ago #8892

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
Cool Mhike,
Than look at this example here: www.netlobo.com/a_div_line_gif.html

You will need to make the same for div#main_nav

the code will be something like this:
div#main_nav{
    background-image: url("path to your image");
    background-repeat: repeat-x;
    background-position: bottom;
}

Adding a horizontal bar image below top menu 14 years 9 months ago #8902

  • Mhike
  • Mhike's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 7
  • Thank you received: 0
Thanks Daniel for those instructions! I really appreciate it!
Looks like I'm still missing something. Please see my result.
I have also attach a screen shot of my css code that i added on my index.php file.

Adding a horizontal bar image below top menu 14 years 9 months ago #8903

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
would you give me a link to the page?

Adding a horizontal bar image below top menu 14 years 9 months ago #8904

  • Mhike
  • Mhike's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 7
  • Thank you received: 0
here you go!
the strips went behind the top menu bar. :)
www.fiblbasketball.com/

Adding a horizontal bar image below top menu 14 years 9 months ago #8907

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
change background-position and add height
background-position: 0 20px;
height: 40px;

cheers!

Adding a horizontal bar image below top menu 14 years 9 months ago #8908

  • Mhike
  • Mhike's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 7
  • Thank you received: 0
Nice! That did it! Thanks so much!

Adding a horizontal bar image below top menu 14 years 9 months ago #8910

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
I'm happy it is working :)
Since you already have the html and css knowledge I would like to invite you to this :)
compojoom.com/blog/8-news/123-how-to-mak...nal-joomla-templates
I'm sure that it will be interesting for you ;)
  • Page:
  • 1
Forum
General
Adding a horizontal bar image below top menu
Time to create page: 0.167 seconds