Joomla Templates Club 406,261 posts

[extuid Friend extuidJoin date: June 2013Posts: 27Downloads:0Uploads:11 Thanks: 3]

#188199

How to change the background color and font as in the attachment?

---

Attachments:

1. 

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

#495713

So that I can try to best assist you, please provide the url of the site you’re working on,
as well as set your site to “Development Mode” within your Template Manager (assuming the J3.0 version)

[extuid Friend extuidJoin date: June 2013Posts: 27Downloads:0Uploads:11 Thanks: 3]

#495716

Thank you for your excellent support?
The URL is http://www.keacity.com

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

#495718

To change the “non-active” font color . . . .

Within file path –> /t3-assets/dev/templates.ja_argo.less.mod_articles_category.less.css

at line 102, you will see the following:

.brick-big .brick-title a {
background: none repeat scroll 0 0 #FFFFFF
color: #000000
display: block;
font-size: 36px;
line-height: 1;
padding: 10px 20px;
}

The font color is currently set at black (or #000000).
Simply modify the color code to whatever color you want.

This same rule is where you can also change the background color – which is currently set at white (or #FFFFFF)

To change the active/rollover font color . . .

Within file path –> /t3-assets/dev/templates.ja_argo.less.mod_articles_category.less.css

at line 110, you will see the following:


.brick-small .brick-title a:hover, .brick-small .brick-title a:active, .brick-small .brick-title a:focus {
color: #DE5932
text-decoration: none;
}

Same as above, simply modify the color code to whatever color you want.

Hope That Helps

[Ydroxoos Friend YdroxoosJoin date: July 2006Posts: 18Downloads:0Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#516177

I have the same question but I have no dev folder inside my t3-assets folder. Any ideas why is that?

Regards,
Panagiotis

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

#516182

<em>@Ydroxoos 402952 wrote:</em><blockquote>I have the same question but I have no dev folder inside my t3-assets folder. Any ideas why is that?

Regards,
Panagiotis</blockquote>

Please provide the url of the site you’re working on?

[Ydroxoos Friend YdroxoosJoin date: July 2006Posts: 18Downloads:0Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#516186

http://www.kalamataonline.gr/neo
I have recompiled the “less to css” from template’s admin menu and now the /dev/ folder was shown but when I change the .css that you point out in your first reply nothing happens. Also during the recompilation of less to css I got the following error message:
“Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 75 bytes) in /home/kalamata/public_html/neo/plugins/system/t3/includes/lessphp/lessc.inc.php on line 743” 🙁

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

#516187

Can you temporarily set your site to “Development Mode” within your Template Manager–General settings?

[Ydroxoos Friend YdroxoosJoin date: July 2006Posts: 18Downloads:0Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#516188

Yes Tom, I just did it.

Thank you!

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

#516190

Okay, here is what you can try to do . . . .

Within the file path template/ja_argo/css, Create a “custom.css” file

Within it, put the following CSS rules (as described in Post #4 above), modifying the color codes as you wish . . .

.brick-big .brick-title a { background: none repeat scroll 0 0 #FFFFFF
color: #000000
display: block;
font-size: 36px;
line-height: 1;
padding: 10px 20px;

.brick-small .brick-title a:hover, .brick-small .brick-title a:active, .brick-small .brick-title a:focus {
color: #DE5932
text-decoration: none;
}


SAVE CHANGES — CLEAR CACHE — REFRESH PAGE

Let me know if that works for you

If you need some reference for color hex codes –> SEE HERE

🙂

[Ydroxoos Friend YdroxoosJoin date: July 2006Posts: 18Downloads:0Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#516192

Tom,
I did it but no change at all…

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

#516193

<em>@Ydroxoos 402970 wrote:</em><blockquote>Tom,
I did it but no change at all…</blockquote>

Do you use a text editor when you work with your site files, or do you do it through the Joomla backend?

Personally, I prefer to use a text editor (like Notepad++) to edit my CSS and such, and then upload via FTP (via FileZilla).

You do have the t3-assets files as indicated within Post #4, but it may be that you aren’t able to see/access them via the Joomla backend.

[Ydroxoos Friend YdroxoosJoin date: July 2006Posts: 18Downloads:0Uploads:3 Thanks: 6 Thanked: 1 times in 1 posts]

#516194

Yes I use Notepad++ as well as Filezilla (the best opensource solutions for text editing and ftp client).
What do you suggest?

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#516294

Hi Ydroxoos,

When you want to customize css, you need to disable ‘Development Mode’ and ‘Optimize Css’ in the configuration of template in back-end.

Then please try to do as following:
– Open file: /templates/ja_argo/css/custom.css
– Add this code:

.brick-big .brick-title a {
background-color: #000000
color: #FFFF00
}

Let me know if this helps

Regards,

Nazario A

---

Attachments:

1. 

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

#516323

Isn’t that pretty much what I outlined in Post #10 above? :((

[Author]

Posts