User avatar
LiSkynden
Posts: 10
Joined: Thu Mar 18, 2010 2:35 pm
Location: Finland

Blogger help

I have a problem that i tried to figure out myself but well, im here now so...
Anyway, i used the Editor to create a gallery and wanted to use it on blogger. I uploaded all the files on my own web, with help of the tutorial, http://highslideinblogger.blogspot.fi/ and used the roadrash.no blogger scripts, ....meaning this:

Code: Select all

<!-- Start Highslide stuff -->
<script src='http://roadrash.no/hs-support/highslide/highslide-full.min.js' type='text/javascript'></script>
<script src='http://roadrash.no/blogger/highslide.blogger.config.js' type='text/javascript'></script>
<link href='http://roadrash.no/hs-support/highslide/highslide.css' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://roadrash.no/hs-support/highslide/highslide-ie6.css" /> <![endif]-->
<!-- End Highslide stuff -->

... but something aint right. My blog page looks like this:
http://venlahopea.blogspot.fi/
and like you can see, the photos dont act like they should. Also, the gallery doesnt look like it should. It should look like this:
http://www.ooh-yesmaam.com/venla/xhighs ... xample.htm

So ... Which files i should link via my own web to make it look like it should and make the photos act like they should? (any other mods i should do to make it work?)
Files are here http://www.ooh-yesmaam.com/venla/highslide/
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Blogger help

Hi,

You need to use the JavaScript and CSS files from the Editor when you are using the HTML code from the Editor.
Replace this:

Code: Select all

<!-- Start Highslide stuff -->
<script src='http://roadrash.no/hs-support/highslide/highslide-full.min.js' type='text/javascript'></script>
<script src='http://roadrash.no/blogger/highslide.blogger.config.js' type='text/javascript'></script>
<link href='http://roadrash.no/hs-support/highslide/highslide.css' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://roadrash.no/hs-support/highslide/highslide-ie6.css" /> <![endif]-->
<!-- End Highslide stuff -->
With the files placed on your own server:

Code: Select all

<!-- Start Highslide stuff -->
<script type="text/javascript" src="http://www.ooh-yesmaam.com/venla/highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="http://www.ooh-yesmaam.com/venla/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.ooh-yesmaam.com/venla/highslide/highslide.css" />
<script type="text/javascript">
	hs.graphicsDir = 'http://www.ooh-yesmaam.com/venla/highslide/graphics/';
</script>
<!-- End Highslide stuff -->
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
LiSkynden
Posts: 10
Joined: Thu Mar 18, 2010 2:35 pm
Location: Finland

Re: Blogger help

YES!!! I knew i could trust you, as always :mrgreen: Thank you! It works now
http://venlahopea.blogspot.fi/

One thing tho, there is an extra white border around the thumbs ... any idea how to fix that off?
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Blogger help

ThereÔÇÖs a conflict with some of the Blogger CSS.
Find this at the bottom of your highslide.css file:

Code: Select all

.highslide-gallery ul li {
	width: 106px;
	height: 106px;
	border: 0px solid #D0D0D0;
	background: #FFFFFF;
	margin: 3px;
}
Replace it with this:

Code: Select all

.highslide-gallery ul li {
	width: 126px;
	height: 126px;
	border: none;
	background: #FFFFFF;
	margin: 3px;
}
.highslide-gallery ul li img {
	padding: 0;
}
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
LiSkynden
Posts: 10
Joined: Thu Mar 18, 2010 2:35 pm
Location: Finland

Re: Blogger help

That worked, and now the thumbs fit on the layout perfectly! Thanks. :mrgreen: I knew this part of the CSS, but i didnt know what to change there.

i was gonna remove this from my post but use it as reference if you wanna take a look at it or something ... this next thing is just in the mobile version of Blogger.
If you view the page in web version, the gallery looks normal! ...



The gallery on looks quite weird in iPhone (4) the thumbs are not like they should ... let the screenshot show it to you.
Also, like you can see the <ul> bullets are showing.

Image




Anyway, big thanks to you again, and happy new year from Finland :)
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Blogger help

The mobile template doesnÔÇÖt read the highslide files that are included in the regular template.
My blog is updated to fix this: http://highslideinblogger.blogspot.no/
Note that the highslide files must be included in a Gadget instead of the template.

Happy New Year from Norway! :)
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no

Return to “Highslide Editor”