HTML/CSS/Python/Django/Other Discussion

This is where you can discuss anything to do with layouts and graphics, including requests.
Post Reply
User avatar

Topic author
James
Posts: 1858
Joined: 27 Nov 2018, 08:53

HTML/CSS/Python/Django/Other Discussion

Post by James » 25 Apr 2020, 22:32

Hello all!

So if you guys don't know I am incredibly nerdy (comes with the territory of being an Electrical Engineering student) and someone asked me to make a topic about some of the stuff I have been doing.

Basically, I just re-created one of Baze's layouts in HTML/CSS. I also have a Django site I am running on PythonAnywhere where I use a simple form to input data and then it will essentially put all that data into the HTML/CSS layout. I then added a save image button so you can just input all your stuff into the form, click the save image button, and BAM you have a saved image of your layout ready to post.

No more editing through lines of HTML and avoid tags. No more editing in Photoshop. The only downside on my end is that it takes awhile to make a template and get it working. So right now I only have one for games.

However, if you want to do HTML/CSS and just continue to edit that within the code to make it work be my guest.

The next couple of posts will be some explanation of the Baze layout.
User avatar

Topic author
James
Posts: 1858
Joined: 27 Nov 2018, 08:53

HTML/CSS/Python/Django/Other Discussion

Post by James » 25 Apr 2020, 22:38

So for this layout (includes the save button with your HTML) all you need are the three files posted in links below.

https://pastebin.com/A0hAeGw5 (HTML File)

https://pastebin.com/SN4H933d (CSS File)

https://pastebin.com/Apc8h9ei (Canvas2Image JS file)

If you put all of the files in the same folder then you only need 2 other files an image and a banner. They are named "cardBanner.png" and "image2.png" in the HTML right now but that can be changed later. If you have your banner (900px wide) and you add it in there as "cardBanner.png" and you put your game pic as "image2.png" in that folder, then you can open up "index.html" in your favorite browser (usually if you double click this works) and it should show what I did, with whatever pictures you chose. If you click the "save image" button down at the bottom it saves the layout as a .png that you can then upload and post to the site.

Really the CSS can be fixed for the moment unless you know what you are doing and want to change it. The Canvas2Image.js is a file I needed to have locally but it was a library I used, I didn't write any of that.

So really the only thing to edit is the HTML. I'll go into that in the next post.
User avatar

Topic author
James
Posts: 1858
Joined: 27 Nov 2018, 08:53

HTML/CSS/Python/Django/Other Discussion

Post by James » 25 Apr 2020, 22:48

As you scroll through the HTML this is really the only place you need to change stuff for your layout.

You can ignore everything in the <head> tag, it is the location of the CSS and some Javascript files, plus the font that is being used.

Code: Select all

<div class="screenshot">
<img class="banner" src="cardBanner.png">
This is the beginning of the contents of the body tag. The div class "screenshot" is a division (think of them like containers in this context) that includes everything. When we use Javascript to take a screenshot we are grabbing this element and everything it contains for the image. That was stuff like the "Save Image" button is not included in the image.


Code: Select all

<section class="container">
This is the next big thing. This is another container. Inside this container we put two more containers, one for the left side of the layout and one for the right side of the layout. The only thing this does is just hold two other divisions.


Code: Select all

<div class="one">
        <h1>Cardinals Defeat Dodgers on Jackie Robinson Day</h1>
        <img class="story_image" src="image2.png">
        <p class="pictureCaption">Harrison Bader hits the go ahead home run in the top of the 9th inning.</p>
        <p class="story">After facing a series of defeats by the Los Angeles Dodgers the St. Louis Cardinals finally
            decided that they can take on the NL West leaders.
        <br><br>Since the beginning of the season it's been clear that the team's offense will win them games. Matt
        Ryan didn't miss a beat despite playing his first game without starting wide receiver Calvin Ridley,
        accounting for 3 touchdowns (2 passing, 1 rushing). Brian Hill took credit for Atlanta's other score with a
        goal line touchdown. He finished with more carries than backup running back Ito Smith for the first time.
        <br><br>And in the midst of surrendering XXX total yards to the Titans, the Falcons managed to allow only
        12 points to be scored. The secondary was relentlessly torched by former AFC offensive player of the week
        Adam Humphries, who will likely finish the week leading the league in receiving yards after racking up
        176 today.
        <br><br>Atlanta forced Titans quarterback Marcus Mariota into 2 turnovers, both interceptions. Isaiah
        Oliver snagged a pick in the endzone to put a halt to any scoring chance the Titans may have had in the
        4th quarter, and Desmond Trufant sealed the game with less than a minute remaining.
        <br><br>The Falcons face their third straight AFC South team next week when they travel to Houston to face
        the Texans.</p>
 </div>
This is the left side of the layout. The items within the <h1> is the headline. Change it to whatever you want. The next tag is the image. The only thing you need to change if you want is the src="image2.png". Place your image in the same folder as everything else and then change "image2.png" to whatever your image name is (include the quotations). The CSS has this setup to automatically size it correctly.
The next line is the caption for the picture. Then finally after that you have the <p> tag for the story. Import to know is that if you plan on adding a new paragraph use two <br> tags like shown here. It helps with the spacing.


Code: Select all

<div class="two">
        <p class="gameInfo">April 15th, 2020<br>Dodger Stadium<br>Los Angeles, CA</p>
        <div class="funBorder"></div>
        <table class="boxScore">
            <tr class="header"><td class="boxTeam">Team</td><td class="final">R</td><td class="otherBoxScore">H</td>
                <td class="otherBoxScore">E</td>
            </tr>
            <tr class="away">
                <td class="boxTeam">Cardinals</td><td class="finalScore">4</td><td class="otherBoxScore">5</td>
                <td class="otherBoxScore">0</td>
            </tr>
            <tr class="home">
                <td class="boxTeam">Dodgers</td><td class="finalScore">3</td><td class="otherBoxScore">7</td>
                <td class="otherBoxScore">1</td>
            </tr>
        </table>
        <div class="scoringSummary">
            <p class="scoringHeader">INNING 1</p>
            <p class="scoringEvent">[STL] Goldschmidt hits a 2 RBI home run<br>
                [LAD] C. Seager hits a RBI double</p>
            <p class="scoringHeader">INNING 8</p>
            <p class="scoringEvent">[STL] Wong hits a 2 RBI single<br>
                [STL] Molina draws a RBI walk</p>
            <br>
        </div>
        <br>
        <h3 class="teamName">St. Louis Cardinals </h3><p class="teamRecord">(9-9)</p>
        <p class="playerStats">H. Bader: 1-4, HR (1), RBI<br>
            H. Bader: 1-4, HR (1), RBI<br>
            H. Bader: 1-4, HR (1), RBI<br>
            H. Bader: 1-4, HR (1), RBI<br>
            A. Wainwright: 7.0 IP, 7 H, 1 ER, 7 SO<br>
            G. Gallegos (W, 1-0): 1.0 IP, 2 SO</p>
        <br>
        <h3 class="teamName">Los Angeles Dodgers </h3><p class="teamRecord">(14-4)</p>
        <p class="playerStats">Harrison Bader: 1-4, HR (1), RBI<br>
            Harrison Bader: 1-4, HR (1), RBI<br>
            Harrison Bader: 1-4, HR (1), RBI<br>
            Harrison Bader: 1-4, HR (1), RBI<br>
            Adam Wainwright: 7.0 IP, 7 H, 1 ER, 7 SO<br>
            Giovanny Gallegos (W, 1-0): 1.0 IP, 2 SO</p></p>
 </div>
This is the right side of the layout. It's all pretty explanatory but ask me if you have any questions.

FINAL NOTE! This was all for my baseball layout. Give me a couple of minutes and I'll go back and fix it for the football layout.
User avatar

Topic author
James
Posts: 1858
Joined: 27 Nov 2018, 08:53

HTML/CSS/Python/Django/Other Discussion

Post by James » 25 Apr 2020, 22:55

This the HTML and CSS for football

https://pastebin.com/eHsDT8Mx (index.html)

https://pastebin.com/1WKipYtf (index.css)


Let me know if you have any questions!
Post Reply