Joomla Templates Club 406,261 posts

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#665431

Hi Tom,

Where should one create the custom.css file? in the /css/rtl directory?

Tim

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#746579

Hi Tom,

Where should one create the custom.css file? in the /css/rtl directory?

Tim

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#665473

Hi @ezaban and guys,

There are different ways to customise style: LESS and CSS.

If you want to override via css files, it’s recommended to use custom.css file. This file will help to keep your change not be affected when you update template / T3 framework. In this case, you can create ‘custom.css’ file in root/templates/ja_teline_v/css/custom.css and add this rule for font-size of RTL site:


html .t3-topnav .nav > li > a {
font-size: 14px;
}


In case that you’re familiar with LESS (beause of the advantages less can bring out), you can create a new less file / or simply copy the less file from template folder into root/templates/ja_teline_v/local folder (check out this docs for more info about this folder: http://www.t3-framework.org/documentation/extend-com-content#isolate-template)

In this case: you can create a file: /root/templates/ja_teline_v/local/less/rtl/variables.less

If you know less, you can see that in the less file for top nav bar: /root/templates/ja_teline_v/less/navbar.less, the font size is using variable @ font-size-small:

font-size: @ font-size-small;

Hence, you just need to override this variable in variables.less within above local just created. Something like:


// Typography
// -------------------------
@font-family-sans-serif: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-alt: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: "Roboto Slab", Cambria, Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;

@font-size-base: 14px;
@font-size-large: ceil(@font-size-base * 1.12);
@font-size-larger: ceil(@font-size-base * 1.25);
@font-size-small: ceil(@font-size-base * 0.85);
@font-size-smaller: ceil(@font-size-base * 0.72);


Hope this makes senses.

2 users say Thank You to Saguaros for this useful post

1. TomC
2. timtecsa

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#746619

Hi @ezaban and guys,

There are different ways to customise style: LESS and CSS.

If you want to override via css files, it’s recommended to use custom.css file. This file will help to keep your change not be affected when you update template / T3 framework. In this case, you can create ‘custom.css’ file in root/templates/ja_teline_v/css/custom.css and add this rule for font-size of RTL site:


html .t3-topnav .nav > li > a {
font-size: 14px;
}


In case that you’re familiar with LESS (beause of the advantages less can bring out), you can create a new less file / or simply copy the less file from template folder into root/templates/ja_teline_v/local folder (check out this docs for more info about this folder: http://www.t3-framework.org/documentation/extend-com-content#isolate-template)

In this case: you can create a file: /root/templates/ja_teline_v/local/less/rtl/variables.less

If you know less, you can see that in the less file for top nav bar: /root/templates/ja_teline_v/less/navbar.less, the font size is using variable @ font-size-small:

font-size: @ font-size-small;

Hence, you just need to override this variable in variables.less within above local just created. Something like:


// Typography
// -------------------------
@font-family-sans-serif: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-alt: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: "Roboto Slab", Cambria, Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;

@font-size-base: 14px;
@font-size-large: ceil(@font-size-base * 1.12);
@font-size-larger: ceil(@font-size-base * 1.25);
@font-size-small: ceil(@font-size-base * 0.85);
@font-size-smaller: ceil(@font-size-base * 0.72);


Hope this makes senses.

2 users say Thank You to Saguaros for this useful post

1. TomC
2. timtecsa

[Author]

Posts