keepcalminsane Posted May 6, 2017 Share Posted May 6, 2017 How do i change the black to a blue on the site please using the foundation skin please can you help i think it look better with #2b71af also how to i make the text a bit smaller on the product names as well please please can you help me thanks Sorry if i posted in wrong forum Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 6, 2017 Share Posted May 6, 2017 Welcome to the forums, @keepcalminsane ! Look in your skin/css/foundation.css file about line 1725. It's best to make a pristine copy (with it's own name) of all your skin files before you start fiddling with edits. Then you can always back out of any customizing you do that you aren't satisfied with. .top-bar { background: #333333; I found that code section by using the Firebug extension in FireFox. When you right click on a section you want to modify you will see "Inspect element with firebug". Choosing that brings up a window at the bottom of the page. On the right you will see the code locations, and you can edit it there to see if it does what you want. Chrome and other browsers have something similar. Right clicking on the product title indicates the coding for the title is inherited from H3 in foundation.css. So you'll have to search within foundation.css for where the sizing of H3 is coded. Quote Link to comment Share on other sites More sharing options...
keepcalminsane Posted May 6, 2017 Author Share Posted May 6, 2017 Thanks may i ask about the text size that i put on the image as well please I have changed it but its still showing the black i have saved it and rechecked the code and its the one that i am after .top-bar { background: #2b71af; any advice please Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 6, 2017 Share Posted May 6, 2017 Sorry, I should have reminded you to clear all CC cache in Maintenance, except images. Also clear your browser cache (Ctrl/F5). I just tried the edit, and it worked partially. It turned to blue the empty part of the nav bar to the right of the text, but not where the text is. So there's another code somewhere that needs changing, too. There's a top-bar-section a little further down in the foundation.css code. Maybe that's it. Quote Link to comment Share on other sites More sharing options...
keepcalminsane Posted May 6, 2017 Author Share Posted May 6, 2017 what about the text size please bud Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 6, 2017 Share Posted May 6, 2017 I'm off my computer now and can't check, but as I recall there is a section near the bottom of foundation.css that lists the relative sizes of h1, h2, etc. Quote Link to comment Share on other sites More sharing options...
keepcalminsane Posted May 6, 2017 Author Share Posted May 6, 2017 @Dirty Butter thank you so much for your help i have now sorted what i been trying to do for weeks thanks bud. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 6, 2017 Share Posted May 6, 2017 Glad to be of help. Quote Link to comment Share on other sites More sharing options...
keepcalminsane Posted May 7, 2017 Author Share Posted May 7, 2017 (edited) @Dirty Butter sorry to bother you when i change the colour of the text at the bottom of the page in the footer it changes it for the rest of the site is there anyway i can stop that from happening this is the code i changing the colour on /* Default Link Styles */ a { color: #ffffff; line-height: inherit; text-decoration: none; } a:hover, a:focus { color: #258faf; } a img { border: none; } the black arrow is what i want to keep that colour and the white arrow is what i want to change to white text Edited May 7, 2017 by keepcalminsane Forgot image Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 7, 2017 Share Posted May 7, 2017 There's a footer section in cubecart.css. You should be able to copy that section over to cubecart.default.css and make adjustments there. You can see how hover, etc., is dealt with for the product titles and add something similar for the footer text. Cubecart.default.css is not overwritten on upgrades. Other tweaks you make to foundation.css, etc. will be lost on upgrade and you'll have to put your edits back any time Foundation is revised. If you plan on extensive cosmetic changes, you might prefer to purchase a skin that provides easy ways to change colors, etc. SemperFiWebServices has a new one out with lots of flexibility that can be dealt with from within Admin, rather than via file changes. https://www.cubecart.com/extensions/skins/custom-foundation-5-skin And there are several other commercial skins that might provide the look you want. Havenswift Hosting has some you might like. If you go that route, be sure it is a Foundation based skin, not an old v5 skin. The v5 skins work with v6, but some functionality of v6 will not be there out of the box. Quote Link to comment Share on other sites More sharing options...
keepcalminsane Posted May 7, 2017 Author Share Posted May 7, 2017 $20 is a bit much for just changing a little bit to make site look good also this is the part that giving the problem /* Default Link Styles */ a { color: #ffffff; line-height: inherit; text-decoration: none; } a:hover, a:focus { color: #258faf; } a img { border: none; } this a { part is giving the problem as it looks like its linked to the products when they get added to main page Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted May 7, 2017 Share Posted May 7, 2017 OK, if you don't want extensive changes: You're going to have to play around with that section copied over to cubecart.default.css along with the footer section. footer { background-color: #000; color: #fff; } footer h3 { color: #fff; } I'm not the one to tell you how to do it, though. Sorry. Quote Link to comment Share on other sites More sharing options...
bsandall Posted May 8, 2017 Share Posted May 8, 2017 If you have time but not money, I recommend you learn how to use your web browser's developer tools. For example, in Chrome and Firefox, you can right-click on a page element, such as an image or text, and choose 'Inspect' or 'Inspect Element' from the menu that pops up. On the right side of the developer panel that comes up at the bottom of the browser window, you should see 'Styles' or 'Rules', depending on your browser, for all of the CSS that affects that element. You can edit these directly in that panel and see the changes in real-time in your browser window. Once you make a change that you like, you'll have to find the CSS file for the rule you edited and make the same changes there. It can be a time-consuming process in the realm of dozens of hours if not more to create a good looking skin, especially if you are not experienced. So, a question to ask is how much is your time worth? Quote Link to comment Share on other sites More sharing options...
keepcalminsane Posted May 8, 2017 Author Share Posted May 8, 2017 Thanks @bsandall for your advice. I have now managed to change the part that i needed to not the way i was hoping but i managed to do it i have been able to do every thing is set out to do that i posted on here with the help of @Dirty Butter and i was able to sort out the last part my self using a format that should not be used as it can give problems but im not bothered as i only setting it up for a friend. I also have all the time the world as i and in from of my computer from 9am -1am monday- sunday. Thanks for advice tho Problem solved Thanks all for help Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.