List Styles Tutorial

[Gina]

I’m thrilled that I actually managed to create and info box with color and drop caps with color.
But I cannot figure out how to do the image list styles. I’ve tried to add the code a couple of different ways in both body content and widgets and do not know what I am doing wrong.
Would love a written tutorial or video on these special style features that require copy/paste code. And a tutorial on adding buttons and link lists that connect to a url.

[Sushil Adhikari]

Consider it done… I will start writing one up now and once done, will follow up here. This should take me about 20 minutes.

[Sushil Adhikari]

all done… the list style tutorial can be found here for PReference:
https://www.styledthemes.com/preference-theme-setup/97-styling-you-lists

[Gina]

Thank you for providing the code list but I already had these from the extras folder of the pro theme install.
I would like a tutorial on the actual cut/paste process into the WP widget or page content.
Like I said I was able to do drop caps and info boxes this way but I cannot make the image list styles work.
Maybe the image list styles need to be done differently and I’ve tried a couple of different ways unsuccessfully.
I do appreciate the nice list under support so I don’t have to go into my files to find it.
Thanks so much,
Gina

[Sushil Adhikari]

Sorry… when you said image list styles I was thinking you meant the actual lists with the image icons for bullet lists. Are you referring to the List Gallery ?

[Gina]

What I’m saying is that I’m using the image list code cut/paste into WP and it’s not working.
I assume I’m doing something wrong and I’m asking you to show me step by step how to execute these image bullet points.

[Sushil Adhikari]

So then it is related to the bullet list styles… just as the tutorial was written, you add the classes to the

tag in your html code, which means you have to switch the editor to the text view (html view). So in other words, when you make your list, you change to view the html code in the editor then add the class.

From this:

 

Fusce adipiscing tellus a lacus.
Aliquam porttitor mattis nisi non.
Vivamus hendrerit purus eget turpis.
Donec bibendum lorem vulputate ante tristique tincidunt.

To This:

Fusce adipiscing tellus a lacus.
Aliquam porttitor mattis nisi non.
Vivamus hendrerit purus eget turpis.
Donec bibendum lorem vulputate ante tristique tincidunt.

But when you say you copy and paste and it’s not working, how are you pasting it and what specifically is not working?

[Gina]

Looking at the way you have the code displayed above, I can see what I was doing wrong.
I was positively in the test view but I wasn’t putting the bullet text in the middle like this.

[Sushil Adhikari]

No worries… I sent you a follow up email actually which I don’t mind saying that the link to an HTML website that I sent you, I use on occasions. But for anyone who is fairly new to HTML or CSS, or other code stuff, the http://www.w3schools.com/html/default.asp is a great source if one is learning the basics, or even simply refreshing the memory on how something is done. This site is in my bookmarks for years now….in a nutshell, the key to a list style with images, for example with the Preference theme is adding the class to the

tag.

[Gina]

Thanks again. I book marked it. Send this site link out in your welcome letter for people who buy the pro version. As a beginner I would have been educating myself with it all along – less trouble for you.
You are great with customer service and very patient with us beginners.
Thank you very much.
Gina

[Author]

Posts