Jump to content

Archived

This topic is now archived and is closed to further replies.

DonRicardoRVM

Bulleted lists with icons

Recommended Posts

Jake    74
Jake

Hi DonRicardoRVM - The circle icons are there because they are the default icon for an unordered list. If you remove the UL and LI parts of the code you're using and simply have the icons in front of your text like

<i class="icon-li icon-ok"></i> Bulleted lists (like this one)
<i class="icon-li icon-ok"></i> Buttons

etc, you'll achieve the look you're after.

  • Like 2

Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


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

Use the code you had, but add the following to your custom CSS:

 

.icons-ul {
margin-left: 2em;
list-style-type: none;
}
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
DonRicardoRVM+    5
DonRicardoRVM

Use the code you had, but add the following to your custom CSS:
 
.icons-ul {
margin-left: 2em;
list-style-type: none;
}

 
It didn´t work. I did some changes. I think that it is a bad idea, but now it works.
 
I used this code:

<ul class="icons-ul">
<li><i class="icon-li icon-ok"></i>.............</li>
<li><i class="icon-li icon-ok"></i>.............</li>
<li><i class="icon-li icon-ok"></i>.............</li>
<li><i class="icon-li icon-ok"></i>.............</li>
</ul>

 
And I added the following in the custom CSS:
 

 
#page .hentry ul, .hentry ol {
     padding: 0;
     margin: 1.3em 0 1.3em 3.3em;
     font-size: 100%;
     line-height: 1.3em;
}
 
 
#page .icons-ul {
     text-indent: -10px;
     margin-leftt: 2em;
     list-style-type: none;
}
  
#page .icon-ok {
     display: inline block;
     text-align: center;
     width: .6em;
}

Ricardo Royo-Villanova

Agítalo 3.0

Share this post


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

The code I gave you works, I tested it before I posted.

Can you provide a link to your website please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
DonRicardoRVM+    5
DonRicardoRVM

The code I gave you works, I tested it before I posted.

Can you provide a link to your website please.

Yes, of course. Thanks

 

The website is http://www.resulta-2.com, and you must authenticate as user demo with password demo.

 

here, an example of the list: http://resulta-2.com/?page_id=2378


Ricardo Royo-Villanova

Agítalo 3.0

Share this post


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

OK, my bad, I didn't give you all the code!

Remove all your custom CSS, which you added related to the list and replace with the following:

 

#site .icons-ul {
  margin-left: 2em;
  list-style-type: none;
}
#site .icons-ul > li {
  position: relative;
}
#site .icons-ul .icon-li {
  position: absolute;
  left: -2em;
  width: 2em;
  text-align: center;
  line-height: inherit;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
DonRicardoRVM+    5
DonRicardoRVM

Thanks. Now it is all ok.


Ricardo Royo-Villanova

Agítalo 3.0

Share this post


Link to post
Share on other sites

  • Similar Content

    • tforasiepi
      By tforasiepi+
      I'm taking a site out of development and putting it online.  I need a little help with the Framework 5 interface and icon links because they are not converting to the new URL.  The site is in a sub-folder and I followed the WordPress docs, like I usually do, about Giving Wordpress Its Own Directory . i.e.
      In Settings>General>Site Address changed it to the final URL Copied the index.php and .htaccess files to the root folder Edited the index.php to point to the subfolder and saved the file Now the site is up and running and I can still edit the theme in the Dashboard but the Framework 5 front end interface does not load on each page at the top.  In addition, the Social Media icons, slider icons, etc... don't show up.  However, they are linking to their destinations correctly.  I feel like I can missing a final step.  Can anyone suggest a resource or solution?
      The site is:  http://www.mnkhan.com/
      Thanks in advance!
       
    • jmorby
      By jmorby+
      We have multiple urls pointing to the same base site.  

      When the site is accessed as www.fido.net the icons show fine but when accessed by one of the other aliases (such as www.voip.center) the icons just show as squares
       
      I've previously searched the forums and found other people with the same problems, but I've never seen an answer to this
       
      Attempting to search today and I keep being told I'm doing too many searches and / or there are no matching results ... I've asked through the chat on the site and have been told to ask the question here, so here I am.

      If this has been answered before ... I can't find it ... so please post a link to the answer (not just "go search, you'll find it" - tried that)

      If it hasn't been answered then it would be great to see a fix for this as it is proving troublesome to say the least
      I presume it is some form of xss / hotlinking protection, but I can't see how to disable it / list the "authorised" urls / etc


    • bartoncollege
      By bartoncollege
      I was perusing the master list of Font Awesome icons at http://fortawesome.github.io/Font-Awesome/icons/ and noticed that there are many new ones that are not available in iBox's dropdown menu.  Will these be added in the next DMS update?
      Thanks.
      Ken.
    • hrachovec
      By hrachovec
      Hello:
      I'm using DMS2 which I understand is based on Bootstrap 2. I'm trying to insert a glyphicon based on the bootstrap 2 method here:
      http://getbootstrap.com/2.3.2/base-css.html#icons
      But it doesn't seem to work. My page is here:
      http://testing003.compoundeyedesign.com/
      My code is:
      <a href="/get-quote/"><i class="icon-envelope icon-white"></i> QUOTE</a> Any suggestions, or are the glyphicons just not part of DMS2?
      Thanks!
      Russell
    • oseehys
      By oseehys+
      Hi,
       
      I need urgent assistance with this 3 shortcodes, i cant seem to find them on the forum.
       1.I need the css, to be able to add shopping cart to my Navbar the way it is on Pagelines.com Website.
       
      2. I use this social media shortcodes for twitter and facebook ( [twitter_button type="follow"][like_button url=http://url-to-like.com]) i was only able to change the user for facebook, but could not add another twitter user, all sites round it was showing my twitter url instead of the specific user of that page, can you please show me how i can tweak the twitter follow button so that it will reflect other users not just the website twitter page?
       
      3. How do i add a Youtube channel with this shortcode  ([pl_video type="youtube" id="CL1jPb0_Auc"] i tried adding a channel by embedding it in the media player html option, it will not show the channel, please can you show me how to add a channel not just a single video, A complete users channel?
       
      I know Danny will ask that i refrain from asking multiple questions, but this questions are very much related so please pardon me if i am anxious to know the answers at once because i have tried all permutations i can think of without any solution, so here i am in the land of experts, regards.
      )
×