There has got to be an easier way

[CrownOfMars]

I can’t get my head around this problem, i’m sure there is an easy fix. I’m using WordPress as a CMS and my client is going to be using a lot of lists when he inputs content into a page. Being so, i’d like to style these lists with icons etc, here’s an example of my css:

#content ul { margin: 18px 0 0 0; list-style: none; }

#content ul li { margin: 0 0 5px 0; padding: 0 0 0 20px; background: url(../../images/tick.png); background-position: 0px 5px; background-repeat: no-repeat; }

The problem lies when i want to add my another list into the content area, for example, a list displaying the most recent news posts. It obviously inherits the styles used above and i’m having to use the !important tag to overwrite them.

#content ul.news { margin: 18px 0 0 0; list-style: none; }

#content ul.news li { margin: 0 0 15px 0 !important; padding: 0 0 0 20px; background: url(../../images/date.png) !important; background-position: 0px 0px !important; background-repeat: no-repeat !important; }

I’m going to be using a lot of lists so doing this repeatedly is just going to get plain annoying. Does anyone know of a solution? My brain isn’t functioning very well right now!

I hope i explained that well enough.

[ChrisBull]

Give them different class names?

[CrownOfMars]

Not sure i follow.

The lists are generated by WordPress. Sure, i could asign a class in the html mode, but a client using the visual editor wouldn’t know how to.

[ChrisBull]

lol, not sure I follow you either…
You have lists and then #content ul li that styles them.
You then want the most recent list to be styled differently with #content ul.news li ?

[CrownOfMars]

Yeah sorry, not explaining myself correctly.

When a client logs in and posts some content with a list included, wordpress will punch it out as:

List Item #2


List Item #2


List Item #2


List Item #2

I want to change the style of these lists but they don’t have a specific class to style. So i have to use something like #content ul li in order to do so.

The problem is that i also want to place lists within my own template in the #content div with completely different styles. Unfortunately these styles inherit everything from the #content ul li style and i have to use !important tags to overwrite them all which is hell annoying.

[ChrisBull]

Sorry, I’ve been racking my brains for the last hour and i can;t think of it, I’m sure there is a way with php but i just can’t get it. Not that this forum isn’t amazing but for php specific queries i like to use http://forums.devnetwork.net/ they have some really great php minds over there (so does this forum before i start getting abuse, but no one seems to be around today, probably because its easter and everyone has better things to be doing).
Anyway hope you find a solution and please post back here if you do.

[shazdeh]

First of all, you don’t need all those !important rules. Check out this article: https://css-tricks.com/specifics-on-css-specificity/

There’s an easy way to create custom lists within WP: by using shortcodes. Here is the code from my own theme:

add_shortcode('news', 'theme_shortcode_list');

add_shortcode('anotherlist', 'theme_shortcode_list');

/* just like that. */



function theme_shortcode_list( $atts, $content = null, $code ) {

$content = str_replace('
', '
', do_shortcode($content));

return $content;

}

What it does is that it adds a classname to the ul so you can hook to that classname in you CSS. What you do is wrap your ul’s around [check] or [news] or whatever shortcode name you define. Now in your CSS define styles for this lists:

ul.arrow li { whatever }

ul.news li { yeah! }

[CrownOfMars]

Nice shazdeh, thanks for that!

[floatingDivs]

Maybe I’m overthinking this, but couldn’t you do something like have the specified “news” list CSS come before the regular list CSS?

ul#news { … }
ul { }

That way, the “news” list would still retain its CSS while every other list would inherit the standard list?

[CrownOfMars]

Hey guys,

I’m trying to expand on shazdeh’s method to add shortcodes to links instead of lists.

When someone creates a link in wordpress it obviously outputs it as :

How would i go about adding a class to this?

I’ve tried everything but failed.

[CrownOfMars]

This is the best i could do:

add_shortcode('zip', 'theme_shortcode_list');



function theme_shortcode_list( $atts, $content = null ) {

extract( shortcode_atts( array(

'class' => 'zip',

), $atts ) );



return '' . $content . '';

}

It outputted this:

Breaking the Silence – Parliamentary Breakfast Resources

I just selected it with CSS using span.zip a but i’d prefer if i could get the class within the a tags.

[Author]

Posts