I was hoping to change the icons and text being used in the navigation bar in apache airflow. When I do inspect element, I get that pin_100.png is being used. I was hoping to change this to a custom image and title. Where do I edit files for this? I am guessing this has something to do with flask views (?) but I'm not certain.
I see from here that the flask template base view should be modified (?). I still can't figure out how.
I would like to change the "Airflow" text, and the icon, to my custom text and icon.
EDIT: For more clarity, I just found this. This is what I want to modify
<img style="float: left; width:35px; margin-top: -7px;"
src="{{ url_for("static", filename="pin_100.png") }}"
title="{{ current_user.username }}">
<span>
Airflow
</span>
I want to change the filename and Airflow
It resides in https://github.com/apache/airflow/blob/master/airflow/www/templates/appbuilder/navbar.html
Related
I was trying to automate a WordPress post content creation using Selenium Webdriver (Python). Unfortunately, I can not upload files in the post content. I have searched for the solution but most of them used send_keys which is not applicable for WP insert media (see image below). In the insert media, there are two options:
Select files
Drag files
I need a solution which will work for cross-platform (Windows, Linux etc).
I guess there might be a way using some jQuery, JS or something else. I am not very familiar with JS so I did not understand the solutions with JS.
P.S. I am working in Python, so a Python code will be helpful.
Here is the source for the media insert frame in case you need them:
<div class="media-frame-content">
<div class="uploader-inline">
<div class="uploader-inline-content no-upload-message">
<div class="upload-ui">
<h2 class="upload-instructions drop-instructions">Drop files anywhere to upload</h2>
<p class="upload-instructions drop-instructions">or</p>
Select Files
</div>
<div class="upload-inline-status">
<div class="media-uploader-status" style="display: none;">
<h2>Uploading</h2>
<button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text">Dismiss Errors</span>
</button>
<div class="media-progress-bar">
<div></div>
</div>
<div class="upload-details">
<span class="upload-count">
<span class="upload-index"></span> / <span class="upload-total"></span>
</span>
<span class="upload-detail-separator">–</span>
<span class="upload-filename"></span>
</div>
<div class="upload-errors"></div>
</div>
</div>
<div class="post-upload-ui">
<p class="max-upload-size">Maximum upload file size: 32 MB.</p>
</div>
</div>
</div>
</div>
Finally, I've got a solution for WP add media file upload.
Actually, I have found that when the file selection window opens upon clicking the select files button, it generates a dynamic input field. Dynamic means, the ID for the input field is unique each time. Fortunately, the first part of the input field's ID remains same. For example, the ID is like html5_1bc7564i41pq5f7m1voce561a0e5. See the HTML below:
<input id="html5_1bc7564i41pq5f7m1voce561a0e5" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="" type="file"/>
So, what I did is, create an XPATH using the first part of the ID (html5_) and simply used send_keys and it worked perfectly. My XPATH is like:
input_file = "//input[starts-with(#id,'html5_')]"
The selenium code is:
driver.find_element_by_xpath(input_file).send_keys(file_path)
Here, file_path is the location of the file which I need to upload.
I missed the input field at the first place because it was not visible and did not realize that it is associated with the file upload. So I record the file upload steps with selenium IDE and found the dynamic input ID.
Thanks everyone, for all the suggestions and guidance.
drag and drop is possible:
Python Selenium WebDriver drag-and-drop
you can try move mouse and click "manually":
http://selenium-python.readthedocs.io/api.html#selenium.webdriver.common.action_chains.ActionChains.move_to_element
Here is the solution for you using AutoIT.
WordPress provides a select button to Upload New Media. So let us take help of that functionality.
On clicking "Select Files", File Upload dialog box would open up.
Pass the properties of File Upload dialog box to AutoIT exe.
AutoIT will fill up the filepath area with the selected file.
Now let the WebDriver click on the "Upload" button.
Let me know if this answers your query.
Hi I'm new to using Wagtail and I'm working on a client website. What I aim to do is to dynamically link my wagtail pages to our sidebar, which is currently in our base.html in the main app folder's templates directory, the one with settings.py.
I was wondering if there's a way to render a call to action for the base.html here. Or if I should make a separate app instead and create a base.html there, which extends to all the other templates I'll use for the rest of the website.
Thank you!
edit:
Above is the current home page I'm working with. The sidebar right now is just hard-coded since I haven't worked on that, and I want to know what the rest of the page looks like while I work on the main content.
the sidebar above is coded as so:
<!-- in biodept/templates/base.html -->
{% wagtailuserbar %}
<div class="container main-container">
<div class="row">
<!-- Nav bar not mobile -->
<nav class="nav" id="nav-1">
<a class="nav-link nav-desktop-link nav-desktop-link-active" href="#">HOME</a>
<a class="nav-link nav-desktop-link" href="#">BIOMEDICINE</a>
<a class="nav-link nav-desktop-link" href="#">ECOLOGY & SYSTEMATICS</a>
<a class="nav-link nav-desktop-link" href="#">MOLECULAR BIO & BIOTECH</a>
<a class="nav-link nav-desktop-link" href="#">PROJECTS</a>
<button class="dropdown-btn nav-link nav-desktop-link">PROGRAMS<ion-icon style="float: right; padding-top: 0.25vw;" name="caret-down-outline"></ion-icon></button>
<div id="btn-t" class="dropdown-container">
<a class="nav-link dropdown-nav-desktop-link" href="#">UNDERGRADUATE</a>
<a class="nav-link dropdown-nav-desktop-link" href="#">GRADUATE</a>
</div>
<a class="nav-link nav-desktop-link" href="faculty.html">FACULTY PAGES</a>
<a class="nav-link nav-desktop-link" href="#">BIODIVERSITY LABORATORY</a>
</nav>
{% block content %}{% endblock %}
</div>
</div>
Again the base.html is in the same directory as where the settings.py is. BioDept is the project's name.
Note: Based on the updated question, it looks like this is unrelated to StreamField but it is a question about how to implement a menu based on the Wagtail page structure.
Wagtail does not come with a built in way to render menus, this is because it is going to be something specific to every Wagtail site and any generic solution will likely only cover a small set of cases. However, when getting started this can be a bit confusing.
Wagtail, does come with a way to indicate that a page should be shown in menus though, this is part of every Page model.
You can see this in the model's reference here
https://docs.wagtail.io/en/latest/reference/pages/model_reference.html#wagtail.core.models.Page.show_in_menus
User's can edit this value on the 'promote' tab, plus the docs above let you define what the default value should be (however, existing pages will need to be updated another way).
Implementing a Menu
Here are three ways to implement a menu and use this as a template tag or template include in your project.
View the Bakerydemo code
The bakerydemo is a nice basic reference for a Wagtail implementation, this may not explain why but might be enough for you to get started.
template tag definition - https://github.com/wagtail/bakerydemo/blob/master/bakerydemo/base/templatetags/navigation_tags.py
header include template - https://github.com/wagtail/bakerydemo/blob/master/bakerydemo/templates/includes/header.html
base.html (layout) template - https://github.com/wagtail/bakerydemo/blob/master/bakerydemo/templates/base.html
Follow a tutorial
Googling 'Wagtail navigation' or 'Wagtail menus' can help, but this link below appears to be up to date and walks you through really nicely on how to build a basic Wagtail menu and then enhance it to using an extension (added below)
https://www.accordbox.com/blog/wagtail-tutorial-12-how-create-and-manage-menus-wagtail-application/
Install an extension package
This package appears to give a robust solution, but avoid using it if you can get what you need without adding another dependency (my opinion)
https://wagtailmenus.readthedocs.io/en/stable/overview.html
I have flask application via python. In my page, there is three images but flask only shows one of them.
I could not figure out where is the problem.
Here is my code.
HTML
<div class="col-xs-4">
<img style="width:40%;padding:5px" src="static/tomato.png"/>
<br>
<button class="btn btn-warning"><a style="color:white;" href="http://127.0.0.1:5000/detect">Tomato Analysis</a></button>
</div>
<div class="col-xs-4">
<img style="width:40%;padding:5px" src="static/grapes.png"/>
<br>
<button class="btn btn-warning"><a style="color:white;" href="http://127.0.0.1:5000/detect">Grape Analysis</a></button>
</div>
PYTHON
#app.route("/main")
def index():
return render_template('gui2.html')
It shows tomato.png but it did not sohws the grapes.png, what is the problem of it and how can I solve it.
Also I am using electron.js. After running python script, I am running nmp start.
The error is output is:
GET /%7B%7B%20url_for('static',%20filename%20=%20'image/corn2.png')%20%7D%7D HTTP/1.1" 404 -
Any help is appreciated...
Thanks
You can change the route main to mainPage. Try below code
#app.route("/mainPage")
def index():
return render_template('gui2.html')
The error message 404 clear tells that the resource you are looking for was not found in the given location. Make sure that the file exists on the path you give. Simply, as tomato.png file is displayed correctly, just make sure that other files are also in the same location as tomato.png
Try opening in Incognito or private browser.
I'm working at my first project in Django and learning it by the way. Currently I'm stuck at the part of the project where I have to show additional data if checkbox is selected as true.
Long story short, there have to be checkbox at my page which name is "Cars", if user check the checkbox as True, select list of models of cars should be displayed immediately, below this checkbox, without affecting other input sources on current page.
Is there easy way how to accomplis this? Thanks for help.
/edit
HTML code
<p class="dhcp"> DHCP: {{ form.dhcp }} </p>
<p class="collapse1 collapse"> IPv4 adresy: {{form.ipv4_adress }} </p>
<p class="dhcpv6"> DHCPv6: {{ form.dhcpv6 }} </p>
<p class="collapse2 collapse"> IPv6 adresy: {{form.ipv6_adress }} </p>
JS code
$(document).ready(function() {
$(".dhcp").click(function(event) {
$(".collapse1").fadeToggle().delay(100);
});
$(".dhcpv6").click(function(event) {
$(".collapse2").fadeToggle().delay(100);
});
})
It's just part of it, its quite "big" by now and not telling anything because of being generated by django form. Main issue right now is that if I click on same row as is checkbox, it trigger action of displaying data.
take a look at this JS Fiddle . Its a simple JS solution with a fadeToggle for your problem. The Delay of 100 is optional but it makes the hole thing more elegant although this stays in conflict with your "should be displayed immediately" ;)
<input class="collapsed" type="checkbox">Cars
<div class="collapse2 collapse" style="display:none;">
<li>car hello</li>
<li>car lala</li>
<li>car 1</li>
</div>
$(".collapsed").click(function(event){
$(".collapse2").fadeToggle().delay(100);
})
If there are multiple checkboxes like this you maybe would have to use the this keyword in JS.
That should do the Trick if not leave a comment.
I'm extremely inexperienced with html and although I know python, I had never used django before this. I'm trying to set up a simple website where the user can view some code on the left side of the screen and enter some text about it on the right side of the screen. The code can be pretty long sometimes so the webpage scrolls, but I want the textbox to always be present even if you scroll up or down. As my code is now, the textbox is on the right side of the screen, but it always stays at the bottom. Here's a screenshot of what it looks like:
(can't seem to get screenshot to show up in the post, here's the link http://imgur.com/3JfgHH3)
Here's the .html file I'm using in my templates directory in django:
<div style="display: inline-block">
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
<pre>{{ source_code }}<pre>
</div>
<div style ="display: inline-block" >
<form method="post" action="/labeling/{{ document_id }}/send/">
{% csrf_token %}
<input type="text" name="textfield">
<input type="submit" value="Finish" name="finish_btn" />
</form>
</div>
Sorry for my complete lack of html knowledge. How would I fix this either in django or in the html file directly so that the textbox and button move up and down with the scrolling, instead of being permanently attached to the bottom right of the screen? If necessary I can post the django code too, I just wasn't sure if this was possible directly in html.
<div style ="display: inline-block;position: fixed;" >
Implement position: fixed; into your styling of the first div. That should already do the trick. Like #furas said is - when it comes to styling - CSS the language you have to learn.
In the CSS file please add the following Code:
div.[class_name_of_div_element] {
position: fixed;
}