Joomla Templates Club 406,261 posts

[carlosemuralles JATC carlosemurallesJoin date: May 2006Posts: 36Downloads:0Uploads:18 Thanks: 12]

#194020

Hi,

I tried many ways to change the logo size and margin, and nothing works:

• Enabled development mode
• Created a custom.css in the css folder of the template = no changes
• Edited the style.less in less directory = no changes
• Edited the style.less.css in the t3-assets folder = no changes

Compiled the less to css and nothing.

This is the code I tried to edit:

.logo h1, .logo h1 a {
display: inline-block;
line-height: 0;
margin: 0px 5px 0 50px;
}
.logo-image a {
background-image: url("../../../templates/ja_fubix/images/logo.png");
background-repeat: no-repeat;
width: 200px;
height: 40px;

This is my temporal site: http://184.107.237.30/

Please help.

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

#519623

Hi Carlos,

When Development Mode is enabled, your site will load LESS file so in order to change these properties for logo (in this case, you’re using Celadon theme), you open file: /templates/ja_fubix/less/style.less and look for this rule:


// Logo
// ---------------------------------------------------------
.logo {
border-left: solid 1px @T3borderColor;
border-right: solid 1px @T3borderColor;
height: @navbarHeight;
float: left;
display: inline-block;

h1, h1 a {
display: inline-block;
line-height: 1;
margin: 5px 10px 0 10px;
}
}


change to your desired value. Then in backend of your site > template manager section > click button ‘Compile Less to Css’.

Note that: you shouldn’t change in t3-assets folder as this folder holds optimized file only, not template’s files. And check out this documentation for instruction how to custom CSS: http://t3-framework.org/documentation/bs3-customization#custom-css

1 user says Thank You to Saguaros for this useful post

1. carlosemuralles

[carlosemuralles JATC carlosemurallesJoin date: May 2006Posts: 36Downloads:0Uploads:18 Thanks: 12]

#519729

Very Thanks now it works!

Another question, why this changes don’t works when editing the custom.css file?

I think that my changes will be lost in the next template update.

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

#519764

I agree that the Less file would be affected when updating template. My above suggestion helps you to know how to work with Less. For changing in CSS, it would be best if you add your own custom CSS in that custom.css file, it should work.

[Author]

Posts