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. 6th, 2018 09:07 pm (UTC)
So yeah, TRYING THIS AGAIN THANKS, OBAMASQUEAKY

but like I was trying to say, these game ad updates were SO NEEDED and you made them gorgeous like you do, because you're you, and thank you so much for these!
Feb. 8th, 2018 01:18 am (UTC)
Pshhhh ♥ TY BOO. I'm hype about these! I think I'll do another set with a different theme in the next month or so just so I've got a nice little selection for game ad templates.
Feb. 7th, 2018 02:16 pm (UTC)
Love. These!
Feb. 8th, 2018 01:17 am (UTC)
Heee, ty ty! ♥
Feb. 8th, 2018 06:26 am (UTC)
psssst.

ilu.
Feb. 10th, 2018 05:10 pm (UTC)
PSHHHH ♥ I actually thought of you guys when I was posting these LOL. And by the way? Your game. Looks. GORGEOUS. I was just sitting here dying over how well everything came together the other day. 😍
Feb. 10th, 2018 05:28 pm (UTC)
Pshaw. It looks gorgeous because I have your amazing code!!! Thank you again for everything! I might be able to start advertising this week. Woo!
Feb. 12th, 2018 07:31 pm (UTC)
ok, idk what I'm missing, but I've tried each option, and nothing shows up in an entry, even when I've done all the replacements necessary (i.e. images, etc.). I'm very confused! LOL
Feb. 12th, 2018 07:37 pm (UTC)
I had the same problem and I thought it was just me, but now I'm wondering if the names I gave the containers are triggering AdBlock LOL. Are you using ABP by chance? If you are then that's definitely the problem and I'll change the container names to not literally say ad in them. 😂
Feb. 13th, 2018 04:09 am (UTC)
I am indeed using ABP!
Feb. 13th, 2018 04:26 am (UTC)
This is so funny. I even had to remove the class names for this post's demos when I posted these and it STILL didn't cross my mind that it was because of ABP and "ad" being in the class labels until you said something. Fixed the codes in the entry so that they'll work!
Feb. 13th, 2018 04:28 am (UTC)
yay! this is excellent news. Thanks!!! <3
Feb. 13th, 2018 04:29 am (UTC)
(I mean, I don't even know if I'm going to end up actually advertising this potential game, but just in case! LOL)
Feb. 18th, 2018 02:41 am (UTC)
Yeah, definitely! The fastest way would probably be to just change the background color for all four instances of background:rgba(0,0,0,0.5); to your chosen color, put in a gif for ADBG as usual, and then change #999 in that background to give the footer gap a background color.

If you do this make sure you add no-repeat to background:#999 url(ADBG)center top; so that it doesn't tile downwards.
Feb. 18th, 2018 02:38 am (UTC)
On the first one - is there a way that I can make just the top section, where it says 'game name' and 'subtitle', transparent but have the rest not transparent? like if I wanted to put a gif as the header but not have it repeating on the rest.
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!