Jump to content

Adjusting header area adding padding above search box


Noeyedeer

Recommended Posts

Hi I have been using Cubecart and php for 3 days now, having a go at designing my own site. Yep, complete newbie. After 3 days, this is what I've got - I know the images are uneven, but I'll work on that later. 
https://thesoapcauldron.com
I'm using the latest version of Cubecart 6.2 with foundation skin, but I would appreciate some help with adding a buffer/padding/extra space to the top of the boxes in header - ie currency, login & search boxes - as they are too high up the top of the page. I would like the search box to be located further down in the white space, and some additional space above the currency and the other small boxes. I know I'm new, but my main.php file just lists the 12 columns, there is no 'padding 5px' text in the file. I have played with my custom css file and adjusted the location of these small boxes and obviously I've adjusted the numbers in the 12 columns to get the logo wider. It's frustrating having to keep going back to remember what files I've changed, but I'm learning a lot! Tried using the Firefox firebug (doesn't appear to save in extensions menu?) and a Chrome developer app, but these are all gobbledygook to me and I find that they don't work well in either Firefox or Chrome. Any suggestions for css editors similar to these that are free?
If anyone would like to help, please list the path of files in cpanel us newbies should follow to add the increased space above the small boxes in header...any other feedback on how my site looks is welcome.
Many thanks, Michelle Cohen

Link to comment
Share on other sites

Welcome Noeyedeer! Glad to see you made it to the forums.

Please find the file /skins/foundation/cubecart.default.css. It is (was) initially blank but this is the best place to put custom CSS rules that overrule any Foundation stylings.

Add this rule:

.nav-boxes { top-margin: 1.5rem; }

Save the file, have CubeCart clear it's internal cache, and force the browser to reload the page resources.

We recommend that, while you are working on the design of your store, in admin, Store Settings, Advanced tab, that you enable debugging. Then enter your IP address in the adjacent field (www.whatismyip.com). This allows for one to more easily determine which CSS file is having an effect. Otherwise, CubeCart coalesces and squeezes resource files into one single file for a faster download and page presentation. This one single file approach makes it impossible to work on your site design.

Also, until your store is ready for regular operation, you might consider disabling CubeCart's caching (same page of settings). This means you won't have to keep having CubeCart clear its internal cache as you add products, make changes to the skin templates, etc. (You will still need to force your browser to reload page resources.)

You should not have been able to have installed Firebug in the latest versions of Firefox. Some versions ago, Firefox completely redid how extensions operate and the developers of Firebug didn't want to go down that rabbit-hole. Also, Firefox's "Developer Tools" are adequate. (Please ask questions about how to use browser tools in the General Discussion forum.)

Link to comment
Share on other sites

Hi, tried this and it didn't work. Have I done this right? Error comes up in line of page, saying 'unknown property top-margin'.   This is what this foundation/cubecart.css.default file looks like: 

text/css cubecart.default.css ( ASCII text )

/* Use this to add specific CSS for this subtheme */
.nav-boxes { top-margin: 1.5rem; }

 

Link to comment
Share on other sites

  • 3 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...