Jump to content

changing text colours


darren

Recommended Posts

hi guys im Darren and new to cube cart. I am no developer or real experience other than very basic html. I have managed to change a few things on the foundation skin via the css but im struggling with .some and any advice would be grateful. I need to change the colour of the txt and icons in the footer but when i do the txt for products and advance search change too. where am i going wrong please    

Link to comment
Share on other sites

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

The foundation.css file assigns the color #2ba6cb to all <a> tags (links).

To change some specific links' colors to something specific, you will need to add them to the cubecart.default.css file.

To help you determine what is what, please learn how to use your browser's developer's tools. For Firefox, right-click on what you are interested in, and choose "Inspect Element". A developer's window will open showing you the location in the HTML code where that item is located, and a pane listing all the CSS rules that could and do apply.

So, for the links only at the bottom of the page, there is the <footer> followed by <div id="box-documents">. Further down, there will be <div class="element-social">.

The CSS rule would need to have a selector that mentions specifically the footer for the a tags in that area, or the specific div desired for all the a tags in that area..

footer a { color: red; }
footer #box-documents a { color: green; }

 

Link to comment
Share on other sites

Hi many thanks for the advice i have managed to change most of the things i need. I was trying to use the developer tools but i was unable to tell what css were used as everything stated cached and not the css on the site.

 

Link to comment
Share on other sites

I profusely apologize for not mentioning that the latest versions of CubeCart will squeeze all the CSS files into one massive file (makes it quicker to download).

In CubeCart's admin, Store Settings, Advanced tab, enable debugging and enter your IP address in the adjacent field. (www.whatismyip.com)

This setting will disable the squeezing process making it easier for you to develop your skin by having the developer tools reflect what rules are present in which original files.

Link to comment
Share on other sites

Hi thanks again for that. I am still struggling to change the colour of products prices but only when there not on sale where it shows both prices in the right colours. this seems to be the line but i just can not figure it out. <span id="ptp" data-price="7.99">£7.99</span> this needs to be red. Many thanks Darren

Link to comment
Share on other sites

In the Foundation skin template (depending on the version) element.product.call_to_action.php, there is this:

<h3>
{if $PRODUCT.ctrl_sale}
   <span class="old_price" id="fbp"{if !$CTRL_HIDE_PRICES} data-price="{$PRODUCT.full_base_price}"{/if}>{$PRODUCT.price}</span>
   <span class="sale_price" id="ptp"{if !$CTRL_HIDE_PRICES} data-price="{$PRODUCT.price_to_pay}"{/if}>{$PRODUCT.sale_price}</span>
{else}
   <span id="ptp"{if !$CTRL_HIDE_PRICES} data-price="{$PRODUCT.price_to_pay}"{/if}>{$PRODUCT.price}</span>
{/if}
</h3>

If the product is on sale, the price gets the styling of class "old_price" (line-through) and the sale price gets the styling of "sale_price" (red). Both of these CSS rules are in cubecart.css.

If not on sale, the text is colored the default text color (almost black).

Link to comment
Share on other sites

To change the default color of just the product prices, you can create a new CSS rule in cubecart.default.css and edit the skin templates:

From:

<span id="ptp"{if !$CTRL_HIDE_PRICES} data-price="{$PRODUCT.price_to_pay}"{/if}>{$PRODUCT.price}</span>

To:

<span class="default_price" id="ptp"{if !$CTRL_HIDE_PRICES} data-price="{$PRODUCT.price_to_pay}"{/if}>{$PRODUCT.price}</span>


Then, the CSS rule:

.default_price { color: red; }

Remember that when upgrading (overwriting existing files with new files), the Foundation skin gets updated as well, including templates and cubecart.default.css.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...