[Release]vRP ePhone (Replace the design of the menu)

THIS IS A VERY SIMPLE ADD-ON TO YOUR DUNKO’S PACK MENU (DEFAULT K MENU)
This script will change the default menu to a Phone designed menu. Some backgrounds will be showed here:

Installation guide:
1. Extract the current vrp folder into your old one (this will not edit any of your other CFG’s, it will only replace the vrp/GUI/design.css)
2. Restart your server.

Extra:
If you want to change the ePhone background go to: vrp/GUI/design.css and change the image url at row 32 to your new image.
I’ve made a few backgrounds for you to use at: http://P4NDAzz.org/ePhone/

Image in-game:


(I’ve translated my vRP language into Swedish, it will be your own language in vrp/cfg/lang/country.lua)

Steam: http://steamcommunity.com/id/PhilipTheBoss321/

Have a great day! <3

ePhone.rar (1.9 KB)

7 Likes

Will try to test and check it out :slight_smile:

1 Like

Moved to #development:releases next time please post in the right category.

3 Likes

Damn this is amazing you should release more

1 Like

Can you please post a screenshot of it in-game?

1 Like

I’ve translated my phone into Swedish but the phone will be your own language in vrp/cfg/lang/country.lua

This is how it looks for me (using background #1)

At resolutions below 1900 the menu gets cut off, where can I solve this?

1 Like

Hello, go to:
vrp/GUI/design.css

You’ll be able to remodify the phone’s position from row 28 -> 49

jävligt snyggt. :envelope_with_arrow:

1 Like

Sadly it doesnt seem to be responsive :frowning: to all resoultions I have a friend who runs on 1280x720 and it doesnt show proper for him if you could make this responsive it would be perfect but sadly only perfect for 1920x1080

1 Like

I’ll work more on this design.css, I’m using 1920x1080 and therefore this is working great with my resolution. Will make it work for all resolutions in a near future.

1 Like

Can’t wait, Looking forward to using this sadly, I have to remove it as there is not a 100% certain that everyone can use 1920x1080

how do i change the image?

Replace your design.css with:

/* EDITED BY .P4NDAzz */
/* YOU HAVE PERMISSION TO EDIT THIS FILE */

*{
  margin: 0;
  padding: 0;
}

/* make body full page */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

@font-face {
  font-family: 'Pricedown';
  src: url(fonts/Pdown.woff);
}

.console{
  background-color: white;
  color: red;
  font-weight: bold;
}

/* menu */

.menu{
	/* Edit the following image to your correct image or use mine that is located at: http://P4NDAzz.org/ePhone (THIS IS THE PHONE BACKGROUND)*/
	background-image: url('https://forum.cfx.re/uploads/default/optimized/3X/e/4/e49835b4e6d51f65d823c5092f5ff1fcb8f320a8_1_281x500.jpg');
	/* --------------------------------------------------------------------------------------------------------- */
	
	background-size: cover;	
    display: inline-block;
    background-color: #1F2023;
    border-radius: 30px 30px 0 0;
    height: 440px;
    padding: 40px 15px 0 15px;
    width: 290px;
    border-top: 1px solid #65686E;
    border-right: 1px solid #65686E; 
	margin-left: -75px;
	margin: 25px; 
	align-content:center;
	position: fixed;
	top: 50%;
	left: 85%;
	bottom:0px;
	margin-top: 523px;
	margin-left: -100px; 
	text-align: center;
	cursor: pointer;
	cursor: text;	
}

.menu_description{
  position: static;
  float: left;
  border-radius: 0px 0px 25px 0px;
  font-weight: bold;
  padding: 9px;
  font-size: 1.2em;
  max-width: 500px;
  text-transform: uppercase;
  text-align: left;
  font-size: 12px;
  border: 7px solid black;
  color: cyan;
  box-shadow: inset 1px 1px 18px 1px #000000;
  background-color: #3A3A3A;
  text-shadow: 1px 1px 4px #3A3A3A;
  font-family: 'Roboto', sans-serif;
}

.menu h1{
 display:none;
 font-size: 0px;
}

.choices{
  overflow-y: scroll;
  overflow-x: hidden;
}

.choices::-webkit-scrollbar{ 
  display: none; 
}

.choices div{
  padding: 10px 24px;
  margin: 10px auto;
  text-transform: uppercase;
  font-size: 12px;
  border: 1px solid cyan;
  color: cyan;  
  text-shadow: 1px 1px 4px #3A3A3A;
  background-color: #3A3A3A;
  border-radius: 25px;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  
}

.choices .selected{
  background-color: cyan;
  color: #3A3A3A;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #3A3A3A;
  border-radius: 10px;
  text-shadow: 1px 1px 4px #00FFFF; 
  box-shadow: inset 1px 1px 18px 1px #000000;
}

/* progress bar */
.progressbar{
  position: absolute;
}

.progressbar .inner{
}

.progressbar .label{
  position: absolute;
  color: white;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px black;
}

/* wprompt */
.wprompt{
  background-color: #3A3A3A;
  border: 1px solid cyan;
  font-family: 'Roboto', sans-serif;
  box-shadow: 1px 1px 18px 1px #000000;
  color: cyan;  
  width: 300px;
  height: 200px;
  border-radius: 0px 25px 25px 0px;
  display: flex;
  padding: 5px;
  flex-direction: column;
  cursor: pointer;
}

.wprompt h1{
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
}

.wprompt textarea{
  outline: none !important;
  background-color: rgba(58,58,58,0.75);
  border: 1px solid rgba(0,255,255,0.30);
  box-shadow: inset 1px 1px 18px 1px #000000;
  border-radius: 0px 25px 25px 0px;
  flex: 1;
  color: cyan;
  width: 100%;
  padding: 12px;
  resize: none;
  box-sizing: border-box;
}

.wprompt textarea:focus{
  outline: none !important;
}

.wprompt .help{
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  padding: 3px;
  text-transform: uppercase;
}

/* request manager */
.request_manager{
  position: absolute;
  bottom: -1px;
  right: 25px;
  text-align: right;
}

.request_manager div{
  margin-bottom: 0px;
}

.request_manager div > span{
  background-color: #3A3A3A;
  border: 1px solid cyan;
  font-family: 'Roboto', sans-serif;
  box-shadow: inset 1px 1px 18px 1px #000000;
  border-radius: 5px 5px 0px 0px;
  font-size: 25px;
  color: white;
  margin-bottom: -1px;
  font-weight: bold;
  padding: 5px;
  text-align: right;
}

.request_manager .yes{
  font-family: 'Roboto', sans-serif;
  padding-left: 15px;
  color: rgb(0,255,0);
  font-size: 1em;
  text-transform: uppercase;
}

.request_manager .no{
  font-family: 'Roboto', sans-serif;
  color: rgb(255,0,0);
  font-size: 1em;
  text-transform: uppercase;
}

/* announce */

.announce{
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 780px;
  height: 130px;
  padding: 10px;
  margin-left: -400px;
  font-weight: bold;
  font-size: 1.1em;
  text-shadow: 2px 2px black;
  color: white;
  display: none;
  opacity: 0.90;
}

This will give you the following background: https://forum.cfx.re/uploads/default/optimized/3X/e/4/e49835b4e6d51f65d823c5092f5ff1fcb8f320a8_1_281x500.jpg

Hi, P4NDA_gamingV2.
Can you send a link to the normal vRP phone “design.css”??
Your script seems to have bugged on the server I tried it on.
Heres a picture.

-Bettemus

Here’s the default GUI that is currently being used as default by dRP:

Thx alot P4anda_GamingV2.

Now i have another question I need a script that does so a little popup.
The popup have to say for example: Seatbelt turned on, Paycheck inbound XX$ etc. etc.

You could use:

Will u upd phone for new vrp design.css?

https://forum.cfx.re/uploads/default/original/3X/4/b/4b95721f733fde09b544a996abcf2e7ae0731d77.jpg . Can someone get the real link for that picture?