Differences

This shows you the differences between two versions of the page.

--- uploading_your_logo [2018/05/01 18:13]
brittany [Uploading to Your Website]
+++ uploading_your_logo [2018/05/02 18:07]
brittany
@@ Line 1: / Line 1: @@
+This doc details how to upload your logo to your website from the backend as well as how to crop or resize your image using Pixlr Express.
+=====Using Pixlr Express=====
+Navigate to pixlr.com/express to use this free tool.
+Click **Browse** on the far left. This will open your local drive from which you can select your logo to upload. Click your logo and then click **Open**.
+You should then see your logo uploaded into the Pixlr Express tool as seen below.
+{{::2_1_.png?400|}}
+To change the size of your image, first click the **Adjustment** button on the far left of the bottom toolbar.
+{{::3_-_do.png?400|}}
+This will open a variety of functions you can use to edit your image. You’ll see the **Crop** and **Resize** buttons on the far left of the opened toolbar. You can use these to change the size of your image.
+{{:4_-_do.png?300|}}
+If you’d like to crop out part of your image, scroll past this section and navigate to **Cropping** Your Image.
+=====Resizing your image=====
+To resize your image, go back to "Adjustment".
+{{::3_-_do.png?400|}}
+Click **Resize**.
+This will open a box with dimensions you can edit to fit your Real Geeks site. Please keep your image within the following dimensions for best display on your website:
+Width: 200 x Height: 43
+Or
+Width: 400  x Height: 86
+{{::5_-_do.png?400|}}
+Change the numbers to adjust the size of your logo and click **Apply**.
+Once you click **Apply**, your image will become smaller.
+{{::6_-_do.png?400|}}
+Make sure to click **Save** in the top left-hand corner to save the image and download to your computer.
+{{::7.png?400|}}
+After you click **Save**, type in the name you want for your new file and select Save again.
+{{::8.png?300|}}
+Select where you want to save your new logo on your computer and click **Save**.
+If you want to use this resized logo on your website, scroll past this next section about cropping and go straight to **Uploading** to your website.
+=====Cropping Your Image=====
+To crop your image, go back to **Adjustment** and select **Crop**.
+{{::3_-_do.png?400|}}
+This will open the cropping tool over your image as seen below.
+{{::9.png?400|}}
+Use the cropping tool to crop the parts of the image you want removed. You can see the example below of cropping out the Real Geeks professor.
+{{::10.png?400|}}
+Once you’ve selected the area you want to remove, click the **Apply** button on the bottom toolbar. This will successfully crop your logo.
+After cropping your image, select **Save** in the top left-hand corner to save the image and download to your computer.
+{{::11.png?700|}}
+After you click **Save**, type in the name you want for your new file and select **Save** again.
+{{::12.png?300|}}
+Select where you want to save your new logo on your computer and click **Save**.
+=====Uploading to Your Website=====
+Navigate to the backend of your website to get started. You'll see the site administration backend menu as seen below. Go to the **Content** subsection on this page and click **Footers**.
+{{::13.png?400|}}
+Then click **Default Footer**.
+{{::15.png?200|}}
+To upload your image, first place your cursor in the text box where you want your logo to be.
+Next, upload your image. To upload your image, click the small box with the mountain and the sun in your text box toolbar.
+{{::16.png?400|}}
+Once the new box opens, click the blue box with the folder and magnifying glass.
+{{::17.png?400|}}
+In the new box that opens, click the green Upload button at the top right-hand corner.
+{{::18.png?400|}}
+Click the blue **Select Files** button in the center.
+{{::19.png?400|}}
+Navigate to your logo saved on your computer. Click the image you want to upload and then click **OK**.
+Your logo should now appear in your list of images.
+{{::20.png?400|}}
+To upload your image into the footer, click the green **Insert** button to the right of your logo.
+{{::21.png?400|}}
+Click the blue **Ok** button.
+{{::22.png?400|}}
+Your image will now appear in the footer where you placed your cursor.
+{{::23.png?400|}}
+You can also adjust the size of your logo using the white boxes around your logo.
+{{::24.png?400|}}
+An example of a resized logo below.
+{{::25.png?400|}}
+When you’re finished resizing or moving your logo, click the blue **Save** button at the bottom right-hand corner.
+{{::26.png?400|}}
+Congratulations! You’ve successfully edited and uploaded your logo to your website.

Real Geeks Docs

User Tools

Site Tools

Differences

Page Tools