Jump to content

Foundation Change Font Size and Color


Recommended Posts

I have tried to figure this out all day!!  How in the world can i change the font size and color for individual parts of the skin.  I have copied and renamed the foundation skin and am using the copied skin.  I have also created a new ccs file named myfoundation.css where I am placing all my styles that I create.  I have added a row to the top of my page and am having a lot of trouble changing the font size and color to log in or register.  As this is the first change I am working on I can see me having this problem again in the future.  ex. latest products . Here is a link to my my homepage so you can see what trouble i am having.

https://www.claudiasbargains.com/

Thanks in advance,

Claudia

Link to comment
Share on other sites

There are rules of precedence to CSS. Each CSS rule is given 'specificity'. I won't get into the nitty-gritty of it all.

But at a base level, the last CSS property seen that would apply to a selector is the one that gets used.

In the <head> section, I see you have, in order:

myfoundation.css
myfoundation2.css
cubecart.css
cubecart.common.css
cubecart.helpers.css
cubecart.default.css

It's the "default" file that you can load up with CSS rules that will be the last seen.

In Firefox and Chrome, right-clicking on a page element will show a context menu with Inspect Element as a choice.

If you find that your changes are affecting more than what you want, add more descriptiveness to it:

.login
a.login
#box-session a.login


 

Link to comment
Share on other sites

the myfoundation2.css is the file I use instead of cubecart.default.css.  In fact I don't use that file at all.  Is that ok or should I use it instead of the one I created?

Thanks, Claudia

Where is the css for id="box.session" and others like that?

Link to comment
Share on other sites

Notice that myfoundation2.css gets loaded and is seen before three other files. (cubecart.default.css is empty until you put your custom rules in it.)

So, anything in those other three files has the possibility of over-ruling whatever you have put in myfoundation2.css.

If using Firefox or Chrome, right-click on the login link. Choose Inspect Element. A section will open in the browser window detailing all the CSS that is being applied to that link, and the various files and line numbers that the rules can be found.

Doing so, you will find that there are no rules that exist for id="box-session".

Link to comment
Share on other sites

  • 6 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...