Jump to content
Noeyedeer

Adjusting header area adding padding above search box

Recommended Posts

Posted (edited)

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

Edited by Noeyedeer

Share this post


Link to post
Share on other sites

Posted (edited)

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.)

Edited by bsmither

Share this post


Link to post
Share on other sites
Posted (edited)

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; }

 

Edited by Noeyedeer

Share this post


Link to post
Share on other sites

Hmmm still did nothing to margin? Error now removed from line. Ctrl F5 couple of times, margin hasn't adjusted? 

Share this post


Link to post
Share on other sites

Looks right to me.

Maybe I didn't understand what it was exactly you wanted changed.

This change has the effect of lowering everything that is to the right of your logo by 20 pixels or so.

Share this post


Link to post
Share on other sites

Using a pixel to ram calculator ensured that 1.538 is the correct rem to use, which centred it perfectly in the middle. Regards

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×