Lesson: Using Divider Icons in Selected Themes

jonimueller
(@jonimueller)

19 years, 2 months ago

Now that there’s a rockin new Theme Switcher that lets any visitor to your site change from one to another of the themes you have provided, let’s talk about how we can customize those themes.

I like to use divider images between posts, and between comments. But not all designs are going to require them. You can always put the code in that will call the divider element from the stylesheet:

<div id="divider"></div>

in your template. If you want a different (usually smaller) divider between your comments, you’d place similar code there:

<div id="comments-divider"></div>

So that it’s always available. But what about instances where you don’t want a divider in your design? Simple. Don’t edit the template (if your template serves to drive all or most of your styles). Just edit your stylesheet:

#divider, #comments-divider { display: none; }

And the stylesheet will happily ignore that portion of your template.

Viewing 10 replies - 1 through 10 (of 10 total)

Root
(@root)

19 years, 2 months ago

joni – is this extra markup strictly necessary – why not just put the image in the post for example

NuclearMoose
(@nuclearmoose)

19 years, 2 months ago

If you put the image in the post rather than placing it via CSS, then it makes the job of moving to a different template more difficult, does it not?

Thread Starter jonimueller
(@jonimueller)

19 years, 2 months ago

I’m not sure I understand what you mean. You mean put the image in the template for that particular theme?

I want to avoid using different templates except when departing markedly from the standard design. In other words, if I have to edit four different stylesheets, that’s one thing. I don’t want to have to edit additional templates to make the same change if I don’t have do.

(Folks, color that gal lazy!)

eheupel
(@eheupel)

19 years, 2 months ago

If you dont give a whoot about supporting IE you could use an :after statement in css, yes?

Lorelle
(@lorelle)

19 years, 2 months ago

You needed to include a CSS reference to the “image” between the content such as:

#divider {height:50px; width:100%; background: (url:image.jpg) no-repeat white;}

So people get the idea that you are putting “something” in the divider. And then use the display:none when you want to not have it.

If you are into having a bunch of themes (not downloaded ones from other sites but your own), you can add this to your base code and then style all the CSS any way you want, and depending upon the style choosen by the user, the dividewould either have a graphic or not. Your main code that you use would stay the same and only the CSS would change.

I like it. BUT I would make both of these a CLASS and not a DIV so that you could use it repeated on a page, like having a graphic between each comment. More than one comment means more than one use in a web page so it MUST be in a class (.divider) and not an ID (#divider) to qualify. IDs must be unique on a page and classes can be used repeatedly.

This is great! Sorry it was a little confusing in the introduction.

Root
(@root)

19 years, 2 months ago

My proposal in the interests of semantic markup was to put the image in the post in the CSS – dealing with NM’s query. It eliminates the need to add further presentional mark up to the xhtml (assuming you can find the right file 🙂 )

You could set the thing as the bg, position bottom, repeat no. Its horses for courses. I want to get to the bottom of this. If any one can persuade me its necessary I can add it to Gemini et al

Mark (podz)
(@podz)

19 years, 2 months ago

I have used this only once – having repeatedly never got round to it, and I use a Quicktag that simply gives me an image link. Around that I wrap a centering tag.
But then I don’t intend to use it to divide posts, more when in a post I wish to change the subject.

I have used both methods mentioned above for others blogs where they had the choice.

I favour CSS + Quicktag myself ..

Lorelle
(@lorelle)

19 years, 2 months ago

The topic at hand is about designing styles for the style switcher plugin, not for Themes or the inclusion of graphics within a post. Related and unrelated. If a Theme Author wants to add such a function to their Theme(s), they can.

And nothing design wise is required. This is design stuff. Either you want it or not.

If the php file already has the divide set, then, as jonimueller explained, changing 4 stylesheets is easier than 4 whole “Themes”.

So far, there are no steadfast rules and regulations regarding Themes, other than validate and work across browsers – but I think this started out as a way to stylize your own pages with various styles (style switcher).

Root
(@root)

19 years, 2 months ago

Developing the topic slightly – Joni is touching on a good subject which is mass editing of multiple CSSs . It would be very fancy to split our theme style sheets into sections and then call them using php. As WP has gone modular it would be a logical dev. We can do it ourselves and it is very simple which should suit us 🙂

Lorelle
(@lorelle)

19 years, 2 months ago

Has anyone come up with the PHP that would allow application of the different style sheets for sections, or at least for specific pages like categories, archives, posts, etc.?

The “lesson” on the loop thread shows the example of setting a different look on one specific category.