Foundation - minor change

[kalyncomputers]

I have a client who really likes the Foundation skin except for a couple of  things.

 

1 - the font colour - he would like it to be black . I have played with the foundation.min.css and I can change everything to black but...if I do, then of course the text in bottom footer, e.g. Terms and Conditions is not visible.

 

Can you point me in the right direct to change the colour in the footer to white?

 

2 - Logo size - much as I have hunted, I can't find where to change the logo size - some ideas would be appreciated.

 

I am very impressed with the release version of 6.0.0 - it ain't half fast!

 

Tim

[bsmither]

1. You are not clear about what lettering you are trying to change. For example, on the Homepage, "Latest Products" is black as well as the Homepage document (unless changed in the document editor).

 

The CSS has all <a> tags (links) as a greenish-teal and a darker shade when hovering over the link.

 

To change just the links in one area, but not affect the others, we need to get more specific. So, we can use the cubecart.default.css file to specify the custom rules overruling the Foundation CSS.:

Just latest products panels
#content_latest_products .panel a { color: black; }
#content_latest_products .panel a:hover { color: gray; }
 
or all product panels
.panel a { color: black; }
.panel a:hover { color: darkgrey; }
 
or, having made all links black, but set Site Doc links to greenish-teal
#box-documents a { color: #008cba }
#box-documents a:hover { color: #0078a0 }

[kalyncomputers]

Just what I needed! 

 

Thanks

 

Tim

[bsmither]

2. The Foundation skin will resize the logo to fit the space allocated to it. The allocated space changes based on the width of the browser window: small, medium, and large.
 
The page is basically divided into rows and each row is set to have 12 columns. Within each allotted space, there can be more rows and 12 columns.
 
Looking at the Foundation template main.php, lines 55-59:

             <div class="row marg-top">
               <div class="small-5 medium-4 large-3 columns">
                  <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a>
               </div>
               <div class="small-7 medium-8 large-9 columns nav-boxes">

Line 55 starts a row, and includes two containers.

 

The first container will either allocate 5 columns if the width of the browser is small, 4 columns if medium, and three columns if large. The second container takes the remaining columns that total 12 all together.

 

To get a bigger logo, we must allocate more of the 12 columns to the first container, and remove the same amount from the second container. So let's bump up the allocated space by two columns:

             <div class="row marg-top">
               <div class="small-7 medium-6 large-5 columns">
                  <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a>
               </div>
               <div class="small-5 medium-6 large-7 columns nav-boxes">

[kalyncomputers]

Thanks again bsmither - issue 1 is now resolved.

 

Issue 2 - getting there - thanks

 

Tim

[kalyncomputers]

OK - we are there!

 

Thanks to all who gave me pointers to the bits of code that need to be changed. 

 

I now have exactly what I want - no major hacks but something that looks clean and loads like the proverbial off a shovel.

 

I know it's only a simple shop but have a look at www.labpif.com - my client is delighted.

 

Any comments or brickbats gratefully received

[harrisorganic]

Hi Brian, further along this path I have not been able to change the footer text and link color from the default blue. 

I thought the footer may have been a panel , ie;

.panel a { color: black; }
.panel a:hover { color: darkgrey; }

but the answer was:

#box-documents a { color: black }
#box-documents a:hover { color: orange }  works OK, however the icons in the RH column for twitter and FB not changed

Inspector shows

<a href="https://twitter.com/HarrisOrganic" title="Twitter"><i class="fa fa-twitter-square"></i></a>

<i class="fa fa-twitter-square"></i>

I dont know what to do to change the icons.

Also noticed on 10 March your post that you used the word gray, instead of grey. Is this acceptable?

regards Duncan

Edited May 10, 2015 by harrisorganic

[Dirty Butter]

gray is USA spelling, grey is UK spelling

[bsmither]

The standard color for any non-specific link is: #2ba6cb.

In the cubecart.default.css file, add:

.element-social a { color: black }
.element-social a:hover { color: orange }

This styles any link inside the Social Element box.

[bsmither]

Browsers since day one have understood both the words grey and gray equally.

[harrisorganic]

I did not see "element-social", but now its obvious.  

I have attached my default.css file, warts and all, hoping that it may be of use to others to change color schemes

Thanks, have a good day.  ​

cubecart.default.css