@@ -4,7 +4,7 @@ In this session we will customize minor visual elements of our Invenio
4
4
instance, like the logo of our instance, the colors and fonts, the way search
5
5
results for records are displayed and the display page for every record.
6
6
7
- ### Table of Contents
7
+ ## Table of Contents
8
8
9
9
- [ Step 1: Run the development server] ( #step-1-run-the-development-server )
10
10
- [ Step 2: Change the frontpage titles] ( #step-2-change-the-frontpage-titles )
@@ -62,7 +62,7 @@ editing `my_site/theme/templates/my_site/frontpage.html`:
62
62
63
63
If you now go to < https://localhost:5000/ > you will see the changed titles:
64
64
65
- ![ ] ( ./images/frontpage-title.png )
65
+ ![ Invenio front page ] ( ./images/frontpage-title.png )
66
66
67
67
## Step 3: Change the site logo
68
68
@@ -101,7 +101,7 @@ THEME_FRONTPAGE_TEMPLATE = 'my_site/frontpage.html'
101
101
102
102
If you reload the page you will see the new logo on the top left:
103
103
104
- ![ ] ( ./images/frontpage-logo.png )
104
+ ![ Invenio front page logo ] ( ./images/frontpage-logo.png )
105
105
106
106
## Step 4: Change the theme color
107
107
@@ -134,14 +134,14 @@ webpack` command:
134
134
135
135
If we reload our page now we should see our brand new design:
136
136
137
- ![ ] ( ./images/frontpage-color.png )
137
+ ![ Invenio front page with purple background ] ( ./images/frontpage-color.png )
138
138
139
139
## Step 5: Change how record search results are displayed
140
140
141
141
If you navigate to the search results page (< https://localhost:5000/search > )
142
142
you can see the following:
143
143
144
- ![ ] ( ./images/search-old.png )
144
+ ![ Search page result list ] ( ./images/search-old.png )
145
145
146
146
Let's change the way the title and authors of each result look like. The
147
147
current search UI application is built with AngularJS and its various
@@ -174,14 +174,14 @@ Copied: [my_site_records] '/home/bootcamp/.local/share/virtualenvs/my-site-7Oi5H
174
174
175
175
And now, if we refresh we'll see that our search results display differently:
176
176
177
- ![ ] ( ./images/search-new.png )
177
+ ![ Invenio page result list with strong and emphasis styles ] ( ./images/search-new.png )
178
178
179
179
## Step 6: Change the record page
180
180
181
181
If you actually click on one of the search results you will be redirected to
182
182
the record's page:
183
183
184
- ![ ] ( ./images/record-old.png )
184
+ ![ Record details page ] ( ./images/record-old.png )
185
185
186
186
To change this view we'll have to modify the Jinja template that renders the
187
187
page, ` my_site/records/templates/records/record.html ` . Let's to something
@@ -206,4 +206,4 @@ similar to what we did with the search results:
206
206
207
207
If you refresh the record's page you'll see something like this:
208
208
209
- ![ ] ( ./images/record-new.png )
209
+ ![ Record details page with styles ] ( ./images/record-new.png )
0 commit comments