Jump to content

Get Classes Complete List


RSousa6

Recommended Posts

Hello,

i'm starting with prestashop, and however i already scanned the documentation link and made some searchs, i couldn't find the answer for this doubt of mine. So, if anyone could help me i would be really glad.

 

In this first days of contact with prestashop, i have found some elements configuration with the "Classe" parameter like on the picture below. This "classes" make changes on the display of the elements, am i right?

However, i'm trying to find all the list available to use on this parameter, but i couldn't find it. I mean, on this example i have "new-product", but there are others and, if there aren't present on the examples, i wouldn't be able to notice they exist.

So ... where can i find this "shortcodes" available for each element? Is it on tpl files (i read about them but couldn't be sure)? There is some file where i can find all of them or of the theme in use?

If someone could give me an explanation i would really appreciate it.

 

Best Regards

 

image.png.c3bda7a5dcc10141db21dab111043266.png

Link to comment
Share on other sites

Hi 

and welcome to forum and PrestaShop.

First you did not mention what version you have and do you use custom module or theme there.

 

From screenshot it looks like custom theme and module for menus. And to me that "Classe" is

connected to CSS class that would be assign to menu item so it could be styled differently maybe.

That could be maybe explained in theme/module documentation.

Link to comment
Share on other sites

razaro thanks for the welcome and for the help.

 

i'm using latest version of prestashot and a custom theme (sp_market17).

 

I followed your advice and took a look at the manual of the theme on the css part. I get the locations of part of the css files styles and i think i'm getting it. It look there's no list available of custom classes available, but at least now i think i get it where they come from.

 

Anything more and i will talk about it. Thank you!

Link to comment
Share on other sites

After checking demo of theme I see they have added classes for pages they placed in menu.

So they have "new-products", "special", "blog", "contactus" and "aboutus". And they they use it in demo in 

layout 3 to have orange color if page from menu is active.

#index.content-v1 .sp-megamenu .home>a,.content-v1 .sp-megamenu .home:hover>a{color:#fff;background:#7d7d7d}#module-smartblog-category.content-v1 .sp-megamenu .navbar-nav>li.blog>a{color:#fff;background:#7d7d7d}.content-v1 .sp-megamenu .navbar-nav>li.active a{background:#7d7d7d}.sp-megamenu .navbar-nav>li.active a{background:#f4a137}#contact.content-v1 .sp-megamenu .navbar-nav>li.contactus>a{background:#7d7d7d}#new-products.content-v1 .sp-megamenu .navbar-nav>li.new-product>a{background:#7d7d7d;color:#fff}#prices-drop.content-v1 .sp-megamenu .navbar-nav>li.specials>a{background:#7d7d7d;color:#fff}#cms.content-v1 .sp-megamenu .navbar-nav>li.aboutus>a{background:#7d7d7d}#index .sp-megamenu .home>a,.sp-megamenu .home:hover>a{background:#f4a137;color:#fff}#new-products .sp-megamenu .navbar-nav>li.new-product>a{background:#f4a137;color:#fff}#prices-drop.sp-megamenu .navbar-nav>li.specials>a{background:#f4a137;color:#fff}#contact .sp-megamenu .navbar-nav>li.contactus>a{color:#fff;background-color:#f4a137}#cms .sp-megamenu .navbar-nav>li.aboutus>a{color:#fff;background-color:#f4a137}#module-smartblog-category .sp-megamenu .navbar-nav>li.blog>a{color:#fff;background:#f4a137}#new-products .sp-megamenu .navbar-nav>li.newarrival>a{color:#fff;background-color:#f4a137}#prices-drop .sp-megamenu .navbar-nav>li.specials>a{color:#fff;background-color:#f4a137}#module-smartblog-category .header_v3 .sp-megamenu .navbar-nav>li.blog>a:after{background-color:#f4a137}#contact .header_v3 .sp-megamenu .navbar-nav>li.contactus>a:after{background-color:#f4a137}#new-products .header_v3 .sp-megamenu .navbar-nav>li.newarrival>a:after{background-color:#f4a137}#prices-drop .header_v3 .sp-megamenu .navbar-nav>li.specials>a:after{background-color:#f4a137}.sp-megamenu .home>.dropdown-menu li a:hover{color:#f4a137}

 

So you will not find a list, it is just custom class name so you may want to style it directly. For example, some kids store and each menu item is in different color :)

 

Link to comment
Share on other sites

Correct razaro.

I was just a little lost because i didn't know (or was in doubt) that my doubt was related to css styles or other elements or specific configuration related to prestashop.

After you told me it was about css, i was able to figure out. Once again, thank you :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...