Public Forums 71,145 posts

[nooran Developer nooranJoin date: June 2013Posts: 119Downloads:8Uploads:21 Thanks: 32 Thanked: 6 times in 1 posts]

#194665

Hello,

I have a question please.

Which one is the best to use when working with CSS:
1 – Disable LESS to CSS and work direct on css files or
2 – Enable LESS to CSS and work using LESS to CSS feature from Template Manager?

Personally, I like to work on CSS files directly… but the problem is that the responsive layout damaged or changed the way that I don’t want it…

So what’s the solution in this case? Is it to work using LESS to CSS?

If you want, I can give you a live url example for what I’m facing?

Many thanks for your help and support.

Best Regards
Raffet Ali

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

#522111

Probably the best way is to create a “custom.css” file – within file path –> /templates/your_theme/css/ – and enter the appropriate CSS rules and properties you want to use to customize your site.

For Additional Info —> http://t3-framework.org/documentation/customization.html#custom-css

1 user says Thank You to TomC for this useful post

1. nooran

[nooran Developer nooranJoin date: June 2013Posts: 119Downloads:8Uploads:21 Thanks: 32 Thanked: 6 times in 1 posts]

#522113

Hello,

There is already a “custom.css” file inside the “CSS” folder.
For example, I have added this css code to “custom.css” file:

.t3-mainnav {
border: 0;
border-bottom: 1px solid #0067a2
margin-bottom: 0;
border-radius: 0;
width: 980px;
margin: auto;
}

.head-search .form-control{
display: none;
}

.off-canvas-toggle{
position: fixed;
background: #000000
height: 30px;
line-height: 0px;
display: none;
}

.off-canvas-toggle:hover, .off-canvas-toggle:active, .off-canvas-toggle:focus {
position: fixed;
background: #323232
height: 30px;
line-height: 0px;
display: none;
}

the result was prefect on a normal view. However on a responsive layout view, the responsive dropdown mainmenu was not there.

I know it was because of this code:

width: 980px;
margin: auto;

You may check the url: http://www.yyvye.org

So, how is it possible to solve this? or any responsive similar issues?

Many thanks for your help and support.

Best Regards
Raffet Ali

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

#522144

Hi Raffet Ali,

You can try with Media jQueries which will help to set special CSS according to certain device screen resolution. Here are some tips:

http://css-tricks.com/css-media-queries/
http://webdesignerwall.com/tutorials/css3-media-queries
http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/

Best

3 users say Thank You to Saguaros for this useful post

1. nooran
2. phong nam
3. TomC

[nooran Developer nooranJoin date: June 2013Posts: 119Downloads:8Uploads:21 Thanks: 32 Thanked: 6 times in 1 posts]

#522225

Okay, I will read them… hopefully not complicated..

[nooran Developer nooranJoin date: June 2013Posts: 119Downloads:8Uploads:21 Thanks: 32 Thanked: 6 times in 1 posts]

#522348

Hello,

I read the links you provided… it was awesome.
So far, everything I wanted to change on responsive layout worked fine…

And all working only through “custom.css” file..

Thanks a lot

Best Regards

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

#522423

Glad you were able to work it out … All the best with your continuing site development.

🙂

1 user says Thank You to TomC for this useful post

1. nooran

[Bruce Valle Friend Bruce ValleJoin date: September 2014Posts: 20Downloads:10Uploads:2]

#540637

So what for is the LESS to CSS option i mean enabling the Development Mode option? Could anyone explain that? i mean i was reading the documentation over there: http://t3-framework.org/documentation/bs3-configuration#compile-less and seems like its the best option to customize a theme. I’ll appreciate any help over here, to me if i press less to css and later disable the Development Mode option make that i get lost all my changes

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

#540654

Hi Bruce,

If you’re familiar with LESS and your site is on development stage or you want to customize your site, you can enable Development Mode. When this mode is ON, your site will load LESS file, not CSS files.

Once your site is complete, you can disable this development mode. With this mode, your site will load CSS files instead of LESS. This is better for your site’s performance and you can use Optimize CSS/JS option. However, all your customization are in LESS files so that you need to compile LESS to CSS – with this process, all your custom work in LESS files will be compiled to corresponding CSS files.

Please also notice that when compiling LESS to CSS, all current css files will be overridden so it’s better to backup your site first before compiling.

In case that you’re more familiar with CSS, you can work with custom.css file. This is a special file which helps to keep all your CSS customization even when you update T3 framework or template.You can check out this documentation for more info: http://t3-framework.org/documentation/bs3-customization#custom-css

Hope this makes senses.

[Author]

Posts