Currently, I am in the process of building a complex WordPress website using the 320press Twitter Bootstrap theme and incorporating LESS CSS.
Here are some key details to keep in mind:
- WordPress 3.5
- Bootstrap 2.0
- LESS 1.3.3
Everything seems to be functioning smoothly on the WordPress and Bootstrap fronts. However, getting LESS to cooperate proved to be quite challenging. After downloading the less-1.3.3-min.js file from lesscss.org and placing it in the appropriate folder, I referenced it in the header.php file. Upon inspecting the page source, clicking on the less-1.3.3.js reference revealed that it loaded correctly.
This is what the relevant section of code looks like in my header.php file:
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/library/css/fonts.css"><link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/library/css/custom.css"><link rel="stylesheet/less" type="text/css" href="<?php echo get_template_directory_uri(); ?>/library/less/bootstrap.less"><link rel="stylesheet/less" type="text/css" href="<?php echo get_template_directory_uri(); ?>/library/less/responsive.less"><script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/less-1.3.3-min.js"></script>Following the instructions on the LESS website, I loaded the script after the CSS files with high hopes for success. Nevertheless, nothing seemed to change. Frustrated by this setback, I experimented extensively but could not find a solution.
<-- When LESS refuses to cooperate -->
Eventually, I stumbled upon the standard "less-1.3.3.js" file on GIT and upon implementation, everything functioned flawlessly.
<-- desired outcome (the word "Readers")
Celebration was short-lived as I encountered a significant gap beneath the navigation bar when resizing the browser to 979px or below.
The expected appearance should resemble this:
Suspecting a CSS error on my part, I dedicated approximately four hours to investigate, only to realize that the compiled Bootstrap.css file was being displayed twice – once as a linked stylesheet:
and then again as an embedded stylesheet.
Using the Web Developer Extension in Firefox, I removed all embedded styles, restoring the site to its optimal presentation. However, I remain perplexed about what is causing this duplication in the site head other than potentially originating from the JavaScript. Is this a common occurrence amongst developers?
Any insights would be greatly appreciated. Unfortunately, due to working within an internal network environment, sharing a URL is not feasible at this time. To aid in visualizing the issue, I have included a few screenshots.
Please assist me! My attempts to troubleshoot this dilemma have left me feeling mentally drained.
Thank you.