How to Run SMF Locally for Theme Development / Testing

[SiVa000000]

Step 1 — Install XAMPP
Installing  XAMPP Refer this link
https://friendstamilchat.in/forum/index.php?topic=56554.0

Step 2 — Download SMF
https://download.simplemachines.org/


Step 3 — When installing Simple Machines Forum (SMF) locally (or on a server), you must match the PHP version in your XAMPP (or other PHP environment) to what SMF requires — otherwise you will likely see installation or runtime errors.



Step 4 — Start XAMPP & Click Admin Button


Step 5 — Check XAMPP PHP Version



Step 6 — Extract SMF installer zip to XAMMP path



Step 7 — Create new user to acess db








Step 8 — Stat SMF Installer from browser







Step 9 — Take an  db backup



Step 10 — SMF Install Completed Test it from browser

[SiVa000000]

Installing Responsive Themes Test / Develop
Current Theme : https://custom.simplemachines.org/index.php?theme=2228
Download Theme : https://drive.google.com/file/d/1tTyzPPyzPM0EZnrKi2hSLkfyuNL5e7nb/view?usp=sharing






All views Desktop, Tablet, Mobile

[SiVa000000]

Customise - Header colour


File Name : Themes\Wgame\css\index.css

Code: [Select]

/*==============================
Header Line No 3190 to 3203
==============================*/
.header_a {
  display: block;
  /* position: fixed; */
  background: linear-gradient(90deg, #100161, #500e6a);
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-box-shadow: 0 2px 26px 0 rgba(133,153,171,0.1);
  box-shadow: 0 2px 26px 0 rgba(133,153,171,0.1);
}


Customise - Footer colour


File Name : Themes\Wgame\css\index.css

Code: [Select]

/*==============================
Main Footer Line No 4059 to 4066
==============================*/
.main-footer {
    background: #615dfa;
    color: #1d2333;
    overflow: hidden;
    z-index: 6;
    padding: 18px 0;
    text-align: center;
}

Customise - Scroll to top button colour


File Name : Themes\Wgame\css\index.css

Code: [Select]

/*==============================
Scroller to top Line No 4077 to 4094
==============================*/
.to-top {
    position: fixed;
    bottom: 60px;
    right: 25px;
    width: 40px;
    height: 40px;
    color: #fff;
    background: #615dfa;
    text-align: center;
    line-height: 40px;
    font-size: 17px;
    z-index: 116;
    cursor: pointer;
    display: none;
    border-radius: 3px;
    box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.2);
    -webkit-transform: translate3d(0,0,0);
}

Customise - Logo image placeholder


File Name : Themes\Wgame\css\index.css

Code: [Select]

/*==============================
Logo Image Placeholder Line No 3290 to 3300
==============================*/
.header__logo img {
  display: block;
  height: 70%;
  width: 70%;
}

Open Chrome Inspect

Right-click an item → Inspect
→ Chrome highlights the exact HTML line.

[அனோத்]

Dear Siva Anna,

I’m really excited about this project! Our forum is going to get a
major upgrade with a modern interface and amazing
user-friendly features—I can already see that in your updates.

A big salute to you for putting in the effort to make
this much-needed migration happen.
So glad to have you back with a bang, and congratulations,

Anna

[MaiVizhi]

Wow awsome work 👏👏👏👏
Really excited to see the Amazing out put🥰🥰🥰