Jump to content

bondimedical

Member
 View Profile  See their activity

  • Posts

    177

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Posts posted by bondimedical

    Foundation - Add a right hand box

    in Customising Look & Feel

    Posted 

    <div id="sidebar-temp">
   <div class="sidebar-title">Media</div>
  <p class="image" style="text-align: center">
	  <img src="etc etc" />
  </p>
</div> 

    In cubecart 5 if we wanted to add a box of our choice in the right hand column in main.php we would simply add the above code. How can I do this in Foundation?

    Foundation Custimisation

    in Customising Look & Feel

    Posted

    I think that black strip with a duplicate of the word Products is an artifact of of the menu system when it is structured for a small screen.

     

    But here are the CSS rules:

    .top-bar-section .dropdown li label { background-color: #1a16ca }

    .top-bar-section .dropdown label { color: #fff }

    Thanks that worked perfectly. Something else I noticed on the Cubecart Demo store is that when you hover over these sub-categories the background goes darker. I also noticed that when you hover over the blue search box the background also changes to #007095. Can you do the same effect for the drop menu and make the background change to #007095?

    Foundation Custimisation

    in Customising Look & Feel

    Posted

     

    What I see in the file cubecart.default.css, at the bottom is:

    .top-bar.expanded .toggle-topbar a { Â Â Â  
 color: #ffffff;
}
    This is a CSS rule with illegal characters in it. You might not even see them.
     
    Please edit the css file and make sure there is nothing after the open brace.

     

    I have removed the illegal characters but its still not working.

    Foundation Custimisation

    in Customising Look & Feel

    Posted

    If you look at the normal Foundation theme when you press the "Shop by Category" link the font changes from white to a grey color but is still legible against the black background. However, with the customised Foundation theme, the grey text in not legible with the blue background. You can view my web address www.andropenis.info/shop/ on a mobile to see what I mean.

    Foundation Custimisation

    in Customising Look & Feel

    Posted

    Add these two rules to the existing rules in cubecart.purplehaze.css:

    .top-bar-section .left {
  background-color: #1a16ca;
}
.top-bar.expanded .title-area {
  background-color: #1a16ca;
}

    I have also changed all the instances of background to background-color, just make it clear that the color is the only thing that is overruling the other rules.

    I am working with cubecart.default.css but the changes did work. However, now the actual text "Shop by Category" changes from white to another color. How do I make it stay white?

    Foundation Custimisation

    in Customising Look & Feel

    Posted

    I think I got it:

    .top-bar {
  background: #1a16ca;
}
.top-bar-section ul li {
  background: #1a16ca;
}
.top-bar-section ul li:hover:not(.has-form) > a {
  background: #1a16ca;
}
.top-bar-section .dropdown li a {
  background: #1a16ca;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
  background: #1a16ca;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:hover:not(.button) {
  background: #1a16ca;
}
.top-bar-section li:not(.has-form) a:not(.button) {
  background: #1a16ca;
}
.top-bar-section li:not(.has-form) a:hover:not(.button) {
  background: #1a16ca;
}

    This gives the same color for hover, not hover, on each selector piece.

     

    I have just tested this on a copy of the Foundation skin editing cubecart.default.css and it all works fine except for one issue.

    On the mobile version there is a drop down menu called "Shop by Category", this changes back to the black color when you click on it. How can I make it stay blue?

    Foundation Custimisation

    in Customising Look & Feel

    Posted

    The starting point of foundation is in the foundation.min.css file. However, that file is nearly impossible to customize.

     

    You can create substyles of Foundation by creating your own CSS file, cubecart.purplehaze.css, for example, or editing the existing cubecart.default.css file. These substyle CSS files overrule the foundation.min.css rules.

    I have spoken to someone in the Foundation forum and they said to use the code

    .top-bar {
  background: #1a16ca;
}
.top-bar-section li:not(.has-form) a:not(.button) {
  background: #1a16ca;
}

    If I choose to edit cubecart.default.css how do I avoid it from being overwritten when an upgrade is done?

×
×
  • Create New...