Site Update: Using the aStyler to Customize FSD

Matt Ponton

Founder
Staff member
Administrator
Standard Donor
The new layout style that has been created still has plenty of features in the works but one of them is ready to be used by you now.

Changing the Layout Style
basecolorlight.jpg
basecolordark.jpg

The default FSD Light and FSD Dark layouts.

For those that don't know, there are currently two different layout styles for FreeStepDodge: FSD Light and FSD Dark. If you would like to change your style, scroll down to the bottom-left corner of the page where you will see one of the two style names displayed:

style_changer.jpg

Circled in red

The style will be saved as a user setting so you will be shown your set style as long as you are logged into the website. The following tutorial can be done on either style but will show example images from the FSD Light style.

The aStyler
Each style has a menu titled the aStyler that gives you the ability to customize the style's background and main colors. The main color is what is shown as the default red color on FSD Light. I have also prepared some presets based on color pairings related to a character's theme. Feel free to use the presets or use them as a base to your own customization. Unlike the layout styles, the aStyler caches to the browser you are using to view the website. This means that anyone, whether a member or not, can use this feature. The only downfall you have with this is that any settings you make will only be stored on that browser. If you view FreeStepDodge website from a different browser such as a mobile phone then the setting will have to be done again. The second setting will not override the previous browser's settings as the cache has been saved separately in separate locations.

Changing the Background and Main Colors
Open the aStyler by selecting the gear image to the top right of the page body. It can be found above the "We are Fighters" logo and below the Search bar:

astylerlauncher.jpg

From there, the aStyler will load in the middle of the page with the default settings displayed:

astyler_main.jpg

Here you have multiple options:
  • Choose A Preset...: A drop-down list appears with presets of color combinations
  • Update: Saves the current values of the Background and Main color combinations
  • Reset: Restores the default website values. Notice, after selecting Reset you must select Update to save the reset values
  • HTML BG Color: Selecting the colored square brings up the color picker to choose a background color
  • Font: Selecting the font will change the font displayed on the website
  • Main Color: Selecting the colored square brings up the color picker to choose a main color

finalcolorlight.jpg

A finished combination of blue.

There you have it! Of course, if you have any further questions, suggestions, or even share your customized view please feel free to leave it in the comment section below.

Stay tuned for more site updates.
 

Unshaken Faith

New Member
I tested those new features earlier today, they're quite neat. This way everyone can add their own personal touch to the site.

Looking forward to future updates.
 

FakeSypha

Well-Known Member
Looking good! I'll stick to the dark layout option, but it's nice to have the possibility to have your own personalized colors and stuff.

Overall, the new features and new look of the site is great. Keep up the good work, fellas.
 
ALL DOA6 DOA5 DOA4 DOA3 DOA2U DOAD
Top