[Module] CSS Editor

[Dh42]

This module allows you edit the CSS on your store without ever having to open a FTP client or editor. You can edit the css through your backoffice. Once you make changes, you can still update your theme and the changes will not be erased. 

 

 

Article about the module 

 

 

The module

 

 

We have added a branding free version of the module now. It is perfect for using on client shops. It is only $10. You can purchase it here,  https://dh42.com/free-prestashop-modules/prestashop-free-css-module/

[rv01]

Can you please give a sample to change the black color of the top line in the standard theme 1.6.

Thanks

[vekia]

you're talking about:

 

1) gray bar

2) top black banner

 

 

?

[rv01]

My point is this: when I change all #333333 to a new color, in the global.css of the new 1.6 theme, I still get these in black, see hereunder. Where can I change easily all the black #333333 in this theme?

 

[vekia]

#shopping_cart > a:first-child {
padding: 7px 10px 14px 16px;
background: #333333;
display: block;
font-weight: bold;
color: #777777;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
overflow: hidden;
}

so you have to use

#shopping_cart > a:first-child {
background:red!important;
}

effect:

[rv01]

Thanks for the information. I will have to modify the color in the theme directly.

 

This module "CSS editing" does not work in 1.6.0.4 , pity.

Perhaps because of the new framework?

[shv]

Hi guys,

 

I need to change the color of the product category bar from the default grey to white, any hint how to do it with this module?

 

Alternatively, I could just get rid of the product category bar at all (saves space this way, not a bad solution for us as well). Could you advise how to do that?

 

Thanks in advance.

 

 

[vekia]

by category bar you mean horizontal top menu module?

[shv]

Hi,

 

It is not the top (main) menu where all the (sub)categories can be listed, but the one under that where one can put a category picture with category name/short description. In bootstrap default theme it looks like a grey horizontal bar underneath the main menu, and provided one has picked category pictures, they may be displayed on top of this grey bar (whatever it is called). Should I send a picture?

 

Can I disable this option somehow? I can't recall what module is responsible for it, perhaps I can simply disable it? I do not need any category picture in the category view anyways, a mere category name would do.

 

by category bar you mean horizontal top menu module?

Edited October 9, 2014 by shv (see edit history)

[shv]

If it is a category with subcategories, then this grey bar (with or without a category picture, depending on the settings) hangs above the name of the category (and on the same line one has a mention of how many products there are in the category), after which (below this grey bar) there is then a listing (e.g. with subcategory pictures) of all the subcategories. And it is logical that one just wants to see subcategories right away instead of scrolling down to reach them. And even though I got rid (visually) of this bar, one still needs to scroll as obviously the space is reserved for this element, color changes nothing in terms of space.

[shv]

Perhaps it is easier if you look at our page:

 

http://sport-und-hobby.ch/pr/en/6-modelling

 

There you see a gap above the subcategories pictures - that is exactly the issue. It should be possible to modify the .tpl file, but there may be other ways. If you have any suggestions, pls share:-). 

 

Thank you very much :-)

Edited October 10, 2014 by shv (see edit history)

[picrasma]

Hi,

Please i need help using this CSS module in my prestahop theme(1.6.0.9). All the answers i have seen so far havent helped! All i need from you is a sample css code to help me change the background color of my theme. I tried the following:

 

1.

body{

background:#000 !important;

}

 

2.

.header-container

{

background:#000 !important;

}

 

 

I tried all the css i know using the .classes and #Id i got from inspecting the elements but OMG nothing is working!!!! Using this module was supposed to be easy right??? Please help,thanks

 

see http://prntscr.com/591sxw

 

 

[cille5]

Hi,

Please i need help using this CSS module in my prestahop theme(1.6.0.9). All the answers i have seen so far havent helped! All i need from you is a sample css code to help me change the background color of my theme. I tried the following:

 

1.

body{

background:#000 !important;

}

 

2.

.header-container

{

background:#000 !important;

}

 

 

I tried all the css i know using the .classes and #Id i got from inspecting the elements but OMG nothing is working!!!! Using this module was supposed to be easy right??? Please help,thanks

 

see http://prntscr.com/591sxw

 

 

Use youtube. There is lots of information How to edit Prestashop.

Video how to change background:

[peter433]

Hi PrestaShop Fanatic,

 

I rewrapped your module to make it more Prestashop 1.6 friendly and did some minor fixes on the caching part and changed some global variables to more 1.6 native variables.

 

Validated by the Prestashop Validator too.

 

Enjoy, cheers 

Hello,

I can't get this to work for 1.6.9, is this an update to the older version and will it work 1.6.9, also i gather i need to delete old and reinstall this.

 

Peter

[El Patron]

Hi 

 

Please attach the module to the original post in accordance with section rules, thanks.

[airmax123]

Hello,

 

This module is what i'm looking for. But it doesn't work on 1.6.11

 

jengtong's version also doesn't work.

 

Maybe there is module with similar functionality?

 

Thanks

[Taty88]

Hi, everybody!!

First of all, congratulations on the work you've done, I was just looking for something with the purpose of adding some custom CSS into my website!!

 

Now, however, I have a little problem with this style declaration:

#iubenda_policy .iubenda_fluid_policy .one_line_col > ul.for_boxes > li, #iubenda_policy .iubenda_fluid_policy .half_col > ul.for_boxes > li {
margin-top: 18px;
}

The problem is given by the fact that the browser converts the ">" symbol to its corresponding ">" HTML entity and so the code above doesn't work!

 

Any ideas??

Edited April 23, 2015 by Taty88 (see edit history)

[Dh42]

What version of PrestaShop are you using? I just tested here with the latest version and it seems to be working correctly. 

[Taty88]

I also use the latest version! In fact the problem is ONLY with the ">" symbol...

[Dh42]

Can you link me to the site. 

[Taty88]

Sure! Go to www.perledinatura.it.

[Dh42]

Interesting, I don't rightly know without looking into your site and database. Does it change if you repaste it in the module? Also in the back office is it showing the the > ? The is what I get when I paste that line in a module, http://screencast.com/t/gWBvjcfx

[Taty88]

Hi! Yes, the > appears also in the BO, but only when I leave the module page and come back to it... either way, in order to let you inspect this issue I created an admin account for you and sent you the credentials, so let me know!

 

And obviously thanks again!!

Edited April 24, 2015 by Taty88 (see edit history)

[benedettopresta]

I've used your module with success before, and i just installed it on a new site, and no problem it works just fine, but now i see that you added the get prestashop support as a menu item in red on the main menu, well it does kind of bother, is there a way to remove it? 

 

If i can make one suggestion is to make the text input field (box) bigges as default and the text Custom Css should go on top of the box and shift the box on the left, because if you have a few lines of code in there no problem, but when the code get's long as i have, it's a problem, and if you could make it color coded or active as an editor it would be perfect. Thanks for the module it saves me a lot of time. 

[benedettopresta]

I totally understand you, i'm not saying it's wrong, it's just that it's in your face all the time, just make it as the rest of the menu, so it will blend in, and it will not make me want to remove it. 

Edited May 6, 2015 by benedettopresta (see edit history)

[isabella_brown]

Its a great module to customize css. I added this in my website and enjoy working with it 

[benedettopresta]

Until now i never had problem with your module, customizing everything, super cool. Now i'm trying to do some changes to the top menu but changes i make in the module do not take effect, the css that should be overriden is superfish-modified.css do you have any advice:

 

This is the code i want to override:

  .sf-menu > li > a {
    font: 600 18px/22px "Open Sans", sans-serif;
    text-transform: uppercase;
    color: #484848;
    display: block;
    padding: 17px 20px;
    border-bottom: 3px solid #e9e9e9; }

[Dh42]

Is it encoding the characters correctly in the module? I have seen the html purifier in prestashop if left on will mess them up using the > 

[benedettopresta]

sorry but i don't know what you are talking about

[Dh42]

Can you link to your site where you are having the issue. 

[benedettopresta]

Sure, but it's a work in progress, and it's in maintenance mode, i will activate it for you for a while, so please let me know when you are done so i can put it back.

 

http://www.whykini.it/

 

What I'm trying to do is make the top menu fit in one line. 

Edited May 18, 2015 by benedettopresta (see edit history)

[Dh42]

I cannot see the code you are referring to in the page.

[benedettopresta]

this is in the css module now, but the second part didn't take effect, as i said before it should change the superfish-modified.css but don't worry if it's too much of a trouble, i'll do this the old fashion way. 

/* Social Network links centered and shifted to the right a little */
#social {
	margin-bottom: 0px;
        padding: 5px 0 0px;
}
.shop-phone {
	padding: 5px 5px 0px 10px;
}

/* Top menu rimpicciolito*/

  .sf-menu > li > a {
    font: 600 16px/22px "Open Sans", sans-serif;
    text-transform: uppercase;
    color: #484848;
    display: block;
    padding: 15px 15px !important;
    border-bottom: 3px solid #e9e9e9; }

/* Next */

[Dh42]

It is because the html purifier is changing the contents, you cannot have > you have to use > If you go to preferences and general in the back office and disable the purifier, http://screencast.com/t/zx5xosEjrg  Then replace the css code using > it should work.

[benedettopresta]

yes thanks, that fixed it, it is now working.

 

but what about the purifier is it ok if i leave it off? what does it actually do?

[zerafac@yahoo.com]

Hi,

 

I am trying to install the module on Prestashop Cloud but it keeps getting blocked by Prestashop. The reason is that the module is not a verified app from Prestashop. See fig in link:

 

http://i58.tinypic.com/9av7z4.jpg

 

 

Any ideas for a work around?

 

Thanks,

Chris

[shacker]

This module allows you edit the CSS on your store without ever having to open a FTP client or editor. You can edit the css through your backoffice. Once you make changes, you can still update your theme and the changes will not be erased. 

 

 

Article about the module 

 

 

The module

can you attach the module into the post please?

 

regards

[Dh42]

The latest version of this module is out and can be found here, https://dh42.com/free-prestashop-modules/prestashop-free-css-module/

[kkkkguh]

cssmodule.zip

can you attach the module into the post please?

 

regards

 

same problem. my module not verified,

and i attached my module here

 

Edited June 24, 2015 by kkkkguh (see edit history)

[kkkkguh]

cssmodule.zipcssmodule (1).zip

The latest version of this module is out and can be found here, https://dh42.com/free-prestashop-modules/prestashop-free-css-module/

 

still not verified. 

 

im downloaded the lastest one, and still not verified.

 

i attached my old and new file that i download.

Edited June 24, 2015 by kkkkguh (see edit history)

[Dh42]

The module will never be verified. The verification process is only for modules sold on the addons store. You cannot verify free modules currently. 

[Paulito]

As dh42 says

 

If a module is not bought from the add-ons store then it will not be verified.

 

But you can be rest assured that any modules bought from Moderators or active module sellers on the forum will be good to go, so, you are safe.

Thier is absolutely no point in selling a module that does not work.

 

I only buy modules from active sellers on the forum because that means they will work.

 

I have never bought a module from dh42 but his standing on the forum makes me feel safe about his modules.

 

Sorry if this doesn't make sense or their ate typos but i'm using a mobile to respond.

 

Paul

Edited June 24, 2015 by Paulito (see edit history)

[shacker]

its prestashop cloud ?

[Dh42]

What do you mean Shacker?

[shacker]

i get some info that customers can install free modules on prestashop cloud, this no install button can be related to this. Only want to know if the store is cloud or not

[Dh42]

This module has been updated to have syntax highlighting and also syntax checking as well. 

[Wing Fat]

This module should absolutely be incorporated into the standard distribution of Prestashop. Another cart has this (I won't mention the brand) and it makes things 1000X easier when you are trying to edit your site's design. I'm trying to set up a Prestashop site for the first time and am amazed that this functionality is not included by default. In reading the forums there are so many ways people recommend doing things that involve cumbersome FTP and editing code directly with Notepad that could be accomplished much easier (and with almost no chance of breaking your site should something go wrong) by using a central custom CSS file like this module allows you to do.

That said, I do agree with the other poster that the florescent red "Get Prestashop Support" link in the menu is a bit much (although I understand why you do it). It would be nicer if it were in the module's editing page rather than part of the main menu.

 

If this module isn't going to be included in the default Prestashop distribution then I would happily pay a few bucks for it if that would remove the advertising.

[Wing Fat]

As a follow up to my previous post, here is one example of how a custom CSS file can make life easier. I wanted to remove the large image header from subcategory pages. I searched Google and found this thread: https://www.prestashop.com/forums/topic/251117-solved-how-to-remove-subcategories-header-image/

 

The above method involves editing the PHP code directly with an editor and removing sections of the code. However, you could accomplish this much easier by simply copying and pasting the following in your custom CSS file:

.content_scene_cat {
    display: none;
}

Much simpler and as I said there's no chance of making a mistake that will cripple your site like you can when editing template files directly.

Edited August 23, 2015 by Wing Fat (see edit history)

[beerop]

Hi,

 

This module is really good! The only thing would be the cursor. It seems it doesn't follow the text properly, and is not blinking at the right position. The more I write on a line, the further away the cursor goes from the text I am writing:

 

http://i.imgur.com/KzRCukt.png

 

So when I try to delete something, my cursor is at several non existing spaces from the end of the text:

 

http://i.imgur.com/YBjcdCD.png

[Dh42]

I will have to check that out, it might be a bug in the editor library that we used. 

[Rom Soul]

This module is great !

It is a very good news that there is eventually a clean technique to customize a theme without losing on the way the ability to update the theme !!!

 

I just have a quick question about background images :

 

The usual relative path to define a bg image from a css file is :

#header_logo .logo-theme a {   background-image: url("../img/logo.jpg"); }

 

This relative path leads to

www.url.com/themes/mytheme/img/logo.jpg because the CSS file is already in

www.url.com/themes/mytheme/css/

 

It does not work with the module, because the CSS is inserted inline, so the browser with such relative path would look desperately for an image at

www.url.com/img/logo.jpg

( I could place my logo there but I'd prefer to keep all I can in the theme folder )

 

 

What would be the best syntax to achieve that ?

Is there something magic like url("[ACTIVE_THEME_MAGIC_VAR]/img/logo.jpg") ;-)

 

Thanks again !

[Rom Soul]

Hi,

 

I have a weird bug with CSS child selectors ( using ">" ) :

Line like this one are not taken in account :

.myclass > li { ... }

 

It appears the module turns it into :

.myclass > li { ... }

which of course is not correct CSS...

 

I guess when the CSS code is registered in DB, special caracters are automatically traduced like that, as if we were entering text for a description... Is there a way to change that ? maybe using a special code instead of ">", to begin ?

 

I hope this can be solved, because I LOVE the principle of this module !!... ( But I also NEED child selectors to work ;-) )

Edited August 28, 2015 by Rom Soul (see edit history)

[Dh42]

Try turning the html purifier off in the back office, that should fix the issue. https://dh42.com/support/knowledgebase/2107/Disabling-the-HTML-Purifier.html

[zlo]

Hi,
The module CSS Edit was working fine in my prestashop 1.6.0.9, but now suddenly the new css changes I add do not appear in the site. I tried dissabling the html purifier in the preferences, and verified the css a few times, but I don't find why It's now not working.
Somebody has an idea on how I can solve this problem?
Thanks

[Wing Fat]

I had this same problem. I deleted the module and reinstalled and it started working again. Make sure to backup your custom CSS before you do this of course.

[zlo]

Thank you very much Wing Fat, reinstalling the module worked for me also.

[benedettopresta]

Anyone know if this module creates a file of the code written in the custom css box? I had a lot of work done, and now for whatever reason i lost it, but i do have a backup of the shop entire folder, is there somewhere i can go and recover the settings from files or folder?

[benedettopresta]

i've updated to 1.6.1.1 and some mods won't work anymore, and i've already reinstalled the module, html purifier is off, anyone can tell me why those mods won't work anymore, when they used to work in 1.6.0.14

 

.alert-success {
  background-color: #CE26E8;
  border-color: #F5BFC4; }

#header .shopping_cart > A:first-child:after
{
	color: #FBB5D7;
}

.shopping_cart > A:first-child
{
	background: #CE22E8;
	color: #FBB5D7;
}

.shopping_cart > A:first-child B
{
	color: #FBB5D7;
}

.shopping_cart > A:first-child:before
{
	color: #FBB5D7;
}

[Dh42]

It could be the classes in the theme have changed. The module does not create a file, it stores the css in the database. 

[benedettopresta]

Is there a way to make it work? i don't really know what you mean, it could be the classes. As for the database do you know where can i find the settings, i have a backup copy of it so i can open it. 

 

actually some of the code i have works, only the one i posted doesn't. 

Edited September 25, 2015 by benedettopresta (see edit history)

[Dh42]

You would have to see what has changed. I am guessing the theme was updated and the css you are using is not targeting what you are wanting anymore, so you might have to rewrite it. 

[benedettopresta]

you mean for example, before it used to be:

.alert-success {
#header .shopping_cart > A:first-child:after

now maybe it's something else?

[Dh42]

Correct. 

[benedettopresta]

OK, but even if i had already checked, now i rechecked and they haven't changed. And yes in the update process i did update the theme, but it's the same one. I guess i need to go back and restore. I wanted to fix it, because i have more sites to update.

[Dh42]

Can you link me to the site?

[benedettopresta]

whykini

[taphil]

This is a great module, but I have an annoying problem with my multi-language site.

 

I have two languages installed on my site, English and Finnish. I used the module to show more than 4 product thumbnails on product pages using this code:

 

#thumbs_list {
float: left;
overflow: hidden;
margin-left: 10px;
width: 1000px;
}

 

The custom CSS works as expected when you're using the English language but when selecting Finnish, I get the default amount of thumbnails on product pages.

 

What am I doing wrong here?

 

--------------

 

EDIT:

 

Adding

 

#thumbs_list {
width: 1000px!important;
}

 

and clearing Smarty cache helped. Everything is now working perfectly.

 

Thanks for the help Dh42!

Edited September 25, 2015 by taphil (see edit history)

[Dh42]

No way to tell without seeing the site.

[Dh42]

@benedettopresta Can you try resetting the module, it does not look hooked. 

[benedettopresta]

what do you mean by resetting? i've reinstalled it 2 times, and as i said before some of the code works.

[Dh42]

Oh, I missed that. If some of the code works, then the module is working correctly, it is the code that is wrong. 

[benedettopresta]

I don't know what to say, the code was working fine untill the update from 1.6.0.14 to 1.6.1.1, i guess i'll have to find another solution ( manually edit the css which i don't like to do )

[Dh42]

You could always link the site and tell me what you are trying to do. I fixed the other guys issue 3 hours ago.

[benedettopresta]

just trying to change the cart color so matches the site, but it's ok i'll manage it.

[Paulito]

Hello

 

I have just put the code you mentioned in your earlier post into dh42 css editor on a test site and I get this:

 

http://screencast.com/t/n0uGWqlt4Y3

 

Also I have placed this code at the bottom of Your global.css and I get the same
 

http://screencast.com/t/B4LIB9YrNcue

 

Paul

[benedettopresta]

That is what i want, what version of ps is the test site? because on my .14 was working just fine, it's in the latest that i can't get it to work, and i was going to do it in the global.css, but then next update i will have to do it again and again, and that is what i wanted to avoid. 

[Paulito]

Hello again

 

The test site is 1.6.1.0

 

as I said earlier I have used your code in both global.css and dh42 css module and both work 

 

Paul

[benedettopresta]

yes i saw the pictures, i don't know what to say, but thanks for the test. 

[Perla2018]

Hello

To identify css changed how I can put a title to css.

[Paulito]

Hello

 

Afraid I am not quite sure what you mean, could you give a bit more detail.

 

Paul

[benedettopresta]

@ANGELICA07

 

I do it like this:

 

 /*  Title  */

 

so you can recognise your work and it will not affect anything.

[Perla2018]

Ok thank you Benedetto.

[Perla2018]

Files tpl can be corrected?

[Dh42]

No, this just lets you add custom css to your website. 

[Perla2018]

hi,

This appears in bo:

get prestashop support...

[Dh42]

It does, it is a link to our support portal. 

[Perla2018]

Can I delete it?

[Dh42]

You can, you would have to edit the module to delete it. 

[Perla2018]

I have problems in bo after installed this form with cache when I insert new products version 1.6.1.1. You?

[Dh42]

What form?