Web Weather > Weather Website PHP/AJAX scripting

Change sidebar width (Saratoga script)

(1/1)

UpstateWeather.com:
Sorry I this is a really dumb question.... :)

How do I make the left sidebar/menubar of the Saratoga script template wider?

saratogaWX:
Not a dumb question.. glad you asked.  It is not a simple change, but doable.

You have to adjust the sizing in two places:

1) in the weather-screen-{color}-{width}.css (i.e. your 2023-6-weather-screen-taupe-narrow.css)

--- Code: ---.leftSideBar {
 width:9.5em;

--- End code ---

2) in flyout-menu.php in the genCSSFlyout() function, there are a couple of width: statements which will have to be tweaked

Be aware that the sidebar menu was heavily tweaked to have the flyout menu work with CSS alone (no JavaScript needed), so do your changes proportionally to the values there to keep the aspect/operation of the menu working correctly.

uziom:
To make the left sidebar/menubar of the Saratoga script template wider, you will need to modify the CSS (Cascading Style Sheets) code for the template. Here are the steps to do this:

Open the CSS file for your Saratoga script template. This file is typically named "style.css" and can be found in the "css" folder of your template.

Look for the CSS class that controls the width of the left sidebar/menubar. This class is usually named "sidebar" or "left-sidebar".

Modify the "width" property of the CSS class to increase the width of the left sidebar/menubar. For example, you could change the width to "300px" to make the sidebar wider.

Save the CSS file and refresh your website to see the changes.

Note that increasing the width of the left sidebar/menubar may affect the layout of your website, so you may need to adjust other CSS classes accordingly to ensure that everything fits on the page properly. You may also need to adjust the width of other elements on the page to maintain a balanced layout.

Navigation

[0] Message Index