mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Fixed marketplace-customisation broken image links
This commit is contained in:
Anamaria Loznianu
parent
ea169752dc
commit
e47e83617d
@ -28,25 +28,25 @@ It’s now time to open up your favorite code editor and start getting stuck int
|
|||||||
|
|
||||||
Let’s start by searching and replacing “Ocean Marketplace”. In VS Code there is a magnifying glass symbol in the left-hand panel (arrow 1 in the image below) that will open up the interface for searching and replacing text. Type “Ocean Marketplace” into the first textbox, and the name of your marketplace into the second textbox (arrow 2). To make things simple, there is a button to the right of the second textbox (arrow 3) that will replace all instances at once. You can take a moment to review all the text you’re changing if you wish, and then click this button.
|
Let’s start by searching and replacing “Ocean Marketplace”. In VS Code there is a magnifying glass symbol in the left-hand panel (arrow 1 in the image below) that will open up the interface for searching and replacing text. Type “Ocean Marketplace” into the first textbox, and the name of your marketplace into the second textbox (arrow 2). To make things simple, there is a button to the right of the second textbox (arrow 3) that will replace all instances at once. You can take a moment to review all the text you’re changing if you wish, and then click this button.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Next up, we need to repeat the process but this time we’ll be searching and replacing “Ocean Market”. As you can see in the screenshot below, we have called our fork “Crypto Photos Market”.
|
Next up, we need to repeat the process but this time we’ll be searching and replacing “Ocean Market”. As you can see in the screenshot below, we have called our fork “Crypto Photos Market”.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Now let’s change the tagline of your site. Open up the folder called “content” and then open the file called “site.json”.
|
Now let’s change the tagline of your site. Open up the folder called “content” and then open the file called “site.json”.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
On line 3 in this file you can enter the tagline that you want for your marketplace.
|
On line 3 in this file you can enter the tagline that you want for your marketplace.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Change the Logo
|
## Change the Logo
|
||||||
|
|
||||||
@ -60,7 +60,7 @@ Delete the “logo.svg” file from that folder and paste your own logo in the s
|
|||||||
|
|
||||||
At this point, it’s a good idea to check how things are looking. First check that you have saved all of your changes, then cancel the build that’s running in your terminal (Ctrl + C OR Cmnd + C) and start it again `npm start`. Once the build has finished, navigate to http://localhost:8000/ and see how things look.
|
At this point, it’s a good idea to check how things are looking. First check that you have saved all of your changes, then cancel the build that’s running in your terminal (Ctrl + C OR Cmnd + C) and start it again `npm start`. Once the build has finished, navigate to http://localhost:8000/ and see how things look.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Awesome! Our logo is looking great!
|
Awesome! Our logo is looking great!
|
||||||
|
|
||||||
@ -78,18 +78,18 @@ src/components/App/index.module.css
|
|||||||
|
|
||||||
You’ll notice in the screenshot above that we are setting our “wave” background on line 3. Here, you’ll want to use your own background color or image. For this example, we’ll use an SVG background from [here](https://www.svgbackgrounds.com/). First, we save the new background image into the src/images/ folder (same folder as the logo), then we change the CSS to the file location of the new background (see line 3 in the image below).
|
You’ll notice in the screenshot above that we are setting our “wave” background on line 3. Here, you’ll want to use your own background color or image. For this example, we’ll use an SVG background from [here](https://www.svgbackgrounds.com/). First, we save the new background image into the src/images/ folder (same folder as the logo), then we change the CSS to the file location of the new background (see line 3 in the image below).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
If we save this file and view the site at this point, we get a white section at the top (see image below). And you’ll also notice that the background doesn’t fill all the way down to the bottom of the screen.
|
If we save this file and view the site at this point, we get a white section at the top (see image below). And you’ll also notice that the background doesn’t fill all the way down to the bottom of the screen.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
To fix this, we need to change the starting position of the background image and change it from no-repeat to repeat. We can do this on line 3.
|
To fix this, we need to change the starting position of the background image and change it from no-repeat to repeat. We can do this on line 3.
|
||||||
|
|
||||||
When we view our marketplace, we can see that the new background starts at the top and fills the whole page. Perfect!
|
When we view our marketplace, we can see that the new background starts at the top and fills the whole page. Perfect!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Brand Colors
|
## Brand Colors
|
||||||
|
|
||||||
@ -97,7 +97,7 @@ Next up, let’s change the background colors to match your individual style. Op
|
|||||||
|
|
||||||
You can change these colors as much as you wish until you’re happy with how everything looks. Each time you save your changes, the site will immediately update so you can see how things look. You can see the styles chosen for this example in the image below.
|
You can change these colors as much as you wish until you’re happy with how everything looks. Each time you save your changes, the site will immediately update so you can see how things look. You can see the styles chosen for this example in the image below.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Change Fonts
|
## Change Fonts
|
||||||
|
|
||||||
@ -111,41 +111,41 @@ If you are importing fonts, such as from Google fonts, you need to make sure tha
|
|||||||
|
|
||||||
As with the color changes, it’s a good idea to save the file with each change and check if the site is looking the way that you expected it to. You can see our eclectic choices below.
|
As with the color changes, it’s a good idea to save the file with each change and check if the site is looking the way that you expected it to. You can see our eclectic choices below.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Customize the Publish Form
|
## Customize the Publish Form
|
||||||
|
|
||||||
Let’s head to the publish page to see what it looks like with our new styling - so far, so good. But there is one major issue, the publish form is still telling people to publish datasets. On our new marketplace, we want people to publish and sell their photos, so we’re going to have to make some changes here.
|
Let’s head to the publish page to see what it looks like with our new styling - so far, so good. But there is one major issue, the publish form is still telling people to publish datasets. On our new marketplace, we want people to publish and sell their photos, so we’re going to have to make some changes here.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Open up the index.json file from content/publish/index.json - here we change the text to explain that this form is for publishing photos.
|
Open up the index.json file from content/publish/index.json - here we change the text to explain that this form is for publishing photos.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Additionally, the asset type current says dataset, and we need to change this so that it says photo. The simplest way to do this is to change the title of the asset type without changing anything else. Ocean can handle selling any digital asset that can be accessed via a URL, so no further changes are needed to accommodate selling photos.
|
Additionally, the asset type current says dataset, and we need to change this so that it says photo. The simplest way to do this is to change the title of the asset type without changing anything else. Ocean can handle selling any digital asset that can be accessed via a URL, so no further changes are needed to accommodate selling photos.
|
||||||
|
|
||||||
Open up src/components/Publish/Metadata/index.tsx and change line 28 so that it says ‘Photo’
|
Open up src/components/Publish/Metadata/index.tsx and change line 28 so that it says ‘Photo’
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Great, now our publish page explains that users should be publishing photos and photo is provided as an asset type option. We’ll also leave algorithm as an option in case some data scientists want to do some analysis or image transformation on the photos.
|
Great, now our publish page explains that users should be publishing photos and photo is provided as an asset type option. We’ll also leave algorithm as an option in case some data scientists want to do some analysis or image transformation on the photos.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
There is one more thing that is fun to change before we move away from the publish form. You’ll notice that Ocean Market V4 now has a cool SVG generation feature that creates the images for the Data NFT. It creates a series of pink waves. Let’s change this so that it uses our brand colors in the waves!
|
There is one more thing that is fun to change before we move away from the publish form. You’ll notice that Ocean Market V4 now has a cool SVG generation feature that creates the images for the Data NFT. It creates a series of pink waves. Let’s change this so that it uses our brand colors in the waves!
|
||||||
|
|
||||||
Open up /src/@utils/SvgWaves.ts and have a look at lines 27 to 30 where the colors are specified. Currently, the pink color is the one used in the svg generator. You can replace this with your own brand color:
|
Open up /src/@utils/SvgWaves.ts and have a look at lines 27 to 30 where the colors are specified. Currently, the pink color is the one used in the svg generator. You can replace this with your own brand color:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
If you’re interested in doing some further customization, take a look at lines 53 to 64. You can change these properties to alter how the image looks. Feel free to play around with it. We’ve increased the number of layers from 4 to 5.
|
If you’re interested in doing some further customization, take a look at lines 53 to 64. You can change these properties to alter how the image looks. Feel free to play around with it. We’ve increased the number of layers from 4 to 5.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
And now your customized publish page is ready for your customers:
|
And now your customized publish page is ready for your customers:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Change the Fee Address
|
## Change the Fee Address
|
||||||
|
|
||||||
@ -153,7 +153,7 @@ At this point, we have made a lot of changes and hopefully you’re happy with t
|
|||||||
|
|
||||||
When someone sets the pricing for their photos in your marketplace, they are informed that a commission will be sent to the owner of the marketplace. You see that at the moment this fee is set to zero, so you’ll want to increase that. And in order to receive the fees you’ll you need to set the address that you want to recieve these fees in.
|
When someone sets the pricing for their photos in your marketplace, they are informed that a commission will be sent to the owner of the marketplace. You see that at the moment this fee is set to zero, so you’ll want to increase that. And in order to receive the fees you’ll you need to set the address that you want to recieve these fees in.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
This important step is the last thing that we will change in this guide. To set the marketplace fees and address, you’ll need to save them as environmental variables. Create a new file called .env in the root of your repository.
|
This important step is the last thing that we will change in this guide. To set the marketplace fees and address, you’ll need to save them as environmental variables. Create a new file called .env in the root of your repository.
|
||||||
|
|
||||||
@ -175,8 +175,8 @@ Go to [Fees page](https://docs.oceanprotocol.com/concepts/fees/) to know more de
|
|||||||
|
|
||||||
It is important that the file is saved in the right place at the root of your repository, your file structure should look the same as below.
|
It is important that the file is saved in the right place at the root of your repository, your file structure should look the same as below.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Now that’s it; you now have a fully functioning photo marketplace that operates over the blockchain. Everytime someone uses it, you will receive revenue.
|
Now that’s it; you now have a fully functioning photo marketplace that operates over the blockchain. Everytime someone uses it, you will receive revenue.
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -9,7 +9,7 @@ To publish on the Ocean Marketplace, publishers must first host their assets. It
|
|||||||
|
|
||||||
On Ocean Marketplace, a publisher must provide the asset information during the publish step in the field shown in the below image. The information is a `link` for a classic URL, a `transaction ID` for a file stored on Arweave or a `CID` for an IPFS file.
|
On Ocean Marketplace, a publisher must provide the asset information during the publish step in the field shown in the below image. The information is a `link` for a classic URL, a `transaction ID` for a file stored on Arweave or a `CID` for an IPFS file.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Publishers can choose any hosting service of their choice. The below section explains how to use commonly used hosting services with Ocean Marketplace.
|
Publishers can choose any hosting service of their choice. The below section explains how to use commonly used hosting services with Ocean Marketplace.
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user