Jump to content
Sign in to follow this  
yemoonyah

Bullet points in widgets

Recommended Posts

yemoonyah+    2
yemoonyah

Hi, I'm trying to make my sidebar widgets show bullet points so I added this to custom css:

ul.sidebar_widgets {
	list-style-type: square;
	}

Unfortunately this does not work. Any suggestions are very welcome :-) Thanks

Share this post


Link to post
Share on other sites
Rob    547
Rob

Wow, you've stumped me on this one. I've tried several variables, but none of them resulted in the display of any type of bullet. I'm going to ask one of my colleagues to look into this in the morning. Apologies for the delay.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

No problem, I'll wait :-)

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

Where do you want the bullet points to appear? Can you do a quick mock-up for us?


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Try this, but if it doesn't work, blame Henry! ;-)

ul#list_sb_primary.sidebar_widgets.fix {list-style: square;}


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

Well, tell Henry I said thanks but it doesn't work :-(

Share this post


Link to post
Share on other sites
Rob    547
Rob

Will do!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Henry Perkins+    14
Henry Perkins
div.tabberlive div#thisismyurl_popular_posts_widget-2.tabbertab ul li {
		list-style: square;
	}

Try that... after further inspecting your site. Is this a text widget that you've coded yourself or a widget that comes with a plugin?

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

Hi Henry :-) it's a plugin that displays as a widget and holds three diff. widgets (popular posts, recent posts, categories widget) Tabber Tabs: http://bit.ly/KYTOO7 Code still didn't work. I also tried using your code snippet with just the popular posts widget (not in Tabber Tabs) but it makes no difference. I remember having the same problem displaying bullet points in boxes and back then it worked with the following code (not sure if this helps):

.fboxes ul {
	list-style-type: square;
	margin-top: 5px;
	margin-left: 15px;

Thanks for all the help!

Share this post


Link to post
Share on other sites
catrina    103
catrina

What other CSS do you have? Do you have any CSS for this selector?:

ul

(Yes, just this - all alone) From my experience, a certain attribute wouldn't work for a specific selector/element because it was being overwritten by another one.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

Um, I'm not sure what a selector is but the only code containing 'ul' is the one I posted above. Thanks for trying to help out!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi Yemoonyah, Try using the custom code below and let me know if that works for you!

.tabberlive ul li { list-style: disc; display: list-item; margin: 0.7em 0 0.7em 0.7em; padding: 0 5px; }


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

Sorry, still not working.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi, I have this working on my test site, so the code works. I was using a text widget, what type of widget are you adding to the tabber tab widget area ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

I added -recent posts (standard widget that comes with WP) -categories (standard) - easy popular posts I also just added the normal recent comments widget to test but that also doesn't work. Will see if it's a plugin compatibility issue and report back. Thanks for all the help so far, I really appreciate it!

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

Ok, so it's not a plugin compatibility issue. I deactivated all other plugins but the bullet points still don't show up. Any ideas what else could cause this? Here is all the code in my custom css:

body{}
	
	div.dcol-pad {margin-bottom: 60px !important;}
	
	.fboxes ul {
	list-style-type: square;
	margin-top: 5px;
	margin-left: 15px;
	
	body{
	font-size:16px !important;
	}
	
	.tabberlive ul li { list-style: disc; display: list-item; margin: 0.7em 0 0.7em 0.7em; padding: 0 5px; }

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

After playing around for almost an hour, I got bullets to show up by using:

.tabbertab ul li {
	    display: list-item;
	    list-style-type: square;
	}

If that doesn't work, try adding !important. I think there's some sort of weird conflict going on here but I don't know what it is.


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

Yes, there seems to be a conflict because this is also not working. It's not a plugin issue and otherwise I haven't changed anything. What else could it be?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi Yemoonyah, OK the code below 100% works, however you will need to view your widgets ID's as they will most likely be different to ones I have provided below. Use either Firebug or Chrome's/Safari's web dev tool to find the correct ID for each widget.

#recent-posts-2 ul { list-style: square; display: list-item; margin: 0 20px; }
	#recent-posts-2 ul li { list-style: square; display: list-item; }
	
	#categories-2 ul { list-style: square; display: list-item; margin: 0 20px; }
	#categories-2 ul li { list-style: square; display: list-item; }
	
	#text-4 ul { list-style: square; display: list-item; margin: 0 20px; }
	#text-4 ul li { list-style: square; display: list-item; }
	
	#thisismyurl_popular_posts_widget-2 ul { list-style: square; display: list-item; margin: 0 20px; }
	#thisismyurl_popular_posts_widget-2 ul li { list-style: square; display: list-item; }

  • Like 2

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

I don't know what to say... I replaced the widget ID's (using Chrome web dev tool) but the bullet points just won't show.

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

Just found out I can see the bullet points in Firefox but not in Chrome.

Share this post


Link to post
Share on other sites
yemoonyah+    2
yemoonyah

I found the problem! It was an unclosed block in my custom css. Upgrading to 2.2 showed me there was a LESS error which was the unclosed block. Thanks for all the help!!! I really appreciate it ^:)^

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

hehe really, I was wondering why it was working for me and not yourself. Nice job find the issue! :D


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

The topic was marked as resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • janpeeters
      By janpeeters+
      Over the last month I had extensive communications with the developer of the (premium) Anything Boxes section (in Pagelines store) (Adam Munns) and the developer of the WP Polylang Multilingual plugin (Frederic Demarle).
       
      This was because the following problem occurred:
      Anything Boxes showed all posts of two languages (Dutch and English) on the respective static frontpages for each language. It should of course have filtered posts for Dutch language on the Dutch frontpage and English on the English frontpage.
       
      The solution to this problem was simple in the end. When duplicating a page for use in another language the settings for Anything Boxes were not copied to the new page and I should have set these settings manually again on the new page. I wasn't aware of this, but it makes sense. Because of this the pages didn't know how to differentiate between posts from different languages.
       
      The dev of Polylang told me that Polylang is currently smart enough to synchronize metas like Featured images and page templates but it does not work out of the box with metas created by plugins and themes but (according to Frederic) it is rather easy to add them in the list using the filter 'pll_copy_post_metas'.
      He mentions that he is not sure that these 'PageLines Meta Settings' are stored in post meta but that would make sense according to him. He asks if the Pagelines dev team will be interested to support this feature in the future.
       
      I'm also wondering if you will consider adding Polylang translation support for manually editable strings like the 'Read more…' strings in Pagelines Settings.
       
      Well that's of course up to you but I thought to let you know to be able to take this into consideration. I also post this for other users in case they experience the same kind of trouble and are looking for an answer.
       
      Best regards,
      Jan Peeters
    • bankrollbuilder
      By bankrollbuilder
      I used a custom hook to put a banner ad in my header. It works but its not in the right position. it is centered and above my logo and I would like to float it to the right of my logo in the header. heres the link: http://shaboopie.com/shaboopie-wp/free-logos-pg1/

      thanks.

      Dan B.
    • starlit
      By starlit
      Can one have two hero sections on one page?

      I want a landing page which leads/advertises two subpages.

      Or is there another option?

      Please help.

      THANK YOU
    • hutruk
      By hutruk
      Hi!

      I am using the shortcodes for tabs, as described in the documentation.

      When I insert the following code:


      [pl_tabs][pl_tabtitlesection type="tabs"] [pl_tabtitle number="1"]Title 1[/pl_tabtitle] [pl_tabtitle number="2"]Title 2[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [pl_tabcontent number="2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [/pl_tabcontentsection] [/pl_tabs]

      I get a strange output (in the attachment).

      Any ideas?

      Thanks in advance!

    • MooiWeb
      By MooiWeb
      Hello,

      I would like to align my qtranslate with my breadcrumb so that the flags are on the same hight.
      I'm aware of putting a code in the custom css and tryed severall codes from your site but for now, no succes

      The site i'm working on is http://nieuw.vazdias.nl

      Thx,
      Edwin



×