Recent Topics
  1. b2evolution CMS Support Forums
  2. b2evolution Support
  3. Templates, skins, XHTML and CSS
  4. [4.1.x] Blog list widget

[4.1.x] Blog list widget

1 Oct 07, 2012 10:48    

My b2evolution Version: 4.1.x

Hi everybody!

I found "blog list widget" in this forum two weeks ago and I must thank to the author of that, because it is a great tool to show blogs and categories in one menu.

I tried in my multi-blog and worked fine.

But, I would like blogs to be shown in a different way, instead of vertical position, just in horizontal one.
I thought I'd figured out myself, but no luck!

So, can anybody help me on this?

I would like a list of blogs(but an horizontal list) in the header of every blog and when user hover on them the list of each's categories.

Back to top

2 Oct 07, 2012 16:22

.yourbloglistwidgetclass ul li { display: inline}

Back to top

3 Oct 07, 2012 16:45

Thanks a lot for your quick answer!!!

I changed display: inline in blog_list.css, but nothing changed.

Here is the code of the css. You'll see I changed it(.BlogListWgt ul li ) display: inline.


li.BlogListWgt { display:block; position:relative; float:left; padding:0 0 1px 0 !important; margin: 0 !important; text-align:center; background-color:#FFC; font-size: 12px !important; font-weight: normal !important; border:1px solid #CCC }
.BlogListWgt a { display:block; text-decoration:none; color:#333 !important; padding:3px 4px; position:relative; float:none !important }
.BlogListWgt a:hover,
.BlogListWgt:hover a { background-color:#FFC; text-decoration:none !important }

/* Submenus */
.BlogListWgt ul { list-style:none !important; border:1px solid #CCC; position:absolute; display:none; width:180px !important; left:-1px; margin:0 !important; padding:1px !important; background-color:#FFC }





.BlogListWgt ul li { width:100%; display:inline; position:relative; clear:both; float:none; margin:0 !important; padding:0 !important; background:none; line-height:normal; font-size: 12px !important; font-weight: normal !important }






.BlogListWgt ul li a { display:block; min-height:1px; height:auto; padding:3px 4px !important; margin:0 !important; text-align:left; font-size: 12px !important; font-weight: normal !important }
.BlogListWgt ul li a:hover { background-color:#666; color: #FFF !important; font-style:italic }
.BlogListWgt ul ul { left:120px; top:0; border-top:1px solid #ccc; z-index: 5 }
.BlogListWgt ul li:before { content: "" !important }

.BlogListWgt:hover ul ul,
.BlogListWgt:hover ul ul ul,
.BlogListWgt:hover ul ul ul ul,
.BlogListWgt:hover ul ul ul ul ul { display:none }

.BlogListWgt:hover ul,
.BlogListWgt li:hover ul,
.BlogListWgt li li:hover ul,
.BlogListWgt li li li:hover ul,
.BlogListWgt li li li li:hover ul { display:block }

Back to top

4 Oct 07, 2012 16:55

Well, the link inside is block so you have to float the li's by .BlogListWgt ul li { float:left;}

alternatively you can make the links to inline elements as well
.BlogListWgt ul li a { display:inline}

Back to top

5 Oct 07, 2012 17:42

No luck for moment!

Try as you said:
.BlogListWgt ul li { display: inline; float:left;}

I think there is a issue with the top level of the list. As you can see in the next image, the top level is the title of the widget
http://centros.educacion.navarra.es/atargiip/blogak/plugins/blog_list_plugin/now.jpg

And I would to get rid of that title and, instead, the list of the blogs at top level (like, for instance, the public blog widget, one blog, another blog on the right, another one, no in vertical position)

I tried before asking for help changing blog_list_plugin.php

		// START DISPLAY:
		echo $params['block_start'];
		if( !empty($params['title']) )
		{
			echo '<a href="'.$Blog->gen_blogurl().'">'.$params['title'].'</a>';
		}
		echo $params['group_start'];
		echo $r;
		echo $params['group_end'];
		echo $params['block_end'];
	}

But, can't

Back to top

6 Oct 07, 2012 18:49

can you give a link ?

Back to top

11 Oct 07, 2012 19:41

Yessss!!

It is just the way I like

Back to top

13 Oct 07, 2012 20:13

ok, so first off, insert your blog widget in headLeft, its currently in headRight position which is only 30%.

Secondly, get rid of that "Blogs" link on the top, where did that come from ? It covers the whole level by itself and basically does nothing.

Finally, you need to do two things, add an id "catnav" to your top level ul so it reads ul id="categories_nav", and wrap that ul with a div id="catnav".

Back to top

14 Oct 07, 2012 20:45

:'( :'( Sorry for my lack of knowledge, but I don´t know in which files I have to make the changes.

First.... "insert your blog widget in headLeft"
Suposse is not in the widget place of the backoffice !? Where instead?

Secondly.... "get rid of that "Blogs" link on the top" In this case I know how to rid of that, inside the widgets options, because is the title of the widget (
Widget title: )

Finally...."add an id "catnav" to your top level ul" Where? in the blog_list.css ? or in the blog_list_plugin.php?
And... "wrap that ul with a div id="catnav" What do you mind with "wrap"? (In this case, maybe, is a language issue.. I am not english speaker)

Sorry again, but I realize that I don´t understand any of the solutions you give me so politely. It makes me feel so embarrased. :oops: :oops:

Thank you for you patienty

Back to top

15 Oct 07, 2012 22:00

Ok i ll try to make this as easy as i can for you..

grab this: http://www.tilqi.com/assets/sorted_bloglist_plugin_mod.zip

install the plugin, it will install a new widget available, (Sorted Public bloglist Amazing Discoveries) insert it in your "Header" widget container and you should be fine.

Further explanation: The above is a slightly modified version of Afwas' sorted blogs widget, i just added the ID's you need inside the widget.

Back to top

16 Oct 08, 2012 08:56

I'm missing something or something is missing, but after installing the plugin you put in the message, I only got a sorted bloglist, but no categories show when I hover on them.

See the images:

The list of blogs without categories:
http://centros.educacion.navarra.es/atargiip/blogak/plugins/blog_list_plugin/cat_no.jpg

The widget installed:

http://centros.educacion.navarra.es/atargiip/blogak/plugins/blog_list_plugin/widget_installed.jpg

The options of the widget:

http://centros.educacion.navarra.es/atargiip/blogak/plugins/blog_list_plugin/widget_config.jpg

Just in case, is not needed a css file inside the pl[/b]ugin folder?[/size]

Back to top

17 Oct 08, 2012 09:32

What is "jantokia" ? blog ? category ? page ?

I am kind of confused.What was the widget you had there before ?

Back to top

19 Oct 09, 2012 03:30

Ion Rey wrote:

The plugin I had before is "blog list widget"

"Jantokia" is a category inside of "Zerbitzuak" blog. So, as you can see in the image I need a list of blogs with categories - sub-menus

Aah i see, you have been using sam2kb's widget.. Oh i totally forgot about that one.Yea it's cool too, but it's a little more hard to hack into.I'll see what i can do

Back to top

20 Oct 09, 2012 08:22

Correct me if I am wrong. You thought I was trying to hack the chita skin?

By the way, I love this skin. Thank you so much for designing it.

Back to top

21 Oct 09, 2012 15:29

Ion Rey wrote:

Correct me if I am wrong. You thought I was trying to hack the chita skin?

By the way, I love this skin. Thank you so much for designing it.

Not really.The idea of the skin was good, but the skin itself is not very good.And it's kind of outdated now.

Anyway i added an option to sam2kb's plugin to display either blog name or blog shortname, because my normal names were too long.

[url=http://postimage.org/]http://s9.postimage.org/esch9dj8f/men.png[/url]
[url=http://postimage.org/]image ru[/url]

Remove the old one and install this one and you should get the look above.

http://www.tilqi.com/assets/blog_list_plugin_mod.zip

Back to top

22 Oct 09, 2012 16:17

It just I wanted!

Thank you so much!

http://centros.educacion.navarra.es/atargiip/blogak/plugins/blog_list_plugin/yes.jpg

I change a little the code of _blog_list.plugin.php in order to get not all the blogs, but the ones I wanted.

In the line 115, now the code is this:

		$BlogCache = & get_BlogCache();
		$BlogCache->get_by_ID( 11 );
		$BlogCache->get_by_ID( 12 );
		$BlogCache->get_by_ID( 13 );
		$BlogCache->get_by_ID( 14 );
		$BlogCache->get_by_ID( 15 );
		$BlogCache->get_by_ID( 16 );
		$BlogCache->get_by_ID( 24 );
		//$BlogCache->load_all();

Thank you, again for your knowledge and, specially, for your work and patience.

Back to top

23 Oct 09, 2012 17:34

add an !important statement in the line below:


.BlogListWgt ul.root ul li a {
    display: block !important;
}

Back to top

24 Oct 09, 2012 17:46

Ok!
The arrow is now in its place.

Back to top

25 Oct 09, 2012 18:01

Ion Rey wrote:

Ok!
The arrow is now in its place.

exactly (:

Back to top


Form is loading...