Public Forums 71,145 posts

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#203522

Greetings!

I’m working on a new site, localhost only.

Successes:

I made the navbar sticky at the top: add “navbar-fixed-top navbar-collapse-fixed-top” to t3-mainnav div in sitetplsblocksmainnav.php.

I padded the t3-header in style.less to move the header below the sticky navbar.

I created 3 new color variables in variables.less.
I used the new variables to create a vertical 3-color gradient background for the navbar:
replace line 145 with “#gradient > .vertical-three-colors(@grad-color1;@grad-color2;50%;@grad-color3);”
under navbar-default in navbar.less.

Next goal – I don’t want the navbar button associated with the current page to be a different color than the navbar. I have tried commenting out the :focus elements in navbar.less, but that didn’t work.

Suggestions?

Thanks!

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#558688

Hi @dsinor,

For this task, you might want to checkout Firebug, there’s an official documentation here and a short video about how to use it here.

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#559381

Hi Adam, thanks for your reply. I played with firebug a bit. I can see how it will be a powerful debugging tool, but it was nearly useless for this little problem. For me, it did not draw a clear path between displayed styles and origin LESS.

As a joomla & framework noob, I benefit from seeing how other people solve problems. So I’ll post a little follow-up here.
IMO, there is a learning threshold where joomla and the framework begin to seem intuitive, but it is certainly not at the beginning stages. I’m not there yet, but I’m getting closer by just playing with things to get what i want.

Here’s what i’ve done:

Installed xampp on a win8 machine, cleared up a port conflict with skype, installed joomla and t3-bs3, cloned the entire t3-bs3 template into a new folder, and started banging on it.

So far, everything I need to elicit changes to the default template is either accessed thru the isis interface, or accomplished by editing less or php files directly. These files are in the c:\xampphtdocsmyclonenametemplates folder. This folder contains front-end and back-end templates, don’t confuse them. T3 is a frontend site layout. Isis or Beez3 is a back-end interface you use to work on a front-end template.

Isis setup for dev work: Under Extensions/template manager/General tab: enable Dev Mode, ThemeMagic, & Responsive. Under Nav tab, enable megamenu and collapse navigation.
If you don’t want the off-canvas sidebar menu function, disable it under the add-ons tab, and then delete the T3 wrapper on line 30 of default.php file in tpls folder of your cloned template, because “it’s not needed if you don’t use off-canvas sidebar”.

I never used LESS in the past, but even as a CSS beginner, LESS is (for me) the most intuitive element of this system. For noobs: the server generates html content from the php elements in your sitetemplate folder and the tpls folder within it, and the server compiles less to css to style the html content. If you edit a css file in the template css folder, it just gets overwritten at the next compile, so don’t do it. If you create a css file called custom.css, the server will not overwrite that file, but it will bandaid the custom styles on top of whatever it was going to do otherwise. It’s quick and easy, but it’s hackish. I’m having more fun editing less files and not using a custom.css.

The back-end interface (isis or whatever) has a preview link to your site (upper right corner, opens a new tab). If you edit and save a less file (I use the free Notepad++), and then refresh the preview page, your xampp server will compile and then present the new page with your changes. It is a little slow due to the compile step. When your site is complete, you need to exit the developer modes mentioned above so that the site runs on precompiled css files for a much speedier experience.

I changed the background color of the navbar and made it sticky as described in the OP.

I chose my own hover accent colors in variables.less lines 209, 216, 309, 311. I also changed the link text colors on line 69, 214, 215. These line numbers are approximate locations depending on what you’ve added or removed from the original file. Change them one at a time, save the less file, then refresh the preview page. It takes 5 seconds to compile and load.

Outcomes: any nav link in “active state” will have the accent background color. This bothered me, because the navbar link for whatever page you’re currently on, is by default “active”. That means it is accented in color. Example: If you are home, then the home button in the navbar is highlighted. I didn’t want that. I fixed it by changing navbar.less line 188 to “transparent”.

My next goal is to not have a home button in the navbar when I’m at home, or a contact button in the navbar when I’m at the contact page, because these buttons serve no purpose other than a visual breadcrumb to let a user know where they are on a complex site, but my site is not that deep.

The problem is that every menu must have a default button (gold star) that is a conceptual anchor for the menu, and if you remove the home button from the home menu by assigning the default status to some other button on the home menu and then trashing the home button, then the home menu seems to be conceptually anchored to the link for a page other than home. I think. At this point, I throttled my stretcharmstrong doll and went to bed.

Perhaps someone can propose an eloquent solution…

Hope some of this is of some help to other noobs.

Many thanks!

Dave

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#559432

Hi Dave,

Please let me explain a little bit so you can understand better.

Each template has 2 folders root_foldertemplatesyour_templateless and root_foldertemplatesyour_templatecss. At the moment, just forget about the folder that contains LESS files since it’s only necessary for customization process since your site layout is handle via CSS files in folder css.

Whenever you enable Development Mode in template setting page, all LESS files will be copied to root_foldert3-assets (default folder) and via Firebug, you can locate the file to be edited if you want to customize the template.

After you have done with customization process, you will have to navigate to back-end >>> Template Manager >>> choose your template >>> hit the button Compile LESS to CSS so all your changes will be updated to appropriate file in folder root_foldertemplatesyour_templatecss and turn of Development Mode.

There’s another way to customize template style is to create custom.css file and write CSS code directly in that file, more detail can be found here.

[Author]

Posts