Joomla Templates Club 406,261 posts

[denmac Friend denmacJoin date: July 2010Posts: 39Downloads:0Uploads:13 Thanks: 6 Thanked: 1 times in 1 posts]

#188976

Hi there,

This is an awesome template. The only issue I am having is changing the color of the link text, menu rollover and module title background. I have tried the Thememagic and I got no joy, then I tired to mess with the css with no joy as well.
I need to then color to change from the orange to a red, not big deal, but it seems impossible with this template. Please help.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#499101

There are going to be several different CSS rules that you will be needing to modify for the various link colors and such you want to change. Not a problem at all, but one thing I will suggest you try to utilize – as you continue on with your site development – is to use the FIREBUG web development tool.

(the link, as you will see, is a tutorial as well).

Okay, so to change the link color within your footer . . .

Within file path –> /t3-assets/dev/red/templates.ja_hawkstore.less.style.less.css

at line 142, you will see the following:


.t3-footer a {
color: #CE3D17
}

Change the color hex code to whatever color (code) you want.

For help in finding the right color hex code, see these COLOR HEX CODE RESOURCES

To change the “on hover” color for your product names on your home page (currently orange) . . .

Within file path –> /t3-assets/dev/red/templates.ja_hawkstore.less.core.less.css

at line 18, you will see the following:


a {
color: #CE3D17
outline: medium none;
text-decoration: none;
}

Again, change the color hex code to whatever color (code) you want.

If you want to change the color of the price for your products – from orange to whatever …

Within file path –> /t3-assets/dev/red/templates.ja_hawkstore.less.themes.red.template.less.css

at line 19, you will see the following:


span.PricesalesPrice {
color: #FB5A29
}

You guessed it … change the color hex code to whatever color (code) you want.

I’m thinking, after these first few, you get the idea of how this works.
Give FIREBUG a try and I think you will really enjoy how useful a tool it can be.

If you need additional help with additional elements, just let me know

😎

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#499500

Hi Tom!

I’ve been playing around with Hawkstore in an attempt to become familiar with T3 and LESS and I think the advice you have given above is incorrect.

What you have suggested will work but only as long as the OP keeps their site in Development Mode in the template admin.

It seems the way it works is when you have Dev Mode OFF all the /template/ja_hawkstore/css files are compressed into 4 .css files and dynamically created in /t3_assets/css.

But when you have Dev Mode ON all of the /template/ja_hawkstore/less files are dynamically converted to .css files and placed in t3_assets/dev

If, as you suggest above, you modify these t3_assets/dev/.css files the changes will be reflected on the site but only as long as you stay in dev mode. When you switch out of dev mode the t3_assets/css/.css files will be used which are a compressed version of the /template/ja_hawstore/css files.

You still with me? :p

So… what the user above should do (and this is really cumbersome) is find within the many many .less files where the style is that they want to change (this can’t be done with firebug), edit and save, then click the “Compile LESS to CSS” button in the template admin, this will rewrite the /template/ja-hawstore/css files, then take the site out of Dev Mode so that the /template/ja_hawkstore/css files will be minified to t3_assets/css/

I must say… I preferred it without LESS!

Regards,
Scotty

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#499503

Ahhh them boys (and girls) in Joomlart think of everything!

Just found this in the head.php block…

[PHP]<?php
// CUSTOM CSS
if(is_file(T3_TEMPLATE_PATH . ‘/css/custom.css’)) {
$this->addStyleSheet(T3_TEMPLATE_URL.’/css/custom.css’);
}
?>[/PHP]

So just create a new file called custom.css in template/ja_hawkstore/css and it will get minified with the rest of them. As it’s loaded last it will overwrite any previous css rules (unless they are !important).

Much much easier than chasing LESS rules! 🙂

Scotty

1 user says Thank You to scotty for this useful post

1. JA Developer

[Author]

Posts