How to make a Skin for dA Journals Tutorial http://darkaion.deviantart.com With this tutorial I wanna explain the basic objects needed to make a Cascading Style Sheet (CSS) for the deviantART Journal. Before to start you need to know: • • • The CSS feature can be used only by subscribed user deviantART accepts CSS/CSS2/CSS2.1/CSS3 The CSSs aren’t both in all browser Tools I usually use the Notepad, is simple and works, but you can use a CSS editor like Dreamweaver. You have to know the basilar HTML and CSS references. If you haven’t familiarity with these you can visit http://www.w3schools.com/ and read the tutorials you need. Classes You need to know the classes used in dA page. Journal (.journalbox) • • • • • .journaltop .boxtop .list (“a” and “f”) .journaltext .journalbottom Free image hosting If you want you can upload your images (if use them in the CSS). I use http://xs.to or http://imageshack.us The “dA” size In a page with 1280×1024 resolution the deviantART journal module has 580 pixel width. The width size is really important when it is showed in the profile page. When you design the graphic remember this. You can make a CSS with a static width or use a repeated image. The use of a repeated image decreases the weight of the page. Footer and Header The footer and the header are two important tools for the creation of a skin. They could be used to include HTML code. dA doesn’t support the tables (<table>) so you have to use the divs (<div>). You can use this technique for add a submenu or just for a graphic reason. A concrete example: Header Journal entry <b>Title</b> <div class="CustomTopMenu">MENU TEXT HERE</div> <div class="CustomJournalEntry"> This is just a journal entry test. TEST TEST This is just a journal entry test. </div> <div class="CustomFooter">:thumb86912020:</div> .CustomJournalEntry {background: #f2dbdb;} .CustomTopMenu {background: #e5dfec;} .CustomFooter {background: #dbe5f1;} Footer CSS Submit in deviantART You have only two ways to submit your journal. The Complete Journal CSS and the Journal Skin. • • deviantART Related / Journal CSS / Complete Journal CSS deviantART Related / deviantART Skins / Journal Submitting a Complete Journal CSS you can submit what you want, but for a complete skin you have to submit an archive contains the CSS, the images and the other HTML codes (if want add them). Submitting a Journal Skin you have to go in your update journal module and fill the forms with the CSS and the footer and header (if you want add them) in the “Options” tab, then click “How to…” and copy the code in “How to share”. Now you have to submit it in http://www.deviantart.com/submit/?catpath=darelated/deviantartskin/journal/ the deviantART Related > deviantART Skins > Journal category as Text File (*.txt) after you submit it you have to upload the images when it will be request. When a skin will be installed the dA user with subscription can use it with a simple click on “Install Skin” in the deviation page. The style In the next steps I explain to you how to create a simple layout and a simple style with a low use of colors (3 or 4 maximum). I usually use the same template and I just edit it, this is really helpful to keep an error-free layout. In the next lines I’ll wrote a CSS used in my Journal Skin http://www.deviantart.com/deviation/123264975 “Red Smile”. This journal has static width and is compatible with IE and Mozilla Firefox, but the margins and borders aspect change by browser to browser so I have to use the relative positioning. This is the CSS what I’ve submitted for the dA CSS Normal CSS 1 2 3 4 5 6 7 8 div.journalbox { border: 0px; background: #000000 url('journalbox.png') repeat-y left top; text-align: center; cursor: default; width: 550px; } .journaltop { border: 0px; background: transparent url('journaltop.png') no-repeat left bottom; color: #FF6900; font-size: 10px; text-align: right; height: 300px; width: 515px; margin: 0px 0px 0px 10px; } .journalbox .journaltop img { display: none; } .journalbox .boxtop { color: #AA0000; text-align: right; } .journalbox .journaltop span { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: thin; text-align: right; } .journalbox .journaltop h2 { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; text-align: right; } .journalbox .list .f { border: 0px; background: transparent no-repeat left top; color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; list-style: url('listicon.png') inside; } .journalbox .list .a { border: 0px; background: transparent no-repeat left top; color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; list-style: url('listicon.png') inside; } 9 10 11 12 13 14 15 16 17 18 19 .journalbox .list { border: 0px; background: transparent no-repeat left top; color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; text-align: left; line-height: 3px; width: 515px; margin: 0px 0px 0px 12px; } .journalbox .list .f strong { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; } .journalbox .list .a strong { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; } .journalbox .journaltext { border: 0px; background: transparent no-repeat left top; color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; text-align: center; width: 515px; margin: 0px 0px 0px 10px; } .journalbox .journaltext A:link { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; } .journalbox .journaltext A:active { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; } .journalbox .journaltext A:visited { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; } .journalbox .journaltext A:hover { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; } .journalbox .journalbottom A:link { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; } .journalbox .journalbottom A:active { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; } .journalbox .journalbottom A:visited { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; } 20 21 .journalbox .journalbottom A:hover { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; } .journalbox .journalbottom { border: 0px; background: transparent url('journalbottom.png') no-repeat right bottom; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bolder; text-align: left; vertical-align: middle; height: 79px; width: 515px; margin: 0px 0px 0px 15px; } Extra CSS 22 23 24 25 26 27 .journalbox .journaltext .daiontext { border: 0px; background: transparent no-repeat left top; color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; text-align: justify; width: 512px; } .journalbox .journaltext .daiontext li { color: #AA0000; list-style: url('minilisticon.png') inside; } .journalbox .journaltext .daiontext hr { border: 1px solid #AA0000; color: #AA0000; height: 2px; position: relative; top: 8px; left: 0px; } .journalbox .journaltext .daiontext strong { border: 1px solid #AA0000; background: #AA0000 url('strong.png') repeat center top; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bolder; text-align: justify; position: relative; top: -10px; left: 5px; padding: 0px 2px 0px 2px; margin: 0px 2px 0px 2px; } .journalbox .journaltext .daiontext div.daionscroll { overflow: auto; width: 500px; height: 150px; } .journalbox .journaltext .daionlogo { border: 0px; background: transparent no-repeat right top; position: absolute; top: 0px; left: 0px; } Images journalbox.png Vertical Repeat 1 journalbottom.png 21 No Repeat journaltop.png 2 No Repeat strong.png 25 Repeat listicon.png 7/8 No Repeat minilisticon.png 23 No Repeat daionlogo.png 27 No Repeat Extra HTML Code Skin Header Skin Footer Breaker Scrollbox <div class="daiontext"> </div><div class="daionlogo"><a href="http://darkaion.deviantart.com/" title="Created by DarkAion"><img src="http://xs139.xs.to/xs139/09214/daionlogo624.png" alt="Created by DarkAion" /></a></div> <hr><strong>TEXT HERE</strong> <div class="daionscroll">TEXT HERE</div> Result Normal With Extra HTML Code OK. Now we can analyze this. I use the numbers of the classes that I named previously. In the next table I’ll include an entry of my journal so you can view a concrete example. 1 27 2/4/5/6 2 22/12 24/25 23 1 21 (Link: 17/18/19/20) 10/9/7 11/9/8 10/9/7 Design subdivision Photoshop can help you saving a lot of time. With the tool “sections” ( ) you can subdivide the graphics so when you save it you obtain the images subdivided. If you use a gradient you can save it with 1px height when you use a 0° or 180° gradient (set repeat to repeat-x) and with 1px width when you use a 90° or 270° gradient (set repeat to repeat-y). If you use a pattern with 45° orientation you can create a square with matching points, you can repeat it so you will save weight of the skin. Example: I’ve just repeated a little square. CSS Proprieties and Layout Design You have to know some useful proprieties. I’ll explain to you the proprieties showed in an example popular class. I usually use one declaration, for example I use: border: 2px solid #000000; Instead: border-width: 2px; border-style: solid; border-color: #000000; CSS .class { border: 13px solid #FF0000; background: #000000 url('image.png') 0 0 no-repeat fixed top left; color: #FF0000; font: normal normal normal 9px Verdana; text-align: justify; height: 300px; width: 550px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } Result Properties and Options Property Options Descriptions Values Border Size border-width Sets the width of the border Style border-sytle Sets the border style Color border-color Sets the border color thin medium thick inherit USER DEFINED none hidden dotted dashed solid double groove Ridge inset outset inherit USER DEFINED in Hex (ex. #000000) or Colors (ex. Black) Color background-color Sets the background color Image background-image Sets the background image Position backgroundposition Sets the background position Repeat background-repeat Sets the background repeat Attachment backgroundattachment Sets whether a background fixed or scrolls with the rest of the page Color Color color Sets the font color USER DEFINED in Hex (ex. #000000) or Colors (ex. Black) Font Family font-family family-name generic-name Size font-size Set the font name as generic (ex. Sansserif) or specific (ex. Verdana) Set the font size Background USER DEFINED in Hex (ex. #000000) or Colors (ex. Black) none URL top left top center top right center left center center center right bottom left bottom center bottom right USER DEFINED the X per cents and the Y per cents USER DEFINED the X position and the Y position repeat repeat-x repeat-y no-repeat fixed scroll xx-small x-small small smaller medium large x-large xx-large larger length USER DEFINED in Per Cents none USER DEFINED in Number normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded normal italic oblique normal small-caps normal bold bolder light lighter 100 200 300 400 500 600 700 800 900 Size font-size-adjust Preserve the X height of the font Stretch font-stretch Condenses or Expands the font Style font-style The font style (ex. Italic) Variant font-variant Sets the font as small-caps Weight font-weight Sets the weight of the fonts (ex. Bold) Text-Align Alignment text-align Text Alignment justify center left right Height Height height Height USER DEFINED Width Width width Width USER DEFINED Extra Elements Cration Here I’ll show how you can create the extra elements like the scrollbox. Hereunder you’ll find the CSS and the HTML codes. If you want you can customize it but remember this: dA support only <div>, no <table>. One important tool for the creation of menu and navigation bar is the absolute or relative position. Create extra elements is really simple… Scrollbox The scrollbox is a div with one or two scrollbars. The scrollbars will be displayed when a div has a static width or height or both. You have to set the overflow property. In the example I’ll create a vertical scrollbar. The overflow property has four values: visible, hidden, scroll, auto. The default value is visible. CSS HTML .scrollbox { <div class="scrollbox"></div> overflow: auto; width: 500px; height: 150px; } Breaker A breaker is a line what can be used to divide paragraphs or elements. I usually use a horizontal line, the <hr> tag, and a strong text, the <strong> tag. So you can do copy and paste when you need it. Hereunder I’ll write a code that works in IE and Firefox. You can set a background image in the strong text. The colors I’ll use are black and red, but can customize them. CSS HTML .breaker hr { <hr><strong>YOUR TEXT HERE</strong> border: 1px solid #AA0000; color: #AA0000; height: 2px; position: relative; top: 8px; left: 0px; } .breaker strong { border: 1px solid #AA0000; background: #AA0000 repeat top center; color: #000000; font: normal normal bolder 14px Verdana; text-align: justify; position: relative; top: -10px; left: 5px; padding: 0px 2px 0px 2px; margin: 0px 2px 0px 2px; }
© Copyright 2024