Public Forums 71,145 posts

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#989890

Hello

I would like to change the text size on the main body of the article. So I went to theme-magic and changed the text font from 14px to 18px.

Indeed the text increased, along with H1, H2 etc.

However I see that the menu increased, the masthead font size increased, along with the margins in there.

Maybe I could use "Inspect Element" and customize (see hardcode) each property to my liking. And in order to do this I find the source code (.css file) and change it there? Is this the way to do this? Or I have to create an additional .css file and somehow include this? Is this the recommended way to do it? This was suggested here: https://www.joomlart.com/forums/topic/change-font-size-5/ , but I did not know where to place this file and include it in the project.

However I would prefer a more modular approach. ie be able to increase the size (and possibly the margins) separately in the main body of the article, separately for the main menu, separately for the masthead. Is this possible?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#989899

bobptz wrote:

Or I have to create an additional .css file and somehow include this? Is this the recommended way to do it? This was suggested here:

Hi

You can create a new css file and call it custom.css in this folder /templates/ja_purityIII/css/

Then add all your customized code in that file.

Take a look HERE

Regards

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#989956

Hello

Thank you for the reply.

Is it possible to make a custom .less file and this to be compiled into .css when I am not in development mode?

Or maybe just change the .less source files? It will be easier.

If I do it with .css, I will have to hardcode every single element (basic font, H1, H2, borders etc. But if I do it from your .less files, I am sure that you have a variable that everything depends upon. If I alter this variable, then everything will change proportionally.

Makes sense?

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#989958

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #444444;
background-color: #ffffff;
}

Looking to inspect the font size (font-size: 14px;) with INSPECT ELEMENT, I see the above code in the following file:
t3-assets/dev/templates.xxx.less.templates.less.css

However when I go with FTP, the file templates.xxx.less.templates.less.css is empty.

xxx is the name of the template which is a copy from Purity III.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#989965

Hi

You can use the varaible.less file for this

Take a look HERE

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#989989

Hello

I did read the article in the link you gave me. I did find at line 80:
@font-size-base: 14px;

What I cannot find is where is the code that controls the font and other dimensions of the main article.

I read with great interest the section #3: replace font for specific element. But which .less file is the one that deals with the main article?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#990038

But which .less file is the one that deals with the main article?

If not specified then it is used the base font – that’s why you can use the custom.css file

example:

.corporate .items-leading {
font-size:-----
color:-----
font-family:-----
}

regards

[bobptz Friend bobptzJoin date: November 2016Posts: 178Downloads:8Uploads:19 Thanks: 1 Thanked: 1 times in 1 posts]

#990062

Thank you for all your help.

[Author]

Posts