Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Custom CSS??

 
Reply
   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 08-10-2015, 05:50 PM
 
rowdybunny rowdybunny is offline
 

Advanced Member
  
Join Date: Aug 2014
Posts: 67
 

Default Custom CSS??

I am new to X-cart and I am currently working on two new websites using x-cart. Things have gone smoothly with the first cart so far, but not so much with second.

I am trying to make some basic changes to the custom css and they do not seem to be working. For the cart that I am experiences issues with I am using the Digital template.

When I make a change to the custom CSS nothing happens. I have use custom CSS checked. I know the custom CSS is working for two reasons, first when I check the 'Use Custom CSS' box and click save the site changes to whatever is in the default custom CSS before my changes. Second if I change my template from Digital to Standard, the background is no longer white, but it is black as I have set in the custom CSS.

Some of the changes I am trying to make in the custom CSS that are just not happening are:

1. I'd like to have a background image. I added the following to the custom CSS:

Code:
body { background-image: url(file://public/spring.jpg); background-repeat: repeat-x; background-color: #000; }

The default background is already black, when I change #000 to #FFF it does not change to white and I do not see my background image.

2. I've also changed the following to change the color of the text in the Nav Bar to #E10000 but again no luck.

Code:
.navbar-inverse { background-color: #44596f; border-color: #44596f; color: #E10000; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #E10000; background-color: #44596f; }

So what am I missing?

Thanks,
Jennifer
__________________
X-Cart 5.2 & 5.3.3.3
Reply With Quote
  #2  
Old 08-12-2015, 11:49 PM
  qualiteam's Avatar 
qualiteam qualiteam is offline
 

X-Guru
  
Join Date: Dec 2010
Posts: 6,373
 

Default Re: Custom CSS??

Hello!

I believe the problem is that your custom CSS rules are loaded before the CSS rules from the theme, so rules from the theme get a higher "specificity" and override your rules.

What you can do is add extra tags or classes to the rules to increase their specificity. For example, use "html body" instead of just "body".

You can read more at https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
__________________
Alex Solovev,
Qualiteam

---

User manual Video tutorials X-Cart FAQ

You are welcome to press "Thanks" button
if you find this post useful

Click here to learn how to apply patches

X-Cart Extensions
Reply With Quote
  #3  
Old 08-13-2015, 06:07 AM
  razortw's Avatar 
razortw razortw is offline
 

X-Cart team
  
Join Date: Feb 2015
Posts: 807
 

Default Re: Custom CSS??

Quote:
Originally Posted by rowdybunny
I am new to X-cart and I am currently working on two new websites using x-cart. Things have gone smoothly with the first cart so far, but not so much with second.

I am trying to make some basic changes to the custom css and they do not seem to be working. For the cart that I am experiences issues with I am using the Digital template.

When I make a change to the custom CSS nothing happens. I have use custom CSS checked. I know the custom CSS is working for two reasons, first when I check the 'Use Custom CSS' box and click save the site changes to whatever is in the default custom CSS before my changes. Second if I change my template from Digital to Standard, the background is no longer white, but it is black as I have set in the custom CSS.

Some of the changes I am trying to make in the custom CSS that are just not happening are:

1. I'd like to have a background image. I added the following to the custom CSS:

Code:
body { background-image: url(file://public/spring.jpg); background-repeat: repeat-x; background-color: #000; }

The default background is already black, when I change #000 to #FFF it does not change to white and I do not see my background image.

2. I've also changed the following to change the color of the text in the Nav Bar to #E10000 but again no luck.

Code:
.navbar-inverse { background-color: #44596f; border-color: #44596f; color: #E10000; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #E10000; background-color: #44596f; }

So what am I missing?

Thanks,
Jennifer
You can try to add the "!important" modifier to your CSS rules from Custom CSS to make it override all other rules.
__________________
Best regards,
Igor Pudovkin
X-Cart hosting team
Reply With Quote
  #4  
Old 08-14-2015, 08:22 PM
 
rowdybunny rowdybunny is offline
 

Advanced Member
  
Join Date: Aug 2014
Posts: 67
 

Default Re: Custom CSS??

Thanks for the replies. I will try to make some of the suggested changes and see if they help. However, I am having some issues with the forums and my own posts not showing up for me so. so while support was looking into this, as I could not reply to this post, I did some playing around myself and it seems to me like the issue is stranger then I thought!

Whenever I enable the custom CSS that was there by default it throws the entire template out of whack. As soon as it was enabled it was making things that were supposed to be dark grey blue etc and completely changing the template. I only want to make a few small changes nothing radical like what was happening when I enabled the custom css.

So I assumed this was the default CSS already in the custom CSS. So I decided to remove EVERYTHING there by default and then enable it with nothing there. When I did this it changed everything as it did when the default CSS was there.

At this point I went and found the file that the template was using for it's CSS and made a small change and the change of course worked fine. I decided that I did not want to change the original file, so I copied the entire CSS file into the custom CSS, enabled it and I was back to the radical changes I was getting with the default custom CSS and no CSS in there.

I'm having trouble trying to figure out where it is getting the CSS from when I enable the custom CSS!
__________________
X-Cart 5.2 & 5.3.3.3
Reply With Quote
  #5  
Old 08-19-2015, 09:47 AM
  qualiteam's Avatar 
qualiteam qualiteam is offline
 

X-Guru
  
Join Date: Dec 2010
Posts: 6,373
 

Default Re: Custom CSS??

Perhaps we speak about different "custom CSS". How do you enable it? Where do you do it? Do you mean Theme Tweaker module? Or do you do the changes via CustomSkin module?
__________________
Alex Solovev,
Qualiteam

---

User manual Video tutorials X-Cart FAQ

You are welcome to press "Thanks" button
if you find this post useful

Click here to learn how to apply patches

X-Cart Extensions
Reply With Quote
  #6  
Old 08-19-2015, 10:48 AM
  razortw's Avatar 
razortw razortw is offline
 

X-Cart team
  
Join Date: Feb 2015
Posts: 807
 

Default Re: Custom CSS??

Quote:
Originally Posted by rowdybunny
Thanks for the replies. I will try to make some of the suggested changes and see if they help. However, I am having some issues with the forums and my own posts not showing up for me so. so while support was looking into this, as I could not reply to this post, I did some playing around myself and it seems to me like the issue is stranger then I thought!

Whenever I enable the custom CSS that was there by default it throws the entire template out of whack. As soon as it was enabled it was making things that were supposed to be dark grey blue etc and completely changing the template. I only want to make a few small changes nothing radical like what was happening when I enabled the custom css.

So I assumed this was the default CSS already in the custom CSS. So I decided to remove EVERYTHING there by default and then enable it with nothing there. When I did this it changed everything as it did when the default CSS was there.

At this point I went and found the file that the template was using for it's CSS and made a small change and the change of course worked fine. I decided that I did not want to change the original file, so I copied the entire CSS file into the custom CSS, enabled it and I was back to the radical changes I was getting with the default custom CSS and no CSS in there.

I'm having trouble trying to figure out where it is getting the CSS from when I enable the custom CSS!
When Custom CSS is enabled, your changes are stored in the var/theme/custom.css file.
Could you please be more specific about what exactly you are trying to add to that section and what exactly is not working for you?
Thanks!
__________________
Best regards,
Igor Pudovkin
X-Cart hosting team
Reply With Quote
Reply
   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 02:39 PM.

   

 
X-Cart forums © 2001-2020