Steampowered Journal

16 min read

Deviation Actions

gillianivyart's avatar
Published:
2.2K Views





:iconportalplz:
I've added a plz div to cancel out the avatar styling.  Though most will still look okay with the blue bg.  Plus a div to float either left or right.   These can be used to float text, images, thumbs, or really anything.  Still doing a bit of testing with this skin.  seem to be having issues with the proper column widths with the sidebar.

    Use the following codes:  (<h3>)

  • <div class="plz"> -- Removes the avatar styling
  • <div class="left"> -- Floats your content to the left.
  • <div class="right"> -- Floats your content to the right.
    • Look a child

    Columns: (<h4>)

  1. <div class="half"> -- For two columns
  2. <div class="third"> -- For three columns width
  3. This is the 1/3rd column width here.
    • Great for lists and when beside the sidebar
  4. Make sure your columns are about even.
    • Using <div class="clear"></div> after sidebar only.
      • Another child




Use <blockquote> for box with blue font color.  The first line is a different font color and size.  This blockquote should look pretty good until the monitor is too narrow.  Then it would bleed into the above columns because we cannot use the clear after it.  Using clear would leave a big empty gap until below the sidebar.

:iconportal2plz:
Here we have a <div class="plz"> floated to the right of our text.  Of course, all this extra coding is not needed.  You will get a blue bg that matches the avatar on any :icongillianivy:.  It would appear as so:
:icongillianivyart: :iconsilverbane: :iconginkgowerkstatt: :iconneurotype-on-discord: :iconpica-ae: :iconecssercise: :iconcss-babes:
With "plz":
:icongillianivyart: :iconsilverbane: :iconginkgowerkstatt: :iconneurotype-on-discord: :iconpica-ae: :iconecssercise: :iconcss-babes:



Text Styling Demo (<h1>)

Italics, Emphasis, Bold, Strong, Abbreviation, Acronym, Small, Strike, Insert, Underline, Code, Teletype, Subscript and Supscript.  

You Can Combine Codes <em> & <h2>

In order to get some striking effects, you can use multiple codes enclosed in each other.  You would need to use preview a lot to test the hover effects and such to make sure the styles do not clash.

Journal Width <h5>
This is set with a max-width, since Beta users will see the journal as a deviation stretched across the entire screen.  No min-width is set, but it should look fairly good, except on a cell phone, maybe.  But why are you browsing DeviantART on your cell phone :shifty:

Thumb Styling <h6>
There are mini thumbs in the sidebar.  For emotes and stamps, pngs, etc use <em> around the image to remove the styling and size changes.






Enough About That


Not really much in my life been happening otherwise.  Our tire went flat yesterday while driving my boyfriend's grandmother to her sister's house.  Fortunately, silverbane is uber handy and fixed it real fast!  I love him.  What else exciting is happening?  Well, you're looking at it really.  A new journal skin, soon to be released.  I may do it in green too, as a separate skin.  And sneezing.  Lots and lots of sneezing.  

Also, wasting loads of time playing Sims Social.  Why?  I do not know.  I need to remove my brain from it's addictiveness.  It makes me want to get back to playing my real Sims 3 game.  There's so much they could have done to make the Facebook game better.  Like make it so you could have a live area where you can actually interact with other players.  OMG, I would waste so much more time if I could actually talk to my friends between grinding cooking/guitar/writing skills...  YoVille was almost better...  Playing YoVille was why I actually bought the Sims 2 in the first place.  I was secret playing the game, until my bf saw me and was like WTF are you playing a stupid browser game that sucks for when you can buy a real game???  
:iconeagerpee:
And he was so right.  But alas, here I am, playing another sucky browser game.  When I should be playing a game that I actually like.  I just wanted to get my Mom to play so my sim could pee on her lawn.  Seriously.

So, the links in the sidebar which are specific to silverbane's Steam profile, I will be removing.  I doubt he'll want a bunch of strangers on DA adding him to their Steam thinking he's someone else on DA.  As funny as that would be...  So, in the installable, those links will be blank so you can modify it for yourself.  I will be making a GoogleDoc help file for this so you can personalize the sidebar easily with little HTML knowledge.  Right now, there is a site issue going on with HEADER/FOOTER not showing up if you edit your journal after posting.  Workaround solutions: Do NOT Edit your journal.  Alternately, copy & paste the HEADER/FOOTER information into your journal, making sure to place them properly.

Coming Soon: Elder Scrolls V: Skyrim




Use <img class="pano">
silverbane "This game is going to rock my face"



:icongillianivyart:

© 2011 - 2024 gillianivyart
Comments25
Join the community to add your comment. Already a deviant? Log In
barberioX's avatar
Great possibilities with that layout/design! Amazing work! :thumbsup:
Especially the hover effects and the colors are wonderful!