Tessisamess

Previous | Next

Game Ads Trio




Information

Hey guys! It occurred to me the other day that I've never posted templates for game advertising, and so here we are! Today we have three game ad templates to bring game ads into 2018!

All three ads come with details-based menus for links so that your game ad can focus on its image and premise hook, but still offers potential applicants all the links they might need to get started looking into your game! All colors and fonts are easily customizable to fit any game's aesthetic, and the three setups are all very different from each other to give you a good variety based on your preference.

And, of course, none are made with tables, so they won't break on people's layouts when viewed on a Generator-based friends list. Enjoy! ♥

GAME NAME
a game subtitle goes here
PREMISE
Mauris ut ipsum magna. Nunc ullamcorper purus orci. In ut turpis congue, porta nisl quis, viverra ipsum. Donec posuere orci sit amet dui finibus, non vulputate leo condimentum. Nulla molestie rutrum ante malesuada pharetra. Sed quam turpis, gravida in sem at, porta venenatis sapien. Proin posuere cursus volutpat. Aliquam eleifend lorem vitae tempus elementum. Nulla vehicula convallis convallis.
NAVIGATION

Coding: Dual Menu



GAME NAME
Mauris ut ipsum magna. Nunc ullamcorper purus orci. In ut turpis congue, porta nisl quis, viverra ipsum. Donec posuere orci sit amet dui finibus, non vulputate leo condimentum. Nulla molestie rutrum ante malesuada pharetra. Sed quam turpis, gravida in sem at, porta venenatis sapien. Proin posuere cursus volutpat. Aliquam eleifend lorem vitae tempus elementum. Nulla vehicula convallis convallis.

Coding: Menu



GAME NAME
NAVIGATE LINKONE
LINKTWO
LINKTHREE
LINKFOUR
LINKFIVE
Mauris ut ipsum magna. Nunc ullamcorper purus orci. In ut turpis congue, porta nisl quis, viverra ipsum. Donec posuere orci sit amet dui finibus, non vulputate leo condimentum.

Nulla molestie rutrum ante malesuada pharetra. Sed quam turpis, gravida in sem at, porta venenatis sapien. Proin posuere cursus volutpat. Aliquam eleifend lorem vitae tempus elementum. Nulla vehicula convallis convallis.

Nulla vehicula convallis convallis. Cras euismod dolor sit amet est vehicula facilisis. Cras ultricies elit vel felis mollis, vel accumsan ipsum placerat.

Coding: Dropdown



Installation Guide

Paste into an entry and fill in the following!

ADBG - Background/header image
GAMENAME - Game name
PREMISEHERE - Game premise
URL and LINK - Nav link (copy/paste as needed)
gamesubtitle - game subtitle (Dual Menu only)

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS
helvetica,arial,sans-serif - Overall font
palatino linotype,georgia,serif - Overall font (Dual Menu only)

IMAGES
https://i.imgur.com/PimW97R.png - Menu icon (Menu only)

COLORS
#fff Dual Menu - Header and nav title font
Menu - Links and premise background
Dropdown - Container background, dropdown background, title font
#ddd Dual Menu - Font and link color
Menu - (none)
Dropdown - (none)
#222 Dual Menu - (none)
Menu - Text color
Dropdown - Text color
#000 Dual Menu - (none)
Menu - (none)
Dropdown - Link color
0,0,0 Dual Menu - Header and content section backgrounds; title text shadow
Menu - Link text shadow
Dropdown - Title text shadow and container box shadow


Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

Comments

Feb. 18th, 2018 02:42 am (UTC)
Feb. 18th, 2018 02:44 am (UTC)
oh thank you! I'll give that a shot. If I don't change the background rgba colour, will it still be transparent?
Feb. 18th, 2018 02:46 am (UTC)
It depends! For rgba values instead of hex, your first three numbers dictate where on the rgb scale they fall to "mix" the color, and the last (fourth) value is the level of opacity, so 1 would be fully opaque and any decimal under that would be some level of transparency; so you can do it that way or you can change the whole color value over to a standard hex value!
Feb. 18th, 2018 02:47 am (UTC)
Oh alright. Makes sense. This is what I'm trying to wrangle, btw!
Feb. 18th, 2018 02:51 am (UTC)
Oh, I LOVE that. In that case you could most likely just change background:#999 url(ADBG)center top;background-size:100% auto; to background:#999; (and pick a color) to sit under the transparent BGs (or remove them) and then, in game-head you'd add background:url(GIF)center;background-size:auto 100%; so that the gif doesn't overrun past the header area.
Feb. 18th, 2018 02:54 am (UTC)
THANK YOU, that works PERFECTLY! yeah, I'm pretty terrible at intros so I'm trying something new XD
Feb. 18th, 2018 02:59 am (UTC)
I think it's awesome! And it looks super tidy and cute revamping this code for it!

(Btw, if you want only one flex container to hold all of them rather than just each row you could change the margin on the game ad to 10px and then add flex-wrap:wrap; to the outer flex container; doing that you'd also be able to get rid of the width:50% divs that wrap each character info block!)
Feb. 18th, 2018 03:03 am (UTC)
Okies! I shall have to figure that one out, I'm still quite newb with code AND it's 3am!
Feb. 18th, 2018 03:07 am (UTC)
LOL oh man coding that late never turns out that well for me haha. Let me know if you want a little base container to stick all the intro blocks into! It's pretty close to what you already have!
Feb. 18th, 2018 03:13 am (UTC)
Neither me, but I was out seeing Black Panther so I am trying to make up for lost computer time! That would honestly be amazing, I am just using that basic column coding you showed in the basics tutorial. Because otherwise they were all in a single line and it was driving me bonkers.
Feb. 18th, 2018 03:22 am (UTC)
OOH, I can't wait to see that! Okay, so basically!

<lj-raw><div style="margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;flex-wrap:wrap;">

EACH AD CODE IN HERE

</div></lj-raw>


You can remove the lj-raw tags from the ad codes themselves and change margin:0 auto; to margin:10px; to give them some space from each other. Something you could also do to tidy/shorten everything up is move the font specs from game-contain to the above outer div, since all of the codes will have the same base font across the board.

Example: font-family:palatino linotype,georgia,serif;font-size:13px;color:#ddd;text-align:justify;line-height:150%; could all come out of each character/ad block's main container and just go up in the overall wrapper a single time! (But none of this is necessary; I just thought I'd let you know in case you wanted things short and sweet for when/if you want to add/change characters around.)
Feb. 18th, 2018 03:26 am (UTC)
It's SO GOOD.

So each ad code must be wrapped by that, or all four in the one code? OH no worries, it's great - I love learning new things about code, and being neat and tidy where I can. I mean, I hope that I stick to just the four!
Feb. 18th, 2018 03:28 am (UTC)
YASS GOOD. I figured it would be tbh haha. My sister's going tomorrow morning and I'll get out at some point but it's always really pricey when it's me AND my husband AND the kid lmfao.

Just all four in that one, yup! And they'll display as inline two to a row on their own that way! (Sameee, same. I like making things as tight as possible when and where I can so it's just habit now to offer ways to do that where it applies haha.)
Feb. 18th, 2018 03:34 am (UTC)
Oh yeah, I can imagine. I've been ordered by my niece to take her to see it, so at least I'll get to see it again. XD

Sweet! I was getting so worried I'd end up breaking the code trying to put it on each one, lol.
Feb. 18th, 2018 03:40 am (UTC)
LOL, aw that'll be fun!

Nah, you're good! Flex containers are designed to line stuff up for you, so you'll be all set with just one holding them all!
Feb. 18th, 2018 03:39 am (UTC)
Nvm, I did break it! XD
Feb. 18th, 2018 03:40 am (UTC)
OH NO LOL
Feb. 18th, 2018 03:42 am (UTC)
Maybe I should sleep and try it again in the morning, lol.
Feb. 18th, 2018 03:46 am (UTC)
Y'know, I actually think it was me LOL. I put a width in while testing the code (you need a width for the outer flex container) and I didn't put it into the container code I gave you lmfao.

<lj-raw><div style="margin:0 auto;display:flex;flex-wrap:wrap;width:640px;justify-content:center;flex-wrap:wrap;font-family:palatino linotype,georgia,serif;font-size:13px;color:#ddd;text-align:justify;line-height:150%;">

CODES HERE

</div></lj-raw>
Feb. 18th, 2018 03:47 am (UTC)

These are your version of the game ad to stick inside the container code!

Feb. 18th, 2018 03:51 am (UTC)

Re: These are your version of the game ad to stick inside the container code!

OH OK! Awesome :D I mean, I probably can still break it, knowing me, but I'll give it a show!