I'm sure I can but I wanted to make sure, can I add the base.css file to the my_changes ad-don?
I have our styles.css file in there but notice that I am editing the base.css file every now and then.
Any feedback welcome!
If you're using the latest V4 releases you might want to switch over to using the css/less files for the layout within the theme. I no longer use my_changes for CSS as it doesn't seem to be relevant under the new structure.
[quote name='NairdaCart' timestamp='1391103085' post='176404']
If you're using the latest V4 releases you might want to switch over to using the css/less files for the layout within the theme. I no longer use my_changes for CSS as it doesn't seem to be relevant under the new structure.
[/quote]
Well I'm still using 3.0.3 cause I don't see the point in going to the v4 release, Not much that has changed to go through all that work.
And I have no idea what css/less files is
[quote name='harpersmoto' timestamp='1391105354' post='176409']
Well I'm still using 3.0.3 cause I don't see the point in going to the v4 release, Not much that has changed to go through all that work.
And I have no idea what css/less files is
[/quote]
Judging from a number of your recent posts, I would like to suggest a little homework. Take a look here CSS Tutorial for some basic CSS information. I also suggest using the firebug extension for firefox. With it installed, right click something on your website that you want to learn about and click “Inspect Element with Firebug”. Now you can find the proper code, add code, remove CSS etc before you actually change it on the real site. Just my $0.02.
You should simply add the class/properties that you actually want to change to your my_changes styles.css file. No need to duplicate everything. If there's a property you want to change, just add/change it in my_changes. This way you are not modifying the standard distribution and will give you better visibility of your local changes if/when you upgrade.
I do use firebug, Its a great program.
tbuirnseth: I used firebug and it shows me that it was located in the base.css file on line 815 and not the style.css
Now maybe I'm slightly clicking on the wrong part of the area I'm trying to edit but I played around with that line in the base.css file and it changed the background color. So that's why I was wondering if the base.css file could be put into the my_changes addon
You're missing the point. It is “Cascading Style Sheets” (css) which means that properties in later data overwrite eariler. So instead of changing the base source file (base.css or styles.css) you should simply change the one property in a local version of a style sheet in my_changes.
Okay I think I got this. Base.css is obviously the base sheet. Styles.css overwrites base.css and my_Styles under mychanges overwrites styles.css. Correct?
What if there is a style that is in the my_changes>my_styles.css sheet that use to work and now doesn't?
What I'm referring to is that I redid our 404_page on the website and its not picking it up in the my_styles.css now. It use to and then all of a sudden doesn't anymore. Checked with firebug and it shows its still looking it styles.css and not the my_styles.css.
I checked the code and from what I could see, everything looks fine.
Nope.
You'll generally find the same selectors in base.css and styles.css, but different selectors.
For example, you may find something in base.css like this:-
.selector-name {
color: #FFFFFF;
border: 1px solid #FF0000;
}
In styles.css, you'll find this:-
.selector-name {
display: block;
font-family: "Open Sans";
font-size: 12px;
}
I would assume that you are not in fact getting your my_styles.css loaded then. Suggest you verify that it is loaded via the Firebug NET function and then select CSS.
tbirnseth= but in other locations the my_styles is loading and working. for instance, the background on the website is loading via my_styles.
I'm going to check the code again and if I have to maybe just erase it and redo it to see if that fixes the issue.
StellarBytes= im going to try and find some information online so that I may understand that better on how the base.css and style.css work.
But for information right now, if I want to change a style, its recommended to be done in the my_styles.css in the my_changes ad-don.
Is the main rule of thumb of CSS that [color=#000000][font=Arial,]more specific rules override more general ones right?[/font][/color]
Check your browser 'console' to ensure you do not have any errors reading the css. Maybe you have a syntax error.
It's not just CS-Cart, it's CSS in general. Read into CSS selectors, nesting and inheritance, which is not specific to CSS - inheritance works in the vast majority of programming languages.
So for example, in your my_styles.css, if you are trying to do something like this to set a background colour:-
Default styles.css:-
.logo
{
background-color: red;
}
.logo p
{
background-color: green;
}
And your HTML looks like this:-
My Logo Text
In this example, the styles.css styling is specified for all elements with class="logo". The 'my_styles.css' version is setting a background colour only for
elements within elements within "logo" class (i.e.
...
inherits the background colour of the div.
It is likely you either have, as Tony has suggested, a syntax error, or you are setting custom CSS for an element which has more refined definition in one of the default stylesheets, for example, you have set up a style for '
', 'p {font-size: 10px;)', but the default stylesheets contain '.classname p (font-size:15px;)' - if there was no ".classname p" selector defined in the default stylesheet, your 'p' selector would render.
There were some issues in V3 which you may want to test this out further in your my_styles.css by adding "!important" to a style attribute you believe is not working. For example, .classname p (font-size:15px !important;)
[quote name='StellarBytes' timestamp='1391225953' post='176542'] It's not just CS-Cart, it's CSS in general. Read into CSS selectors, nesting and inheritance, which is not specific to CSS - inheritance works in the vast majority of programming languages. So for example, in your my_styles.css, if you are trying to do something like this to set a background colour:- Default styles.css:- .logo { background-color: red; } .logo p { background-color: green; } And your HTML looks like this:-
My Logo Text
In this example, the styles.css styling is specified for all elements with class=“logo”. The 'my_styles.css' version is setting a background colour only for
elements within elements within “logo” class (i.e.
…
.). Therefore given the HTML above, the 'styles.css' background colour would be applied as the
inherits the background colour of the div. It is likely you either have, as Tony has suggested, a syntax error, or you are setting custom CSS for an element which has more refined definition in one of the default stylesheets, for example, you have set up a style for '
', 'p {font-size: 10px;)', but the default stylesheets contain '.classname p (font-size:15px;)' - if there was no “.classname p” selector defined in the default stylesheet, your 'p' selector would render. There were some issues in V3 which you may want to test this out further in your my_styles.css by adding “!important” to a style attribute you believe is not working. For example, .classname p (font-size:15px !important;) [/quote]
Im not understanding this. Some of my styles are working in the my_changes addon while others arent.
They use to all work just fine.
I tried to add a new style change in there and it doesn't even work.
I added the !important tag behind the styles and still nothing.
I don't understand what is causing this to not work.
I check the code and its all the same.
Use firebug (or equivalent for other browsers) to identify what css 'selector' is being used to target that object. It will clearly tell you the selector and the property setting being used as well as ones that have been “morphed”
[quote name='tbirnseth' timestamp='1392323972' post='177402']
Use firebug (or equivalent for other browsers) to identify what css 'selector' is being used to target that object. It will clearly tell you the selector and the property setting being used as well as ones that have been “morphed”
[/quote]
Ive already done that, and I even edited it with firebug and its the correct selector.
I can change it under the styles.css sheet and it works just fine. But when I add it to the my_styles.css, it doesnt work.
FIXED:
I figured it out. Somehow the original code for the 404 page got stuck in the my_styles.css file.
and then anything that was put after that did not show up or work. Kind of weird but oh well. I got it fixed now.
Did you clear the cache (&cc). For some reason they have the css-cache under the 'cc' versus the 'ctpl' (which makes more sense to me). If you have everything in their proper locations and the proper line in your hook for styles.post.tpl then your code should appear in the cached/consolidated css file in the var/cache/misc directory.
[quote name='tbirnseth' timestamp='1392334408' post='177428']
Did you clear the cache (&cc). For some reason they have the css-cache under the 'cc' versus the 'ctpl' (which makes more sense to me). If you have everything in their proper locations and the proper line in your hook for styles.post.tpl then your code should appear in the cached/consolidated css file in the var/cache/misc directory.
[/quote]
Oh yea, I had cleared the cache multiple times.
This is how the code actually looked:
.exception p {
color: #FFFFFF;
font-size: 110%;
/* Page 404 */
.exception {
background: url('images/my image.jpg') no-repeat top left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I went in and removed this and then everything worked after that. But any code that was after the code posted below, would not show up.
.exception p {
color: #FFFFFF;
font-size: 110%;
No closing braces (}).
Right. That's why everything after it didn't work. And I realized that when I went back and saw that.
I'm learning! slowly but am learning. Its crazy that 1 little missed character will screw a whole code up.