Resource w o e n o !

[Woebegone]

[class=deschidescrollbar] margin:auto; background: #fff url(https://static.tumblr.com/jsbzmqo/MDymy4czu/bg3.png); position: relative; overflow-x: hidden; height: 200px; width: 300px; background-color: white; padding:20px; border: 1px solid #dcecf5; [/class] [class=desccontainer] height: 200px; width: 307px; overflow-y: scroll; padding-right: 50px; [/class] [class=characterdesc] font-size: 12px; font-family: cambria; background: transparent; line-height: 10px; text-align: justify; color: #727272; margin: 5px 10px 0px 10px; [/class] [class=label] background-color:#dcecf5; color:ivory; font-size:18px; font-weight:bold; letter-spacing:1.2px; text-align:center; font-family:Arial; text-transform:uppercase; [/class]
[div class=deschidescrollbar] [div class=desccontainer] [div class=label]Welcome![/div] [div class=characterdesc]

I'm just someone practicing bbcode+; don't mind me!

I do have rules though:

/#1/ I don't have any rules. Yeee. Lmao.

/#2/ All codes are free to use. No need to credit; I probably forgot to add creds anyway, lmao.

/#2a/ You're even free to make use of my codes as template, you'll probably do better.

/#3/ I would like to see how you did with my codes tho!

/#4/ Have fun!​

[/div]

​

[div class=label]directory[/div] [div class=characterdesc]

ic#1
cs#1
ic#2 (mobile friendly)
ic#3(probably mobile friendly)
​

[/div]

​

[/div][/div]

 

[Woebegone]

[class=hidescroll] margin:auto; width: 200px; height:250px; border:1px solid #dfdddd; background-color: #fff; overflow-x: hidden; [/class] [class=containers] height:240px; width: 207px; font-size: 10px; color: black; font-family:arial; text-align: justify; overflow-y:scroll; padding:5px; [/class]
[div class=hidescroll][div class=containers] Mobile Friendly IC#2

IC Post One: Colourless (NOT MOBILE TESTED; PRETTY SURE IT WONT WORK ANYWAY)

once upon item i had an urge to join the cool kids with their fancy color schemes and nice font layouts. sadly, i failed.

so to be safe, i made it monochrome! tho you can prolly still notice my lack of ability in blending in colors n' stuff.

hell i dunno. anyway enjoy the theme! i tried toying with some transitions and z-index stuff here but seeing as the latter wasn't producing the results that I wanted, i had to do a little work around. kek.

200 x 200 image
2 on hover thing
a title stuff to put your char name
bundled together in shitty color scheme!

hey who said you were here for good codes?

[/div][/div]

[class=1] padding:25px; background-color:#404040; font-size:30px; margin:30px 0 0 160px; width: 60%; text-align:center; letter-spacing:0.7px; height:20px; font-family: 'Cormorant', Arial; color:#C2C2C2; [/class] [class=interbox] background-color:#ffc3c3; padding: 12px; Height: 10px; Width: 100px; margin-left: 50px; transition-duration: 0.4s; z-index:-1; color:transparent; margin-top:2px; font-family: 'Roboto Sans', Arial; letter-spacing:1.2px; [/class] [class name=interbox state=hover] margin-left: 120px; color:#293249; width:300px; [/class] [class=locbox] background-color:#dce8f0; padding: 12px; Height: 10px; Width: 100px; margin-left: 50px; transition-duration: 0.4s; z-index:-1; color:transparent; margin-top:2px; font-family: 'Roboto Sans', Arial; letter-spacing:1.2px; [/class] [class name=locbox state=hover] margin-left: 120px; color:#293249; width:300px; [/class] [class=contentbox] background-color:#e5eaee; margin-left: 100px; margin-top: -30px; height:480px; width:500px; padding: 15px; color:#000000; text-align:justify; font-family: 'Roboto Sans', Arial; Font-size:12px; overflow-y:scroll; [/class]

[div class=1]Character [/div]
[div class=interbox]Interacting with:[/div] [div class=locbox]Location:[/div]

[div class=contentbox]
Formed by the Great Sage, Malpheim, the kingdom of the magic users, Orh is divided into ten different houses, all of which represent a different branch of magic, and each one is led by a powerful family of that house. Eilows take years upon years of their lives mastering their craft and even then, the way in which magic works in Harmonia makes it difficult even for the most seasoned of mages to control it. At the kingdom’s center stands the great tower, Orh. A tower so high, it pierces the heavens. Eilows are classified by their mastery with Nooforms being the weakest and powerless class, and Malorhian as Council Level mages.

Mages can control the flow of magic of Harmonia by letting their souls listen to its flow in the land and composing it using their magic instruments. A magic instrument can either serve only one purpose or multiple ones. The more magic an object can control, the more powerful the wielder should be. Combat instruments such as staves or wands require a ritual to link it with its owner. However, simpler magic items such as keys require no ritual as they can only perform one simple task and require very little magic to use.

The kingdom prides itself in a lot of trials and test of skills for the Eilows. Competitions are commonly held every four years to test the skills of each house. The winners of the competition are granted entrance within the Great Tower of Orh, where the best of mages are taught even more advanced magic and where the councilors of magic, Malorhian mages, sit.

Each house of magic practices a different form of ritual to link their mages with the magic of the land, and each house practices a different culture, making the kingdom of Orh diverse in culture and power.
[/div]

Spoiler: code

[nobr][font='Roboto Sans'].[/font] [font='Cormorant'].[/font]

[class=1]

padding:25px;
background-color:#404040;
font-size:30px;
margin:30px 0 0 175px;
width: 60%;
text-align:center;
letter-spacing:0.7px;
height:20px;
font-family: 'Cormorant', Arial;
color:#C2C2C2;

[/class]


[class=interbox]
background-color:#ffc3c3;
padding: 12px;
Height: 10px;
Width: 100px;
margin-left: 50px;
transition-duration: 0.4s;
z-index:-1;
color:transparent;
margin-top:2px;
font-family: 'Roboto Sans', Arial;
letter-spacing:1.2px;
[/class]

[class name=interbox state=hover]

margin-left: 120px;
color:#293249;
width:300px;

[/class]


[class=locbox]
background-color:#dce8f0;
padding: 12px;
Height: 10px;
Width: 100px;
margin-left: 50px;
transition-duration: 0.4s;
z-index:-1;
color:transparent;
margin-top:2px;
font-family: 'Roboto Sans', Arial;
letter-spacing:1.2px;
[/class]

[class name=locbox state=hover]


margin-left: 120px;
color:#293249;
width:300px;

[/class]

[class=contentbox]

background-color:#e5eaee;
margin-left: 100px;
margin-top: -30px;
height:480px;
width:500px;
padding: 15px;
color:#000000;
text-align:justify;
font-family: 'Roboto Sans', Arial;
Font-size:12px;
overflow-y:scroll;


[/class]


[/nobr]


[centerblock= 60][Imagefloat=left][heightrestrict=200][IMG]https://i.pinimg.com/236x/3b/4d/51/3b4d519b905877c933816d35fa3a97ad--tokyo-ghoul-post.jpg[/IMG][/heightrestrict][/Imagefloat]
[div class=1]Character  [/div]
[nobr][div class=interbox]Interacting with:[/div]
[div class=locbox]Location:[/div][/nobr]

[div class=contentbox]
Formed by the Great Sage, Malpheim, the kingdom of the magic users, Orh is divided into ten different houses, all of which represent a different branch of magic, and each one is led by a powerful family of that house. Eilows take years upon years of their lives mastering their craft and even then, the way in which magic works in Harmonia makes it difficult even for the most seasoned of mages to control it. At the kingdom’s center stands the great tower, Orh. A tower so high, it pierces the heavens. Eilows are classified by their mastery with Nooforms being the weakest and powerless class, and Malorhian as Council Level mages.

Mages can control the flow of magic of Harmonia by letting their souls listen to its flow in the land and composing it using their magic instruments. A magic instrument can either serve only one purpose or multiple ones. The more magic an object can control, the more powerful the wielder should be. Combat instruments such as staves or wands require a ritual to link it with its owner. However, simpler magic items such as keys require no ritual as they can only perform one simple task and require very little magic to use.

The kingdom prides itself in a lot of trials and test of skills for the Eilows. Competitions are commonly held every four years to test the skills of each house. The winners of the competition are granted entrance within the Great Tower of Orh, where the best of mages are taught even more advanced magic and where the councilors of magic, Malorhian mages, sit.

Each house of magic practices a different form of ritual to link their mages with the magic of the land, and each house practices a different culture, making the kingdom of Orh diverse in culture and power.
[/div]



[/centerblock]

 

[MidnightStar]

I like it! I cant do anything like this. LOL But I like the simple BB code look.

 

[Woebegone]

MidnightStar thanks! i feel more confident in making own templates from scratch thanks to the new class system! i'll probably do a lot more template if i have the time.

 

[MidnightStar]

MidnightStar thanks! i feel more confident in making own templates from scratch thanks to the new class system! i'll probably do a lot more template if i have the time.

No problem! I might come use it once an rp of mine starts. LOL Keep up the good work

 

[cherub.]

heck
can you teach me hOVER THINGS PLS

 

[Woebegone]

heck
can you teach me hOVER THINGS PLS

Sure! I'll be using the same codes as above:

Spoiler

[class=2]
background-color:#dde2e3;
padding: 12px;
Height: 10px;
Width: 100px;
margin-left: 50px;
transition-duration: 0.4s;
z-index:-1;
color:transparent;
margin-top:2px;
font-family: 'Montserrat', Arial;
letter-spacing:1.2px;
[/class]

[class name=2 state=hover]

background-color:#dde2e3;
margin-left: 120px;
color:#293249;
width:300px;

[/class]

To create a hover effect, you first have to make the main class (in this example, it's class 2) like so:
"[class= Samplename]"
property
property
property
"[/class]"

This is where you declare how you want your code to look when not hovered. You'll mostly like invest a lot more time coding on this one.

From there, we're going to create a hover state:

"[class name= Samplename state=hover]"
property
property
propert
"[/class]

The code above will show you want happens to your code when on mouse hovers so if you coded your content with a red background in the default state (no hover), you can make it blue on hover! You're also free to add in snippets of properties of your own if you want, you're not restricted to sticking to what is in your class's default state.

Now let's move on with an example! [class=2] background-color:#dde2e3; padding: 12px; Height: 10px; Width: 100px; margin-left: 50px; z-index:-1; color:transparent; margin-top:2px; font-family: 'Montserrat', Arial; letter-spacing:1.2px; [/class] [class name=2 state=hover] background-color:#dde2e3; margin-left: 120px; color:#293249; width:300px; [/class]
[div class=2] Content here [/div]

So as you can see, in its default state, the content itself is just a measly box with no text. But upon hovering, it expanded, "moved", and showed a text!. This is because if you look at my code, it says that it'll change the values on its margin-left, font color, and width on hover! So by editing or adding new properties to your content's hover state, you can play with how your code will look!

Also, notice that unlike code above, the change occured instantly? Well, that's because I didn't use the 'transition-duration' property. What does it do? It specifies the number of seconds or milliseconds a transition animation should take to complete. Which means, by adding this property to your code you can create a movement-like effect to your content. Like so:
[class=3] background-color:#dde2e3; padding: 12px; Height: 10px; Width: 100px; margin-left: 50px; z-index:-1; transition-duration:0.4s; color:transparent; margin-top:2px; font-family: 'Montserrat', Arial; letter-spacing:1.2px; [/class] [class name=3 state=hover] background-color:#dde2e3; margin-left: 120px; color:#293249; width:300px; [/class]
[div class=3] Content here. See the difference? [/div]

By adding a transition-duration property on the default state, the content now feels like it moves as if it was animated. You can control to how fast or how slow your animation plays out by changing the value within your transition duration property:

[class=4] background-color:#dde2e3; padding: 12px; Height: 10px; Width: 100px; margin-left: 50px; z-index:-1; transition-duration:2s; color:transparent; margin-top:2px; font-family: 'Montserrat', Arial; letter-spacing:1.2px; [/class] [class name=4 state=hover] background-color:#dde2e3; margin-left: 120px; color:#293249; width:500px; [/class]
[div class=4] This is the animation for 2seconds trans-duration [/div]

[class=5] background-color:#dde2e3; padding: 12px; Height: 10px; Width: 100px; margin-left: 50px; z-index:-1; transition-duration:0.5s; color:transparent; margin-top:2px; font-family: 'Montserrat', Arial; letter-spacing:1.2px; [/class] [class name=5 state=hover] background-color:#dde2e3; margin-left: 120px; color:#293249; width:500px; [/class]
[div class=5] This is the animation in .5 seconds trans-duration [/div]

There are more transition properties you can do like delay, property or timing function but we'll go over those another time!

Well, um. I think that's all I can say about hover effects! I'm bad at explaining things so it's probably going to be better if you ask me anything you wanna know about this property instead!

Hope you learned something and happy coding!

 

[cherub.]

oooh !!
thank you !!

 

[elextrified]

that code is absolutely wrecked on mobile lmao
but it’s v nice ♥ i mighit use it whenever i get on my laptop

 

[Woebegone]

that code is absolutely wrecked on mobile lmao
but it’s v nice ♥ i mighit use it whenever i get on my laptop

LMAO. not surprised. I didn't even test how it looks on mobile. thanks thoo

 

[Woebegone]

[class=hidescroll] margin-left:125px; width: 150px; height:100px; border:1px solid #dfdddd; background-color: #fff; overflow-x: hidden; [/class] [class=container] height:90px; width: 157px; font-size: 10px; color: black; font-family:arial; text-align: justify; overflow-y:scroll; padding:5px; [/class]
[div class=hidescroll][div class=container] For CS: #1(looks better in light version!)
MOST LIKELY NOT MOBILE FRIENDLY

2 blocks, one for basics, one for description,
hidden scrolling, background headers,

overall pretty basic, made this since it'll be a base for a lot of templates coming from me.

will play around more hover effects soon.

feel free to tag me in posts you use this on so I can see what you did with it!
[/div][/div] [class=deschidescrollbar] background: #fff url(https://static.tumblr.com/jsbzmqo/MDymy4czu/bg3.png); position: relative; overflow-x: hidden; height: 200px; width: 300px; background-color: white; margin-left:305px; margin-top:-20px; padding:20px; border: 1px solid #dcecf5; [/class] [class=desccontainer] height: 200px; width: 307px; overflow-y: scroll; padding-right: 50px; [/class] [class=characterdesc] font-size: 9px; font-family: cambria; background: transparent; line-height: 10px; text-align: justify; color: #727272; margin: 5px 10px 0px 10px; [/class] [class=basiccontainer] height:300px; width:150px; margin-left: 100px; padding-bottom: 50px; text-align: center; padding-left: 23px; padding-right: 23px; float:left; background: #fff url(https://static.tumblr.com/jsbzmqo/MDymy4czu/bg3.png); border: 1px solid #dcecf5; [/class] [class=basics] border-bottom: 4px double #dcecf5; color: #727272; text-align: center; font-family: cambria; font-size: 10px; letter-spacing: 1px; line-height: 10px; padding-bottom:10px; margin-top:-10px; [/class] [class=label] background-color:#dcecf5; color:ivory; font-size:18px; font-weight:bold; letter-spacing:1.2px; text-align:center; font-family:Arial; text-transform:uppercase; [class=pic] height:150px; width:150px; width:100%; [/class]
[div class=basiccontainer]
[div class=pic]

[/div]
[div class=label] BASICS [/div]
[div class=basics]your name,

your age,

your location,

your birthday,
[/div]
[/div]
[div class=deschidescrollbar] [div class=desccontainer] [div class=label]APPEARANCE[/div] [div class=characterdesc]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

[/div]
[div class=label] Personality [/div] [div class=characterdesc]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

[/div][/div] [/div]

Spoiler: GET THE CODE HERE!

[nobr]

[class=basiccontainer]

    height:300px;
    width:150px;
    margin-left: 100px;
    padding-bottom: 50px;
    text-align: center;
    padding-left: 23px;
    padding-right: 23px;
    float:left;
    background: #fff url(https://static.tumblr.com/jsbzmqo/MDymy4czu/bg3.png);
    border: 1px solid #dcecf5;
 
[/class]

[class=basics]
 
    border-bottom: 4px double #dcecf5;
    color: #727272;
    text-align: center;
    font-family: cambria;
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 10px;
      padding-bottom:10px;
    margin-top:-10px;
  
[/class]

[class=characterdesc]

font-size: 9px;
    font-family: cambria;
    background: transparent;
    line-height: 10px;
    text-align: justify;
    color: #727272;
margin: 5px 10px 0px 10px;

[/class]

[class=deschidescrollbar]

    position: relative;
    overflow-x: hidden;
    height: 200px;
    width: 300px;
   background-color: white;
   margin-left:305px;
   margin-top:-20px;
padding:20px;
   border: 1px solid #dcecf5;
 
[/class]

[class=desccontainer]

    background: #fff url(https://static.tumblr.com/jsbzmqo/MDymy4czu/bg3.png);
    height: 200px;
    width: 307px;
    overflow-y: scroll;
    padding-right: 50px;
   
[/class]

[class=label]

background-color:#dcecf5;
color:ivory;
font-size:18px;
font-weight:bold;
letter-spacing:1.2px;
text-align:center;
font-family:Arial;
text-transform:uppercase;

[class=pic]

height:150px;
width:150px;
width:100%;

[/class]



[/nobr]
[div class=basiccontainer]
[div class=pic]
[IMG]https://78.media.tumblr.com/c3055cf93a14048d32e71496bda8cd5c/tumblr_okwb40u37Q1vl35wco1_500.gif[/IMG]
[/div]
[div class=label] BASICS [/div]
[div class=basics]your name,

your age,

your location,

your birthday,
[/div]
[/div]
[div class=deschidescrollbar] [div class=desccontainer] [div class=label]APPEARANCE[/div] [div class=characterdesc]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

[/div]
[div class=label] Personality [/div] [div class=characterdesc]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

[/div][/div] [/div]

[comment]no worries, this section will not show up. code made by woebegone. aye, i remembered to add a credit this time. feel free to make this your base or anything tho. also, feel free to tag me in posts you use this format on. I wanna see how you did with it! [/comment]

 

[Solo Quartet]

LMAO. not surprised. I didn't even test how it looks on mobile. thanks thoo

Looked perfect on my droid, though...

 

[cherub.]

woah this looks gr8 dude ♡

 

[Woebegone]

[class=hidescroll] margin:auto; width: 200px; height:250px; border:1px solid #dfdddd; background-color: #fff; overflow-x: hidden; [/class] [class=containers] height:240px; width: 207px; font-size: 10px; color: black; font-family:arial; text-align: justify; overflow-y:scroll; padding:5px; [/class]
[div class=hidescroll][div class=containers] Mobile Friendly IC#2

//hover on photo for content

//a header for chatacter name

//a footer for tags

//code is VERY SENSITIVE on LINE BREAKS - please only use them on your main content line, do not and I mean DO NOT move the div placements. it'll look bad.

//you know the drill: i dont put credits but tag me on posts where you use it so i can see what you did with it!


[/div][/div]

[class=container] margin:auto; height:560px; width: 300px; overflow:hidden; [/class] [class=charactername] letter-spacing: 0px; display: inline-block; font-size: 11px; color: #F2F2F2; background: #444444 url('http://41.media.tumblr.com/c1ac4c27aa200889437e40314ddfcff9/tumblr_nd1o9l6kcq1ru3nbdo6_r2_250.png') repeat; text-align:center; line-height: 13px; letter-spacing:.4px; width:300px; font-family:Merriweather; color:#312d33; [/class] [class=covercontainer] height:420px; width:600px; transition-duration:.7s; [/class] [class name=covercontainer state=hover] margin-left:-300px; [/class] [class=coverphoto] float:left; display:inline-block; height:428px; width:250px; margin-top:-23px; background:blue url('https://78.media.tumblr.com/5b94113c9c24334fbc37fb426caee465/tumblr_oehf80hwze1uwwqn2o1_1280.jpg') repeat top center; padding:24px; transition-duration: .5s; [/class] [class name=coverphoto state=hover] opacity:0; [/class] [class=coverpost] float:right; padding:26px 25px 25px 25px; display: inline-block; height:424px; font-family:Lucida Grande; color:#5d5760; font-size:11px; width:250px; background:blue url('https://31.media.tumblr.com/cf375ad31b24bbf86755017a5beb29ee/tumblr_inline_n7q6zf4FCh1rnjuep.png') repeat; transition-duration: .3s; opacity:0; overflow-y:scroll; [/class] [class name=coverpost state=hover] opacity:1; [/class]
[div class=container]

[div class=charactername]Character Name[/div]
[div class=covercontainer][div class=coverpost]
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary regelialia.

It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.

She packed her seven versalia, put her initial into the belt and made herself on the way.

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
[/div]
[div class=coverphoto][/div][/div][div class=charactername]Tags:[/div][/div]

Spoiler: code

[nobr] [class=container] margin:auto; height:560px; width: 300px; overflow:hidden; [/class] [class=charactername] letter-spacing: 0px; display: inline-block; font-size: 11px; color: #F2F2F2; background: #444444 url('http://41.media.tumblr.com/c1ac4c27aa200889437e40314ddfcff9/tumblr_nd1o9l6kcq1ru3nbdo6_r2_250.png') repeat; text-align:center; line-height: 13px; letter-spacing:.4px; width:300px; font-family:Merriweather; color:#312d33; [/class] [class=covercontainer] height:420px; width:600px; transition-duration:.7s; [/class] [class name=covercontainer state=hover] margin-left:-300px; [/class] [class=coverphoto] float:left; display:inline-block; height:428px; width:250px; margin-top:-23px; background:blue url('https://78.media.tumblr.com/5b94113c9c24334fbc37fb426caee465/tumblr_oehf80hwze1uwwqn2o1_1280.jpg') repeat top center; padding:24px; transition-duration: .5s; [/class] [class name=coverphoto state=hover] opacity:0; [/class] [class=coverpost] float:right; padding:26px 25px 25px 25px; display: inline-block; height:424px; font-family:Lucida Grande; color:#5d5760; font-size:11px; width:250px; background:blue url('https://31.media.tumblr.com/cf375ad31b24bbf86755017a5beb29ee/tumblr_inline_n7q6zf4FCh1rnjuep.png') repeat; transition-duration: .3s; opacity:0; overflow-y:scroll; [/class] [class name=coverpost state=hover] opacity:1; [/class] [/nobr] [div class=container] [div class=charactername]Character Name[/div] [div class=covercontainer][div class=coverpost] Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then [/div] [div class=coverphoto][/div][/div][div class=charactername]Tags:[/div][/div]

 

[cherub.]

yo could i use the hover
and then credit you ??

 

[Woebegone]

yo could i use the hover
and then credit you ??

the hover foe whic code? all these are free. so feel free

 

[cherub.]

the second one ! and okey dokey then !

 

[Woebegone]

cherub. , already posted the codes for it. if you have questions, please feel free to ask me! the coding on that one can be messy to navigate around.

 

[Woebegone]

[class=hidescroll] margin:auto; width: 200px; height:250px; border:1px solid #dfdddd; background-color: #fff; overflow-x: hidden; [/class] [class=containers] height:240px; width: 207px; font-size: 10px; color: black; font-family:arial; text-align: justify; overflow-y:scroll; padding:5px; [/class]
[div class=hidescroll][div class=containers] Mobile Friendly IC#3

//hover on photo for tags and a surprise

//text shadowed character name

//very easy to edit.

//you know the drill: i dont put credits but tag me on posts where you use it so i can see what you did with it!

accidentally created this while i was in the process of revamping IC#1; the idea slapped me across the face while editing so i gave it a shot!

will make use of this as a base for a couple of ideas i had in mind.
[/div][/div]



[class=name] font-size: 36px; text-transform: uppercase; letter-spacing: 4px; color: #a1ff8e; opacity: 0.7; width: 280px; margin:auto; margin-left:-10px; margin-top:-20px; text-shadow: 2px 0 0 #7c9d80; [/class] [class name=picbox] margin:auto; margin-top:20px; background: #e6c3a7 url('https://i.pinimg.com/736x/b0/89/f3/b089f33a2d51d73bfa32da131da49d9e--avatar-partner.jpg') no-repeat center center; background-size:200px; width: 200px; height: 200px; border-radius: 250px; border: 3px solid #e6c3a7; transition-duration: 1s; [/class] [class name=picbox state=hover] border-radius:20px; [/class] [class=locbox] transition-delay:.2s; background: grey; Height: 180px; text-align:center; Width: 180px; border: 1px solid black; margin-top:40px; margin:auto; padding-top:10px; color: Ivory; transition-duration: 1s; opacity:0; font-family: 'Roboto Sans', Arial; letter-spacing:1.2px; border-radius:20px; [/class] [class name=locbox state=hover] opacity:0.8; [/class] [class=hidescrollcontent] background: grey url('https://i1.wp.com/nappyplum.co.za/wp-content/uploads/2017/03/pastel-yellow-color-wallpaper-3.gif') repeat; margin-top: -30px; height:400px; width:250px; Font-size:11px; overflow-x:hidden; margin:auto; padding: 25px; border-radius:20px; border-left: 3px solid #e6c3a7; border-bottom: 3px solid #e6c3a7; border-top: 3px solid #7c9d80; border-right: 3px solid #7c9d80; [/class] [class=contentbox] height:385px; width:257px; padding: 5px; color:#9e8b66; text-align:justify; font-family: 'Roboto Sans', Arial; Font-size:11px; overflow-y:scroll; text-align:justify; [/class]
[div class=picbox][div class=locbox]Location:
Tags:[/div][div class=name]Character [/div]

[/div]
[div class=hidescrollcontent][div class=contentbox]
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary regelialia.

It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.

She packed her seven versalia, put her initial into the belt and made herself on the way.

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
[/div][/div]

Spoiler: CODE INSIDE!

[nobr]
[class=name]

    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #a1ff8e;
    opacity: 0.7;
    width: 280px;
    margin:auto;
    margin-left:-10px;
   margin-top:-20px;
    text-shadow: 2px 0 0 #7c9d80;

[/class]

[class name=picbox]

margin:auto;
margin-top:20px;
background: #e6c3a7 url('https://i.pinimg.com/736x/b0/89/f3/b089f33a2d51d73bfa32da131da49d9e--avatar-partner.jpg') no-repeat center center;
background-size:200px;
width: 200px;
height: 200px;
border-radius: 250px;
border: 3px solid #e6c3a7;
transition-duration: 1s;

[/class]

[class name=picbox state=hover]
border-radius:20px;

[/class]

[class=locbox]

transition-delay:.2s;
background: grey;
Height: 180px;
text-align:center;
Width: 180px;
border: 1px solid black;
margin-top:40px;
margin:auto;
padding-top:10px;
color: Ivory;
transition-duration: 1s;
opacity:0;
font-family: 'Roboto Sans', Arial;
letter-spacing:1.2px;
border-radius:20px;

[/class]



[class name=locbox state=hover]

opacity:0.8;

[/class]

[class=hidescrollcontent]

background: grey url('https://i1.wp.com/nappyplum.co.za/wp-content/uploads/2017/03/pastel-yellow-color-wallpaper-3.gif') repeat;
margin-top: -30px;
height:400px;
width:250px;
Font-size:11px;
overflow-x:hidden;
margin:auto;
padding: 25px;
border-radius:20px;
border-left: 3px solid #e6c3a7;
border-bottom: 3px solid #e6c3a7;
border-top: 3px solid #7c9d80;
border-right: 3px solid #7c9d80;
[/class]

[class=contentbox]

height:385px;
width:257px;
padding: 5px;
color:#9e8b66;
text-align:justify;
font-family: 'Roboto Sans', Arial;
Font-size:11px;
overflow-y:scroll;
text-align:justify;

[/class]


[/nobr]
[div class=picbox][div class=locbox]Location:
Tags:[/div][div class=name]Character  [/div]

[/div]
[div class=hidescrollcontent][div class=contentbox]
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary regelialia.

It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.

She packed her seven versalia, put her initial into the belt and made herself on the way.

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
[/div][/div]

 

[cherub.]

teach me your ways
your codes are great 0':

 

[eclipsa]

your codes are so nice!

 

[ForgottenBlood]

Gonna be using your 3rd code, thank you so much! ^^

 

[doneanddusted]

hOLY FUCK IM BEEN LOOKING FOR MOBILE FRIENDLY CODES FOR SO LONG THANK YOU ILYSM 3333333333333333

 

[graphic_biscuit]

I hope it's alright if I use the IC code #3! Amazing codes, by the way!