Weather by You!

Templates and Projects support => Html Templates => Topic started by: krmidas on March 17, 2013, 10:35:04 PM

Title: Nivo Slider Borders
Post by: krmidas on March 17, 2013, 10:35:04 PM
Jacques,

I'd like to make the white borders around the nivo-slider slideshow translucent, but I'm not sure what the borders are called. I've found files called "cont_bot" and "cont_top" as well as "header_bot" and "header_top", but I'm not sure which file is being used for the frame. In addition, I can't find anything that represents the side panels. I've attached a screen grab showing what I'm looking for .

Any hints?

-Tom
Title: Re: Nivo Slider Borders
Post by: avoorpool on March 19, 2013, 12:48:39 AM
Hey Tom,

I went through he same problem today  :) :)

I only got the top and bottom of the header image correct for adjustments. Look for the following in styles.css:
 .header_top {
   background: url(images/header_top.png) left top no-repeat;
   height: 24px;
}
.header { height:200px;
   background: url(images/header.jpg) 23px top no-repeat #D6DBEB;
}
.header_bot {
   background: url(images/header_bot.png) left bottom no-repeat;
   height: 24px;

I changed the height to 12 px and the borders became thinner (the way I wanted it), HOWEVER, only the header_top and header_bot I could change. No way to find the url(images/header.jpg), so I gave up and modified the entire (954x200) images I use for the header.
In Picasa (free download, and I use it for many image editing) I added the 'Museum Matte' look with a relatively wide border to the images I use as header, and deleted all that had to do with the header in my html pages.
In 'Museum Matte' you can select any color you want as well as the width of the border..!!!
In the html pages, I deleted:
<div class="header_top"></div>
<div class="header">  (changed this to <div align="center">)
<div class="header_bot"></div>

Looks more clean and 'slick' with the much smaller borders...  :)

Cheers,

Arthur
Title: Re: Nivo Slider Borders
Post by: krmidas on March 19, 2013, 10:11:42 AM
Hmmm, I like what you've done very much.

I'm taking various elements of the page and making them 50% transparent so when the birds fly behind them, you can still see them. I've already done this on the blue bar that has all the buttons at the top.

I might just re-create the background border as you've suggested.

-Tom
Title: Re: Nivo Slider Borders
Post by: avoorpool on March 19, 2013, 10:37:35 AM
Hey Tom,

At least I saw my "Who's Online' script works...  ;)

Your Birds are much better visible now, even behind the main frame!!!
Picasa is a nice tool, and I often use 'AVS' ( http://www.avs4you.com/) which has a whole bunch of image software / editors.
No task is too much for this software!!
 
Looks Good!!!

Cheers,

Arthur
Title: Re: Nivo Slider Borders
Post by: krmidas on March 19, 2013, 10:50:16 AM
The only thing you need to add to your site is a favicon!
Title: Re: Nivo Slider Borders
Post by: avoorpool on March 19, 2013, 01:23:46 PM
Hi Tom,

Well.......you inspired me with your great windmeter behind the station's name, so I added a suitable image behind Altona  Forest Weather on each page....

Now, how do I enter a favicon?????

Thanks,

Arthur
Title: Re: Nivo Slider Borders
Post by: krmidas on March 19, 2013, 01:29:40 PM
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
Title: Re: Nivo Slider Borders
Post by: krmidas on March 19, 2013, 02:37:40 PM
You're fast! I saw your favicon when I reloaded your page.

By the way, I used a different piece of HTML for the favicon than the one they show in the tutorial. The kind I use forces a re-fresh everytime the page loads. Otherwise, it can be difficult to get the browser to display the favicon if you've changed it (especially Chrome which will keep showing the old one even if you refresh, clear the cache, shut down and restart, etc.)

Here's the code, which you would use in place of the code the tutorial supplied:

<link rel="shortcut icon" href="/favicon.ico?v=2" />

Just make sure the relative path to your favicon is correct.

-Tom
Title: Re: Nivo Slider Borders
Post by: avoorpool on March 19, 2013, 02:46:57 PM
Hi Tom,

Thanks,
I'll try that..
Interesting you see the favicon, since I don't..... :P

All is obviously done correctly (otherwise you wouldn't see it), so maybe it's the bl...... IE10 Windows automatically installed on my PC.....

Cheers,

Arthur
Title: Re: Nivo Slider Borders
Post by: krmidas on March 19, 2013, 02:52:26 PM
Yup, I've attached.

Try the alternate code I sent. That should force the issue.
Title: Re: Nivo Slider Borders
Post by: avoorpool on March 19, 2013, 03:26:19 PM
Hi Tom,

That's weird.....
I only see the (attachment), even with the code you send me....

Cheers,

Arthur
Title: Re: Nivo Slider Borders
Post by: krmidas on March 19, 2013, 03:40:28 PM
Weird.  Is your favicon in your root directory?

I don't have IE at work, only Chrome and Safari, and it was displaying fine in both.
Title: Re: Nivo Slider Borders
Post by: avoorpool on March 19, 2013, 07:06:22 PM
Hi Tom,

Yes, the favicon is in the root directory, otherwise you wouldn't be able to see it I guess...

Is the position of the <link........./> important??
I put it right below the <title.....>

BTW: My Blackberry shows it correctly (uses Safari).
Must be a stupid IE thing (read about it on the Internet, and many people complain!!!..

Cheers,

Arthur
Title: Re: Nivo Slider Borders
Post by: krmidas on March 19, 2013, 08:08:31 PM
I don't think it matters, as long as it's between <head> and </head>.

Interestingly, on my PC's, your favicon is appearing fine on Chrome and Firefox, but not IE10.

If you do a Google search of "favicon not showing up in IE" there seem to be a fair number of people who have had the same issue.

As I said, my favicon appears for me in IE. Here are my first few lines of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta property="og:title" content="Tom Keramidas Climatological Experience" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://tomkeramidas.com/cumulus/index.htm" />
<meta property="og:image" content="http://tomkeramidas.com/cumulus/images/infos1.png" />
<meta property="og:site_name" content="TKCE" />

<link rel="shortcut icon" href="/favicon.ico?v=2" />
etc. etc.....
Title: Re: Nivo Slider Borders
Post by: avoorpool on March 20, 2013, 03:39:44 PM
Hi Tom,

I've seen the same issues on the Google search, so I blame it on IE...!!!
I've implemented the string on every page, and it shows correctly on my BB, so I leave it for now....

Funny is that I see your favicon correctly displayed on my IE... :o

Even restart, empty cache etc didn't solve it........

Cheers,

Arthur
Title: Re: Nivo Slider Borders
Post by: avoorpool on March 20, 2013, 04:39:29 PM
Hi Tom,

Just did a test at "browsershost.org' and ALL browsers show the favicon, EXCEPT for IE 8, 9, 10... >:(

Time to send Mr Microsoft a message I guess..  :)

Cheers,

Arthur