Override layout.css

[Hondo69]

I understand I cannot modify any files in the folder common-html5. But I also understand I may edit those files by using a 2-step process:

[1] Using FTP, download a copy of the file in question (layout.css) onto your hard drive.

[2] Edit that file as need be, then upload that file not where it came from, but into your specific template theme folder.

In my case, since I'm editing a CSS file, it would be uploaded to the folder:
ThemeName/css

All well and good so for. In theory, that new file will override the one with the same name in the common-html5/css folder.

But it doesn't work.

I've tried clearing cache, using a different browser, standing on my head and whistling, everything I can think of, no dice. It still uses the original file in the common-html5/css folder.

[Hondo69]

Well, sort of.

What I'm trying to do is fix the display of my product options. Each option box is supposed to have a light grey background when the user first opens the page. Once they select an option, that particular box will then change color. It is a visual indicator to the customer of their selection.

Here is an example

-----------

Now here's where the circus comes to town. In Firefox, using the inspect element tool, it shows me the CSS for the option box is:

#divOptionsBlock .radio-format .radio-option {
background: none repeat scroll 0% 0% #FFF;
border: 1px solid #000;
cursor: pointer;
text-align: center;
float: left;
margin: 0px 10px 10px 0px;
padding: 7px 14px;
}

And it also tells me that code can be found here: layout.css line 1169

Which normally, would be awesome. Except the code in that file starting on line 1169 looks like this:

#divOptionsBlock .radio-format .radio-option {
background: #EFEFEF;
border: 1px solid #000;
cursor: pointer;
text-align: center;
float: left;
margin: 0 10px 10px 0;
padding: 7px 14px;
}

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

So the system is pulling the file layout.css not from the common-html5/css folder, it is obviously pulling it from somewhere else.

And it's not coming from my active template folder either.

When I right click on a page and select View Page Source, it gives me:

<link rel="stylesheet" href="assets/templates/common-html5/css/layout.css?vcart=6.4.2" type="text/css" media="all" />

Goodness, what a puzzle.

[bzeltzer]

okay, this is just a guess based on my template and how I believe I've overridden the layout.css previously

1. go to settings>design>themes and styles

2. check to see which css file is listed as your "selected stylesheet"

3. open/edit that file from the ftp

4. add css rules that you'd like to override from layout.css

[thecartdesigner]

I know this is a few days old and didn't notice it until the post was responded to by bzeltzer. So I am sure you have added this to your default_modified.css (As it shows currently)

#divOptionsBlock .radio-format .radio-option {
background: none repeat scroll 0 0 #e2e2e2;
border: 1px solid #000;
cursor: pointer;
float: left;
margin: 0 10px 10px 0;
padding: 7px 14px;
text-align: center;
}

Now. A questions. When did you FIRST modify your "listing_0.html"? If you were to go settings-->design-->template editor-->(select your template (html) via drop down in the top right) you will see the files that you have uploaded. If you have only done changes through ftp you will not see the dated backups that 3dcart offers. But if you remember the date that you first modified the listing template that will play a big part in finding the issue.

I do see that you have an extra <!--START: radio-format--> on line 450 which can cause havoc with the initiation of the 3dcart call tag. Remove it save and clear your cache. Now check the front end and see if it works.

Now I also see that you have very few changes in the listing template itself. My last suggestion would be to backup the listing_0.html and then delete the listing_0.html from your template folder all together. This will force the use of the listing_0.html from the common-html5 folder. This should for sure allow the radio buttons to function after you clear cache.

The issue has nothing to do with the css. Because the rule that should be showing when selected is this:

#divOptionsBlock .radio-format .radio-selected {
background: none repeat scroll 0 0 #d2d2d2;
}

Since it is not showing at all it is an issue of the rule being called.

Hope this helps.

Thanks,
Shaun

[thatdarnchelsey]

Make future edits

You can easily achieve this and any edits you want to do in the future by:

Copy all the code from file "/assets/templates/common-html5/css/layout.css"

Going to "/assets/templates/[yourtemplate]/css/" and creating a new layout.css

Paste the code in your new file

Open up your frame.html

Change the path of layout.css from "/assets/templates/common-html5/css/layout.css"

to this exact line, you don't even need to insert your template name:

<link rel="stylesheet" href="assets/templates/[template]/css/layout.css" type="text/css" media="screen" />

Hope this helped. Let me know if you have any questions.

[thecartdesigner]

You can easily achieve this and any edits you want to do in the future by:

Copy all the code from file "/assets/templates/common-html5/css/layout.css"

Going to /assets/templates/[yourtemplate]/css/" and creating a new layout.css

Paste the code in your new file

Open up your frame.html

Change the path of layout.css from "/assets/templates/common-html5/css/layout.css"

to this exact line, you don't even need to insert your template name:

Although you can do this. It is not necessary at all and will just cause you problems if you don't moderate the changes in the layout.css file from 3dcart.

You just add the rule to your active css file (default or default_modified) which overrides the same rule in the layout.css. If you change the path of the layout.css in your frame you will be left in the dust in 3dcart design updates.

If you REALLY like updating files regularly (Some Do) you can do as suggested and just rebuild the layout.css with your changes every time there is a valid update from 3dcart.

[thatdarnchelsey]

Although you can do this. It is not necessary at all and will just cause you problems if you don't moderate the changes in the layout.css file from 3dcart.

You just add the rule to your active css file (default or default_modified) which overrides the same rule in the layout.css. If you change the path of the layout.css in your frame you will be left in the dust in 3dcart design updates.

If you REALLY like updating files regularly (Some Do) you can do as suggested and just rebuild the layout.css with your changes every time there is a valid update from 3dcart.

Sure. Was just answering the inital question she was asking. I have never had a problem with updates or anything mentioned above, but that's just my experience.

[Hondo69]

Well, well, well, I'm getting smarter by the day thanks to the pros.

It sure helps to understand the big picture before a person goes mucking around with the little stuff.

You've provided excellent instructions that solved my problems and it is a great relief. I can't thank you enough.

[thecartdesigner]

Looks good (and works good) now ;)

[SmokTek]

Although you can do this. It is not necessary at all and will just cause you problems if you don't moderate the changes in the layout.css file from 3dcart.

You just add the rule to your active css file (default or default_modified) which overrides the same rule in the layout.css. If you change the path of the layout.css in your frame you will be left in the dust in 3dcart design updates.

If you REALLY like updating files regularly (Some Do) you can do as suggested and just rebuild the layout.css with your changes every time there is a valid update from 3dcart.

I know this is an old thread, but I'm trying to do as you suggest to modify fonts in my DD_widget, by adding the whole block from layout.css to my current default_modified.css and even after clearing cache and reloading the page, the changes aren't reflected. Am I doing something wrong by adding the whole block?

/* dd_widget.html Template
----------------------- */
#ddWidget {
background: #FFF;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
width: 220px;
height: 430px;
margin: 0 !important;
}
#ddWidget h1 {
font-size: 150%;
margin: 0 0 10px;
text-align: center;
letter-spacing: -1px;
}
#ddWidget h2 {
font-size: 1em;
color: #FFF;
font-weight: normal;
background: #d31111;
display: block;
margin: 10px 0;
padding: 5px 0;
text-align: center;
}
#ddWidget .product-img {
width: 150px;
height: 150px;
position: relative;
margin: 0 auto;
}
#ddWidget .product-name {
text-align: center;
margin: 10px 0;
}
#ddWidget .product-price {
float: left;
font-size: 120%;
color: #d31111;
font-weight: bold;
margin-left: 10px;
}
#ddWidget .product-price span {
display: block;
font-size: 60%;
color: #333;
font-weight: bold;
}
#ddWidget .buy-now-button a {
float: right;
margin: 5px 10px 0 0;
padding: 6px 12px;
color: #FFF;
font-size: 100%;
text-decoration: none;
background: #fcc01f;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
}
#ddWidget .savings-percentage {
font-size: 130%;
color: #FFF;
font-weight: bold;
text-align: center;
line-height: 1em;
width: 60px;
height: 60px;
background: #fcbe18;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
top: 0;
right: -30px;
padding: 10px 0 0;
z-index: 1001;
}
#ddWidget .share-buttons {
width: 80px;
text-align: center;
margin: 10px auto;
}
.widgetCountdown {
text-align: center;
color: #FFF;
margin-top: 5px;
padding: 5px 5px 5px 40px;
background: #333 url(../images/clock-icon.png) no-repeat 10px center;
}
#ddWidget .countdown-text {
font-size: 70%;
line-height: 1.4em;
}
#ddWidget .countdown-text span {
padding: 15px 0;
}
#ddWidget .dd-timer {
font-size: 120%;
}
#ddWidget .no-deal {
font-size: 150%;
color: #d31111;
text-align: center;
margin: 25px 0;
}
#ddWidget span {
display: block;
}

[thecartdesigner]

Daily Deal widget is kinda finicky. If it doesn't work moving it to your active css file (and clearing cache), go to your dd_widget.html file in the template editor and add the rules directly into the <head> of the template like so :

<style type="text/css">

#ddWidget {
background: #FFF;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
width: 220px;
height: 430px;
margin: 0 !important;
}
#ddWidget h1 {
font-size: 150%;
margin: 0 0 10px;
text-align: center;
letter-spacing: -1px;
}
#ddWidget h2 {
font-size: 1em;
color: #FFF;
font-weight: normal;
background: #d31111;
display: block;
margin: 10px 0;
padding: 5px 0;
text-align: center;
}
#ddWidget .product-img {
width: 150px;
height: 150px;
position: relative;
margin: 0 auto;
}
#ddWidget .product-name {
text-align: center;
margin: 10px 0;
}
#ddWidget .product-price {
float: left;
font-size: 120%;
color: #d31111;
font-weight: bold;
margin-left: 10px;
}
#ddWidget .product-price span {
display: block;
font-size: 60%;
color: #333;
font-weight: bold;
}
#ddWidget .buy-now-button a {
float: right;
margin: 5px 10px 0 0;
padding: 6px 12px;
color: #FFF;
font-size: 100%;
text-decoration: none;
background: #fcc01f;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
}
#ddWidget .savings-percentage {
font-size: 130%;
color: #FFF;
font-weight: bold;
text-align: center;
line-height: 1em;
width: 60px;
height: 60px;
background: #fcbe18;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
top: 0;
right: -30px;
padding: 10px 0 0;
z-index: 1001;
}
#ddWidget .share-buttons {
width: 80px;
text-align: center;
margin: 10px auto;
}
.widgetCountdown {
text-align: center;
color: #FFF;
margin-top: 5px;
padding: 5px 5px 5px 40px;
background: #333 url(../images/clock-icon.png) no-repeat 10px center;
}
#ddWidget .countdown-text {
font-size: 70%;
line-height: 1.4em;
}
#ddWidget .countdown-text span {
padding: 15px 0;
}
#ddWidget .dd-timer {
font-size: 120%;
}
#ddWidget .no-deal {
font-size: 150%;
color: #d31111;
text-align: center;
margin: 25px 0;
}
#ddWidget span {
display: block;
}
</style>

Hope this helps... BTW.. Clear out the rules that you are not modifying.

Shaun

[SmokTek]

Thank you very much Shaun, You've been a big help. I'll be in touch for some paid help soon most likely.

[thecartdesigner]

You are very welcome

[Electric-trip]

Although you can do this. It is not necessary at all and will just cause you problems if you don't moderate the changes in the layout.css file from 3dcart.

You just add the rule to your active css file (default or default_modified) which overrides the same rule in the layout.css. If you change the path of the layout.css in your frame you will be left in the dust in 3dcart design updates.

If you REALLY like updating files regularly (Some Do) you can do as suggested and just rebuild the layout.css with your changes every time there is a valid update from 3dcart.

Hello,
I understand that in order to keep the layout.css updated with new fixes or template updates I have not to change the path to my custom layout.css so I am trying to put my code into the default.css in order to override some rules from the layout.css but as per this post, adding this code does not work.

I have enlarged the thumbnails below the gallery in a item page but doing this, part of the thumbnails is hidden and in order to show them in full, I need to increase the height of the padding.

This is the code I need to change but, where do I paste it? 110px is originally 55px
This is height 55 http://screencast.com/t/9Awsd43LT7
This is height 110 http://screencast.com/t/DPlpfNge8WH3

/* HERE STARTS THE DESCRIPTION MOVED DOWN */

#listing0 .addl-images {
height: 110px;
overflow: hidden;
padding: 0 20px;
position: relative;

/* HERE ENDS THE DESCRIPTION MOVED DOWN */


Done, I have found the solution, I had to add the css opening and closing css tags

/* HERE STARTS THE DESCRIPTION MOVED DOWN */

<style type="text/css">

#listing0 .addl-images {
height: 110px;
overflow: hidden;
padding: 0 20px;
position: relative;

</style>

/* HERE ENDS THE DESCRIPTION MOVED DOWN */


This post was very helpful

Thanks for your help

Marco

[JSCWebK]

Daily Deal widget is kinda finicky. If it doesn't work moving it to your active css file (and clearing cache), go to your dd_widget.html file in the template editor and add the rules directly into the <head> of the template like so :

Just wanted to give this post a friendly bump. layout.css kept overriding my custom.css file and I couldn't figure it out. Thanks for pointing out the dd_widget.html.