Page 1 of 1

Blogger help

Posted: Fri Dec 28, 2012 10:12 am
by LiSkynden
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/

Re: Blogger help

Posted: Fri Dec 28, 2012 11:03 am
by RoadRash
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 -->

Re: Blogger help

Posted: Fri Dec 28, 2012 12:11 pm
by LiSkynden
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?

Re: Blogger help

Posted: Fri Dec 28, 2012 1:42 pm
by RoadRash
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;
}

Re: Blogger help

Posted: Fri Dec 28, 2012 2:26 pm
by LiSkynden
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 :)

Re: Blogger help

Posted: Mon Jan 14, 2013 6:00 pm
by RoadRash
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! :)