I know that a lot of questions have been posted here about the cache and open cart.
I have a server running OC v3.0.3.2, I've been changing few default colors, some changes were applied instantly but the others required clean the cache to be displayed.
Recent changes in navigation bar modified its height
here's the code in
/catalog/view/theme/default/stylesheet/stylesheet.css
#menu {
background-color: #01aa83;
/*background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);*/
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
min-height: 40px;
}
#menu .nav > li > a {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
padding: 10px 15px 10px 15px;
min-height: 15px;
background-color: transparent;
/*border-left: 1px solid #fff;*/
}
/*#menu .nav > li:first-child > a {
border-left: none;
}*/
divs used to have a left border but I commented the line trying to figure it whats going on?
Related
I have set CSS for each button on main menu. I want to change the border color for each item.
I can change the color what ever I want. But I want to pick out some specific color for each button.
This part of CSS define the border color:
#main-nav .menu-sub-content {
display: none;
padding: 0;
position: absolute;
z-index: 205;
border-top: 12px solid ;/*#F88C00*/
border-top-color: transparent !important; /*I change to transparent*/
background: #fff;/*2d2d2d*/
color:#999;
-webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius : 3px;
-moz-border-radius-bottomright : 3px;
-moz-border-radius-bottomleft : 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius : 3px;
}
First I tried this
border-top-color: transparent !important;
And then I put this CSS for 3rd button
.ucuncu-nav.menu-sub-content{
/*border-top:12px solid;*/
border-top-color:#669900 !important;
}
But it didn't changed. How can I change it now?
Elements of your list have id's which you can use when adding separate borders for what you display on hover. Try this code:
#menu-item-17:hover .mega-menu-block {
border-top: 3px solid red !important;
}
#menu-item-7:hover .mega-menu-block {
border-top: 3px solid green !important;
}
etc, for all your <li> menu items with different id's. !important rule is here a quick solution because the is overridden for some default styles.
the element that won't change is in this page (http://www.animefansftw.org/community/threads/fate-kaleid-liner-prisma%E2%98%86illya-3rei.641/add-reply)
the code that doesn't seem to take effect is
body[style="overflow-y: hidden; min-height: 259px; background: black none repeat scroll 0% 0%;"]
{
background: blue !important;
}
my real questunion is why it doesn't work & how to make it work
my Style(FF v47.0.1)
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("animefansftw.org")
{
a:link{color: #b7e2fb !important;}
a:visited{color: #1eadff !important;}
a:hover{color: green !important;}
a:active{color: red !important;}
*, body, #content-wrapper, #footer-widgets,
single-post,.discussionList .discussionListItem.sticky .posterAvatar,
.discussionList .discussionListItem.sticky .stats,
.discussionList.discussionListItem.moderated .listBlock,
.discussionListItem.InlineModChecked .posterAvatar,
.discussionListItem.InlineModChecked .main,
.discussionListItem.InlineModChecked .stats,
.discussionListItem.InlineModChecked .lastPost,
.discussionListItem.moderated.InlineModChecked,
.discussionListItem.deleted .posterAvatar
{
background: black;
color: white !important;
}
.footer-widgets-border-left, #DiscussionListOptionsHandle a
{
background: #00004d;
}
.footer-widgets-border-right
{
background: #000080;
}
img[alt="default"]
{
-webkit-filter: invert(100%);
filter: invert(100%);
}
.cat-list li.ep-title:hover
{
background: gray !important;
border-left: 5px solid #f5f211;
border-right: 5px solid #1143f2;
}
li.ep-title
{
margin: 0 !important;
background: black !important;
border-bottom: 3px solid #00004d;
border-left: 0px solid transparent !important;
border-right: 0px solid transparent !important;
}
.dl-box
{
background: black;
border: 1px solid black;
box-shadow: -10px -10px 5px 0px #00004d;
}
.dl-title
{
background: -moz-linear-gradient(45deg, #00004d, blue, blue, #00004d);
}
.post-date .date, #social-wrapper, #nav, h3.newanimetitle,
#footer-bottom, .hasFlexbox .nodeList .categoryStrip,
.hasFlexbox .sidebar .visitorPanel .secondaryContent,
.sidebar .section .secondaryContent,
.threadListSeparator,.discussionList .sectionFooter
{
background: -moz-linear-gradient(top, #00004d, #000080, #000080, #00004d) no-repeat !important;
}
.dl-item
{
background: #1a1a1a;
}
#header-bottom
{
float: left;
background: url("http://puu.sh/2b5au.jpeg") #000000 !important;
width: 980px;
height: 165px;
}
#respond textarea
{
font-family: "Times New Roman", Times, serif;
font-size: large !important;
background: #00001a !important;
border: 1px solid #00004d !important;
}
.nodeList .node.level_1
{
background: #00001a !important;
box-shadow: 1px 2px 3px #00001a;
}
.nodeList .categoryStrip
{
border-top: 2px solid blue;
}
.hasFlexbox .node.level_2 .nodeInfo, .visitorPanel .stats dl,
.blendedEditor .redactor_box .redactor_toolbar
{
background: 0;
}
.hasFlexbox .message .messageUserInfo
{
background: #00001a !important;
}
div[style="background: #eeeeee; width: 620px; margin: 0 auto; padding:15px; font: 10pt italic; border: 1px solid #333333;"],
.message .dark_postrating.likesSummary, .dark_postrating
{
background: rgb(0, 0, 26) none repeat scroll 0% 0% !important;
}
.quickReply,.mainContainer .mainContent, .mainContainer_noSidebar
{
background: #00001a;
border-top: 2px solid #000080;
}
.blendedEditor .redactor_box .redactor_toolbar, .messageList .message
{
border-top: 2px solid #000080;
}
body[style="overflow-y: hidden; min-height: 99px;"],
.submitUnit .button, .redactor_toolbar
{
background: rgb(0, 0, 26) none repeat scroll 0% 0% !important;
}
element, body[style="overflow-y: hidden; min-height: 259px; background: black none repeat scroll 0% 0%;"]
{
background: blue !important;
}
}
Remember the basic rule of css hierarchy for implication and importance:
Inline - highest importance
Internal
External
To my understanding of css, and Whatever I am able to get from your code is you have first implied a css property as !important to a parent element, and then might have used something on child.
Though remember it will not show its impact even on implying !important, as it is under that parent property. So, you need to write inline css for it, though not recommended.
e.g: if font-size is set as 15px!important to parent itself, then an inline css is used to change font-size of a child.
The best rule I follow is never imply !important property until it is the last possible solution. You can use better and unique names for your classes and ids, if you are worried it will get disturbed with some other piece of code.
I am trying to set the size of a div to A4 so that every new box start from a new page. But my box is overlapping over the previous page.
I used this code from this post:
.invoice-box {
width: 21cm;
min-height: 29.7cm;
padding: 1cm;
margin: 1cm auto;
border: 1px #eee solid;
background: white;
font-size:16px;
line-height:24px;
color:#555;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
but the pages are overlapping.
How to correct it?
Not an exact fix, but you can set a page break for printing with page-break-after definition.
I am a css beginner so apologies in advance if I am asking basic questions.
I am using a jquery datepicker in my web application and have an issue with the positioning of the jquery date button. I am using a css framework (yaml) which has a whole set of defined styles for buttons so what I have needed to do is override all the pre-defineed styles.
When I specify the following styles...
button.ui-datepicker-trigger, button.ui-datepicker-trigger:hover {
border: 0px !important;
background-color: transparent !important;
background-color: rgba(0, 0, 0, 0) !important;
background-image:none !important;
border: 0 none !important;
display: inline !important;
margin-left: 5px !important;
box-shadow: none !important;
padding: 0 0.5em !important;
}
The date button is slightly too high and not in line with the input field...
When I fix this and specify the following styles...
button.ui-datepicker-trigger, button.ui-datepicker-trigger:hover {
border: 0px !important;
background-color: transparent !important;
background-color: rgba(0, 0, 0, 0) !important;
background-image:none !important;
border: 0 none !important;
display: inline !important;
margin-left: 5px !important;
box-shadow: none !important;
padding: 0 0.5em !important;
position: absolute !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
The date button is in line with the next field which is what I want.
BUT after changing the style of the button to use absolute (3 end lines of 2nd css extract above), whilst i am doing a mousepress the date control jumps up about 15 pixeles up the screen.
Has anyone got any ideas on how I might fix this? And a good explanation as to what is happening for my understanding.
thanks
You can try another solution by using the calendar icon inside the textbox.
Check this here :- http://jsfiddle.net/33Xxk/
.tInput_datepick {
width: 250px;
color: #555555;
text-decoration: none;
border-radius: 7px;
padding-left: 7px;
background-image: url(http://www.bay.k12.fl.us/portals/18/Images/calendar_icon.jpg);
background-repeat: no-repeat;
background-position: top right;
background-position-y: -5px;
height: 25px !important;
border: 1px solid #888e9c !important;
background-color: #f4f5f9 !important;
cursor: pointer !important;
}
I noticed that the buttons on unfuddle.com use a layer of noise, i was just wondering what the purpose of this is, i can't visibly notice the difference, but perhaps this is some cross browser hack?
It seems silly to build such an awesome CSS3 button that uses no images only to still load a noise image anyway.
Here is their CSS that goes with the buttons in question, note the gnoise.png?cbv-1346878364
.gp_button, a.gp_button, input.gp_button:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.gp_button:hover, a.gp_button:hover, input.gp_button:hover:not([type="radio"]) {
background-color: #A5C416;
background-image: radial-gradient(at center center , #85C700 20%, #7EBD00 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:visited, a.gp_button:visited, input.gp_button:visited:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:active, a.gp_button:active, input.gp_button:active:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #90D900;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}
.oldie .gp_button, .oldie a.gp_button, .oldie input.gp_button:not([type="radio"]) {
background-color: #7EBD00;
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.oldie .gp_button:hover, .oldie a.gp_button:hover, .oldie input.gp_button:hover:not([type="radio"]) {
background-color: #85C700;
}
.oldie .gp_button:visited, .oldie a.gp_button:visited, .oldie input.gp_button:visited:not([type="radio"]) {
background-color: #7EBD00;
}
.oldie .gp_button:active, .oldie a.gp_button:active, .oldie input.gp_button:active:not([type="radio"]) {
background-color: #7EBD00;
border-color: #90D900;
}
gnoise.png goes on top of the background-color (along with the radial gradient) to add some visual complexity to an otherwise flat image. The effect is barely visible on a.gp_button, but you can see it if you zoom in on a screenshot using Photoshop, or use the eyedropper to compare pixel colors. The effect is more visible on the <footer> element, because of its darker background color.
By re-using one image on top of solid colors, they get a variety of colors while avoiding multiple HTTP requests which might slow down page loading.
It's just a guess, but the get parameter (?cbv=1346878364) could be used to ensure that, after an update to the image files, a new image file is actually pulled from the server instead of using a browser-cached version.
My guess is that it could have been there for browsers that don't support CSS3. However when I inspect the button in chrome it is overwritten by another image, which makes me believe that is not the case.
If it is not there for older browsers then chances are it is just a coding error. maybe they used it at some point and forgot to take it out.
But to answer your question. It isn't used for anything because it is been overwritten by this image. And if you are looking to replicate what they are doing then I would just remove it.
background-image: -webkit-radial-gradient(center center, #7ebd00 20%,#77b300 80%),url('/images/gnoise.png?cbv=1346878364');