Public Forums 71,145 posts

[grannykat Friend grannykatJoin date: May 2015Posts: 4Downloads:0Uploads:0]

#662471

I’m new to working with the T3 framework, but have experience with other frameworks (i.e. Gantry & Warp). However, I’m having trouble with finding the relevant css settings for the height of the navbar, the logo, and the padding beneath the nav bar before the content.

See what I mean at http:// jgsny.sheridanstreet.net
I’ve used Firebug and the Web Developer tools in Firebox, but still don’t seem to be able to locate the right css. I’m spending way too much time on this issue and before I abandon Purity III, I’m wondering if anyone can help.

Thanks,

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

#662505

What, exactly, are you wanting to accomplish?

[grannykat Friend grannykatJoin date: May 2015Posts: 4Downloads:0Uploads:0]

#662513

Sorry I wasn’t clear. A screenshot of the home page is attached. When I check for which css file is controlling the logo, nav, and body sections, I see that purity_iii.less.navbar.less.css and templates.purity_iii.less.bootstrap.less.css are referenced when I inspect the nav element in firebug. However, changes margins, padding, font size to the classes .navbar-header, t3-mainnav and .t3-navbar are not having an effect.

I know I’m missing something simple and I need help to identify which css is causing the problem.

thanks,
Kate

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

#662514

I saw your site (via the link you provided), but you’ve not yet explained exactly what it is you’re wanting to accomplish. For example, are you wanting to increase the width of the main nav so as to fit all items on one line?

[grannykat Friend grannykatJoin date: May 2015Posts: 4Downloads:0Uploads:0]

#662516

The full menu will fit if I reduce the text size for the menu, so that’s not a problem. What I ideally want to have is:

1. Masthead (full width with white logo on background of light blue)
2. Nav bar with all menu items on one line
3. space between nav bar and body of page.

Screenshot of comp attached.

Nothing fancy I don’t know why I’m confused (expect for the plethora of choices in T3).
Thanks

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

#662543

Hi Kate,

T3 framework utilizes Bootstrap system which implements LESS/CSS so T3 provides option called Development Mode in backend settings of each template. With this option, your site will run with LESS files and vice verse, when you disable this option, your site will load CSS files instead. Hence, if our clients are familiar with LESS (you know the advantages of LESS), they can use Development mode.

When you inspect with Firebug and see some files like: purity_iii.less.navbar.less.css and templates.purity_iii.less.bootstrap.less.css, it means that your site is running with less files (Development Mode is enabled). So if you are more familiar with CSS, just access administrator area of your site > Extensions > Template manager > Purity III template style > navigate General tab and set ‘Development mode’ to ‘OFF’.

then you can inspect as other templates.

In case that you want to override css of template, it’s recommended to create a new css file called ‘custom.css’ in this directory: root/templates/purity_iii/css/. This file will help to keep all of your custom css code and it will not be affected when you update template or T3 framework. More info can be found here: http://www.t3-framework.org/documentation/bs3-customization#custom-css

I hope this helps and if you have any questions about T3 framework, just let us know.

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

#745731

Hi Kate,

T3 framework utilizes Bootstrap system which implements LESS/CSS so T3 provides option called Development Mode in backend settings of each template. With this option, your site will run with LESS files and vice verse, when you disable this option, your site will load CSS files instead. Hence, if our clients are familiar with LESS (you know the advantages of LESS), they can use Development mode.

When you inspect with Firebug and see some files like: purity_iii.less.navbar.less.css and templates.purity_iii.less.bootstrap.less.css, it means that your site is running with less files (Development Mode is enabled). So if you are more familiar with CSS, just access administrator area of your site > Extensions > Template manager > Purity III template style > navigate General tab and set ‘Development mode’ to ‘OFF’.

then you can inspect as other templates.

In case that you want to override css of template, it’s recommended to create a new css file called ‘custom.css’ in this directory: root/templates/purity_iii/css/. This file will help to keep all of your custom css code and it will not be affected when you update template or T3 framework. More info can be found here: http://www.t3-framework.org/documentation/bs3-customization#custom-css

I hope this helps and if you have any questions about T3 framework, just let us know.

[grannykat Friend grannykatJoin date: May 2015Posts: 4Downloads:0Uploads:0]

#662801

Helps a great deal. I’ll give it a shot, but should be able to manage when not confused by the Less files.

Thanks again,
Kate

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

#662841

Ok, let me know if you have further question.

[Author]

Posts