After spending many hours attempting to accomplish what I thought would be a relatively simple task, I decided to change the theme of the the Massachusetts HOSA website. Although my post last week went into detail about the many reasons that I originally chose to use the Trusted theme, there was one problem that became obvious to me as I attempted to adjust the size of the image slider the displayed on the homepage of the theme. While I expected these kinds of edits to be as simple as adjusting the size of a div container, it turned out that the theme used more complex embedded functions and jQuery to make the theme responsive. This responsive nature made it difficult to edit the size of the image slider and set it to a smaller, constant size.
It was around this time that I began to question whether or not it was worth my time to continue debugging and teaching myself how the Trusted theme set up the slider. I decided to instead look for a similar theme that may be easier to edit. I found the Consulting theme and found the slider to be much easier to edit. I was able to set the maximum width for the slider at 700px while still allowing dynamic resizing for responsiveness and support for mobile devices. Unfortunately, this nullified all of the changes that I had made to the Trusted CSS files that brought the site into compliance with the HOSA style guidelines. I did, however, discover a far more efficient way to edit the Consulting theme that I kicked myself for not thinking of earlier. First, I used Chrome’s Developer Tools to find the color code that I wanted to change. I then used the “Replace All” tool in TextMate to change all occurrences of the that color code with the desired color. Overall, the second time around for customizing the theme was far smoother and more efficient than the first.