Blog help

[johnwerun]

Hi guys,

I am struggling to get the blog page of my site to look anything like how I want it to look (basically I want a carbon copy of the blog page in the Kleo demo site).

As it stands currently my blog posts are barely visible despite playing with ‘styling options’ a lot. Posts become visible if I switch display type to standard (rather than grid masonry) , but I’m basically lost. http://www.we-run.co.uk/blog/

I feel as though this might be a simple problem to solve but I’m a complete rookie so any help much appreciated!

Thanks,

John.

[sharmstr]

Hey John,

You have a jquery error that’s preventing all of the code to run. See image: https://24.media.tumblr.com/d87d578bc1f4766a36f88bea6ceeb266/tumblr_n2onppB5PW1squolvo1_500.jpg

For whatever reason, your /kelo/assets/js/scripts.js file is missing the jquery.imgpreload script that’s supposed to be at the bottom of the file. This is what you’re missing

COPY CODE

/* v1.5 */
/*

Copyright (c) 2009 Dimas Begunoff, http://www.farinspace.com

https://github.com/farinspace/jquery.imgpreload

Licensed under the MIT license
http://en.wikipedia.org/wiki/MIT_License
*/
if ('undefined' != typeof jQuery)
{
(function($){

// extend jquery (because i love jQuery)
$.imgpreload = function (imgs,settings)
{
settings = $.extend({},$.fn.imgpreload.defaults,(settings instanceof Function)?{all:settings}:settings);

// use of typeof required
// https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Operators/Special_Operators/Instanceof_Operator#Description
if ('string' == typeof imgs) { imgs = new Array(imgs); }

var loaded = new Array();

$.each(imgs,function(i,elem)
{
var img = new Image();

var url = elem;

var img_obj = img;

if ('string' != typeof elem)
{
url = $(elem).attr('src') || $(elem).css('background-image').replace(/^url\((?:"|')?(.*)(?:'|")?\)$/mg, "$1");

img_obj = elem;
}

$(img).bind('load error', function(e)
{
loaded.push(img_obj);

$.data(img_obj, 'loaded', ('error'==e.type)?false:true);

if (settings.each instanceof Function) { settings.each.call(img_obj); }

// http://jsperf.com/length-in-a-variable
if (loaded.length>=imgs.length && settings.all instanceof Function) { settings.all.call(loaded); }

$(this).unbind('load error');
});

img.src = url;
});
};

$.fn.imgpreload = function(settings)
{
$.imgpreload(this,settings);

return this;
};

$.fn.imgpreload.defaults =
{
each: null // callback invoked when each image in a group loads
, all: null // callback invoked when when the entire group of images has loaded
};

})(jQuery);
}

I guess make sure all of your theme files are up to date.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[johnwerun]

Thanks sharmstr,

Figured out where I’d gone wrong – I hadn’t updated k-elements plugin manually through my ftp. All seems to be sorted now that’s updated.

On a related note, if anyone knows how I can change the colour of the little bar that appears to the left of the post titles, I’d be very grateful. Mine is currently purple (#8A52AD) but I can’t see where I might change this.

Thanks,

John.

[sharmstr]

Hey John,

Glad it sorted.

As far as colors go, they are set by post type. Every different post type as a different color. I dont see in the Admin where you can control those (I could be wrong) so you’ll probably have to override those in your child stylesheet.

Set these to the color you want

COPY CODE

.masonry-listing .format-video .post-title {
	border-left: 3px solid #07baf4;
}
.masonry-listing .format-standard .post-title {
	border-left: 3px solid #8a52ad;
}

.masonry-listing .format-image .post-title {
	border-left: 3px solid #fc604a;
}

.masonry-listing .format-gallery .post-title {
	border-left: 3px solid #43ae9e;
}

.masonry-listing .format-audio .post-title {
	border-left: 3px solid #367bb7;
}

.masonry-listing .format-link .inner-content {
	margin-top: 10px;
	border-left: 3px solid #00c5c4;
}

.masonry-listing .format-aside .post-title {
	border-left: 3px solid #ee2534;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Abe]

Thanks for the help sharmstr. That error indeed came from the fact you haven’t updated k-elements plugin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts