Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] Images in lieu of bullets


  #1  
Old Apr 9, 2009, 06:49 AM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
Hello all.

I would like to use an image instead of the standard bullet in bulleted lists. After much searching on Google, I have added the following into the CSS box in the settings.

ul { list-style-type: none; }
li
{
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
text-align: left;
margin-top: 4pt;
margin-bottom: 6pt;
line-height: 100%;
color: #990000;
background-image: <img src="http://www.theperdoxrant.com/wp-content/themes/atahualpa332/images/icons/pkbullet1.png" alt="example">;
background-repeat: no-repeat;
background-position: 0 .4em;
color: #000000
}

The default black bullet is gone but my image is not being used. I have checked the image by pasting http://www.theperdoxrant.com/wp-cont.../pkbullet1.png into my browser and the image does come up. So the link is correct.

Questions:

1. What is wrong?

2. Do I always have to use the long version of the url? Is there a short cut I can use?

3. Much to my dismay, I have now discovered that the code above is messing up my sidebar fonts. Yuk. I think the sidebar text must use the same tag <li>.

4. Is there a way I can style my bullets without affecting anything else that I have already styled, such as the contents of the widgets?


Any help would be greatly appreciated.

Thanks in advance.

Last edited by perdox808; Apr 9, 2009 at 07:45 AM.
  #2  
Old Apr 9, 2009, 10:56 AM
Suzie
 
24 posts · Apr 2009
Here's a thread that might help you.

http://forum.bytesforall.com/showthr...ghlight=bullet
  #3  
Old Apr 9, 2009, 11:05 AM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
Thanks for that Suzie. I think that relates to the issue of the widgets. It is rather confusing to me being so new at this. Any other ideas?

What about the url for the image? Do I have to key all that information or do I just enter <image>pkbullet1.png> as is shown in the Post/Page Info Items tabs in the theme settings? Do you know?
  #4  
Old Apr 9, 2009, 03:58 PM
Suzie
 
24 posts · Apr 2009
Try something like this:

background: #FFFFFF url(images/icon.gif) no-repeat top left;

I'll see if I can mess around with it a bit but have to go somewhere shortly.
  #5  
Old Apr 11, 2009, 12:18 AM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
Thanks to everyone that helped.

I have solved the problem and I am happy to say I am pleased with the results. For a newcomer like me, who works as a typesetter for a living, I find it frustrating that I cannot achieve all the fancy setting that I can in the programs I use such as Quark, InDesign and Framemaker.

I looked and looked for the codes and finally found the codes that have allowed me to achieve some consistency in my headings and body text. Now with the bullets working, I'm a happy camper. By the way, it does NOT surprise that IE seems to deviate in some ways from treating HTML formatting like most other browsers do. Typical of Microsoft, always buck the system so that others may suffer.

Anyway, here is the code that I have added to the theme via the CSS Inserts panel.

h1 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 34px;
font-style: normal;
font-weight: bold;
text-decoration: none;
font-variant: small-caps;
text-align: center;
margin-top: 40px;
margin-bottom: 0px;
line-height: 100%;
color: #000066;
}
h2 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 28px;
font-style: normal;
font-weight: bold;
text-align: left;
margin-top: 35px;
margin-bottom: -3px;
line-height: 100%;
color: #0000ff;
}
h3 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 25px;
font-style: italic;
font-weight: normal;
text-align: left;
margin-top: 25px;
margin-bottom: -12px;
line-height: 100%;
color: #0066cc;
}
h4 {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 20px;
font-weight: bold;
text-align: left;
margin-top: 10px;
margin-bottom: -14px;
line-height: 100%;
color: #000066;
}
h5 {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 18px;
font-style: italic;
font-weight: bold;
text-align: left;
margin-top: 16px;
margin-bottom: -12px;
line-height: 100%;
color: #0000ff;
}
h6 {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 17px;
font-style: italic;
font-weight: normal;
text-align: left;
margin-top: 9px;
margin-bottom: -13px;
line-height: 100%;
color: #0066cc;
}
li {
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 16px;
font-style: normal;
color: #111111;
margin-bottom: 3pt;
margin-left: -16pt;
list-style-image: url(http://theperdoxrant.com/wp-content/...kbullet1.png);
}

Bookmarks

Tags
bullets, images, lists

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Bullets, Circles, Icons instead of left border on widget list items MacMacGA Sidebars & Widgets 62 Jul 30, 2010 12:46 PM
[SOLVED] Background and bullets timdevogel Page & Category Menu Bars 1 May 26, 2009 09:27 PM
Adding HTML or image bullets to lists in Widgets daneo Sidebars & Widgets 1 Apr 28, 2009 11:00 PM
change ul image for all ul (bullets) l3oomer Sidebars & Widgets 2 Apr 21, 2009 11:49 PM
[SOLVED] Images in widgets bvision Sidebars & Widgets 2 Feb 1, 2009 04:58 AM


All times are GMT -6. The time now is 11:04 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.