X-Cart forums

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

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.

.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

[qualiteam]

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

[razortw]

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:

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.

.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.

[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!

[qualiteam]

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?

[razortw]

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!