Ok, I'm pretty sure what I'm trying to do requires some CSS work. I've tried figuring it out on my own but I'm utterly useless when it comes to CSS so I've had zero luck. I've currently got a few blocks setup on my left sidebar that consist of lists. They're currently bulleted lists and I'd like to get rid of the bullets. On the Upcoming Events list I'd also like to have the event title be in bold to set it out from the date/time a bit. If anyone could take a look at the site and tell me the best/easiest way to accomplish this I would forever be in your debt.
Thanks so much!
http://www.tenmilevineyard.dre...
P.S. Site is work in progress, so try not to judge :)
*UPDATE*
Well after doing some more searching, and trial and error, I managed to get rid of the bullets for the lists. I added the following lines to my style.css file
#block-views-upcoming_events ul li
{
list-style-type: none;
list-style-image: none;
}
#block-views-audio ul li
{
list-style-type: none;
list-style-image: none;
}
#block-blog-0 ul li
{
list-style-type: none;
list-style-image: none;
}I could still use some help on how to make the Event Titles bold though, any ideas?
Firebug is indispensable
Firebug is indispensable for figuring out CSS and the names of classes if you're not already using it. Note that you can add properties and change values on the fly and see the effects immediately.
If you're going to eliminate your bullets, I'd move everything over a bit to the left:
#block-views-upcoming_events li{
margin-left: 0;
}
To have bold event titles:
#block-views-upcoming_events .view-data-node-title{
font-weight: bold;
}
Hope this helps.
Marco
Thanks so much, that worked
Thanks so much, that worked perfectly. It's funny you suggested moving everything over to the left, because I was thinking the exact same thing after I saw the site without the bullets.
I have Firebug installed and try to use it whenever possible, unfortunately I know so little about css that it really doesn't help me much.
If you don't mind me asking, how come the code I added to take away the bullets had "ul li" at the end of the first line, where as the code you listed to move everything over only had the "li"? I'm just curious so I can hopefully learn something out of all this instead of simply copy and pasting the code.
Thanks again!
Take the time to learn CSS - you'll never regret it!
The basics of CSS are conceptually fairly simple and straightforward. Understanding the practical implications of how they all work together (or don't work as expected) are an entirely different matter.
Sounds like you already understand properties and their values fairly well - study selectors. This is where all the power and confusion comes in. O'Reilly's css book by Eric Meyer is quite excellent. If you read thru ch 2 on selectors, you'll know 80% about css. If you read ch 3 on specificity and cascade, you'll know about 95%. The remaining 5% is only gained by blood, sweat, and tears. (Many tears!)
There are also many tutorials online. I found this to be rather good: http://css.maxdesign.com.au/se...
Anyway, css selectors are basically read from right to left. So where you have:
#block-views-upcoming_events ul liThat means select all "li" tags that are inside "ul" tags that are inside the "block-views-upcoming_events" id. Since all "li" tags must be inside a "ul" tag, it is redundant and unnecessary to include the ul so it is better to remove it. You can also combine multiple selectors separated by commas to consolidate them (I believe list-style-image is also unnecessary):
#block-views-upcoming_events li,#block-views-audio li,
#block-blog-0 li
{
list-style-type: none;
}
Finally, to help figure out margins and such, click on the Layout tab in Firebug and mouseover various tags in the HTML pane. You'll see the various regions turn teal. When you find the region of interest, click the tag and you'll see the margin region as yellow and padding as purple. Click on the tag to see the actual values for each in the Layout tab. Switch back to the Style tag to see the css rule that defines the margin/padding. (You'll note that the ul also has a left padding that you may want to adjust as well.)
Note that you may click on a value in the Layout/Style tab to tinker with values and see the effects immediately. (Those edited values are only temporary in firebug - change them in your css to have them "take".)
Marco