Last time we successfully imported the third party menu. Beautiful though it is, it has many functions. However, various problems inevitably arise:

For example, it covered up the contents of our previous home page so that we couldn’t see them. Generally speaking, there are many solutions to this problem, but they all need to be solved by ourselves. The original author may not have provided a built-in solution.

Menu. HTML, we add a few line breaks to make the contents of home appear:

Refresh the page to see the effect:

You can see it comes out

Then I felt that the main content was too far to the left, so I decided to add an outer right distance to the left menu, which is equivalent to stretching all the page content to the right:

Margin – right: 20 px.

But the question is, where do I write it?

Let’s right click on the page and open Check.

Notice where the arrow is, I’ve got this left menu, which is the nav TAB, and all of its styles are displayed on the right, so let’s manually add it on the right:

After testing, adding this to the.cd-side-nav property successfully pushed the content of the page by a certain distance, so where is this style? We need to actually find the file to add in the project, the effect of the modification in the browser is just a preview

Mouse right here will tell you the answer ~

Then follow the prompts to find the file:

As expected, it is the same as the page debugging, so we manually add:

Then refresh the page to see the effect:

This effect can now be permanently implemented. In fact, we can modify the style of the third party through this method, modify the browser to see the effect, and then quickly locate to the original JS/CSS file for permanent modification.

Then we’ll go back and look at the menu and give it a makeover.

The first is the LOGO in the upper left corner. Platforms usually have their own logos. A good design will enhance the user’s impression, if not, you use your own product company LOGO

Here I randomly found a picture as the LOGO:

But it turns out that the original. SVG format is used.

If I want to replace a new image, I’d better make it in this format as well. So what is SVG?

Looks like a high-fidelity vector drawing.

We have several routes here:

  1. Force a normal JPG, JPEG, PNG image, and then manually size it in HTML, etc.

  2. Go to Baidu to search for an SVG online conversion site to convert images to SVG.

  3. Go to Baidu to download a SVG image resources, beautiful.

  4. Replace the logo with text, etc.

Here I simply do not want this logo, replaced by copywriting, simple and efficient, you can optimize the change, my tutorial is just a train of thought, not to say that it must be exactly the same as me.

Effect:

Then there’s the top search menu, which we’ll keep for now.

The button on the right, we delete one, we leave one, and we leave that avatar as well.

Change it to the following:

The Home button returns directly to the Home page

{{user.username}} is the name of the current user. The front is the space used for the station, so as not to cause visual errors when the variable behind is empty.

Yourself takes users to their personal Settings page.

Logout is the exit function, which we will implement later.

Now go back to our views.py and pass the front-end the total number of currently logged users so that we can use user.xxxx as we please later

The effect is as follows:

Well, that’s all for today.

Take notes and we will continue to optimize the home page in the next class.

This article uses the article synchronization assistant to synchronize