Jump to content

Dh42
 Share

Recommended Posts

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/

  • Like 5

Share this post


Link to post
Share on other sites

  • 1 month later...

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?

 

SCR1.jpeg

SCR2.jpeg

Share this post


Link to post
Share on other sites

#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:

tsCfNvN.png

  • Like 1

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

  • 6 months later...

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.

 

 

Share this post


Link to post
Share on other sites

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 by shv (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by shv (see edit history)

Share this post


Link to post
Share on other sites

  • 1 month later...

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

 

 

Share this post


Link to post
Share on other sites

  • 1 month later...

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:

Share this post


Link to post
Share on other sites

  • 3 weeks later...

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

Share this post


Link to post
Share on other sites

  • 2 weeks later...
  • 2 months later...

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?? :wacko:

Edited by Taty88 (see edit history)

Share this post


Link to post
Share on other sites

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 by Taty88 (see edit history)

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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. 

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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; }

Share this post


Link to post
Share on other sites

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 */

Share this post


Link to post
Share on other sites

  • 3 weeks later...
  • 2 weeks later...
  • 2 weeks later...

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.

1b1687a8a40a34b29c9335a33e2eb535.png

Edited by kkkkguh (see edit history)

Share this post


Link to post
Share on other sites

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 by Paulito (see edit history)

Share this post


Link to post
Share on other sites

  • 3 weeks later...
  • 1 month later...

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.

Share this post


Link to post
Share on other sites

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 by Wing Fat (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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 by Rom Soul (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

  • 3 weeks later...

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;
}

Share this post


Link to post
Share on other sites

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 by benedettopresta (see edit history)

Share this post


Link to post
Share on other sites

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 by taphil (see edit history)

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites