HOME | DD

CypherVisor — Journal {CSS} Guide - Beginners
Published: 2013-07-14 16:18:23 +0000 UTC; Views: 91998; Favourites: 1853; Downloads: 0
Redirect to original
Description body div#devskin10239588 .gr-box * { background:transparent; border:0; margin:0; padding:0; } body div#devskin10239588 .list, body div#devskin10239588 .gr-top h2 img, body div#devskin10239588 .bottom .hsep, body div#devskin10239588 .gr1, body div#devskin10239588 .gr2, body div#devskin10239588 .gr3, body div#devskin10239588 .tri, body div#devskin10239588 .gr3.gb, body div#devskin10239588 .gr2.gb, body div#devskin10239588 .gr1.gb, body div#devskin10239588 .gr-top span { display:none; } body div#devskin10239588 .gr-box { background:#000 url(https://fc07.deviantart.net/fs71/f/2013/194/c/b/subtle_carbon_by_cyphervisor-d6dbmyl.png); margin:10px; box-shadow:0px 0px 3px #000; -moz-box-shadow:0px 0px 3px #000; -webkit-box-shadow:0px 0px 3px #000; } body div#devskin10239588 .gr-top { height:200px; } body div#devskin10239588 .gr-top h2 { background:url(https://fc08.deviantart.net/fs70/f/2013/194/d/3/ultimate_deviantart_by_cyphervisor-d6dboag.png) no-repeat; width:665px; height:48px; position:absolute; top:20px; left:20px; padding-top:50px; font-family:EB Garamond; color:#f56692; font-size:34px; } body div#devskin10239588 .gr-top h2 a { color:#f56692; } body div#devskin10239588 .text { color:#fff; font-family:Noto Serif; padding-left:20px; padding-right:20px; margin-bottom:30px; } body div#devskin10239588 .text b { font-size:14px; color:#f28361; font-family:Cherry Swash, Expletus Sans; font-weight:normal; } body div#devskin10239588 .text strong { color:#af36c9; font-size:14px; } body div#devskin10239588 .text h1 { font-size:24px; color:#f56692; font-family:Caudex; font-weight:normal; border-top:1px dotted #f56692; border-bottom:1px dotted #f56692; } body div#devskin10239588 .text blockquote { background:#161616; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px; margin-right:200px; margin-left:200px; color:#a7a7a7; border:1px solid #242424; } body div#devskin10239588 .text ol { padding-left:40px; } body div#devskin10239588 .text ol li { _margin-bottom:-15px; padding-top:4px; } body div#devskin10239588 .text ul { padding-left:20px; list-style-type:none; } body div#devskin10239588 .text ul li { _margin-bottom:-15px; padding-top:4px; } body div#devskin10239588 .text ul li i, body div#devskin10239588 ul li li i, body div#devskin10239588 ul li li li i, body div#devskin10239588 ul li li li li i, body div#devskin10239588 ol li i, body div#devskin10239588 ol li li i, body div#devskin10239588 ol li li li i, body div#devskin10239588 ol li li li li i, body div#devskin10239588 .text i { font-style:normal; color:#90c936; } body div#devskin10239588 .text ul li em, body div#devskin10239588 ul li li em, body div#devskin10239588 ul li li li em, body div#devskin10239588 ul li li li li em, body div#devskin10239588 ol li em, body div#devskin10239588 ol li li em, body div#devskin10239588 ol li li li em, body div#devskin10239588 ol li li li li em, body div#devskin10239588 .text em { font-style:normal; color:#ff6e47; } body div#devskin10239588 .text code { display:block; background:#121212; padding:10px; color:#c8fcff; font-size:14px; font-family:Noto Serif; font-weight:normal; margin-left:20px; margin-right:20px; } body div#devskin10239588 .text blockquote a, body div#devskin10239588 .text a { text-decoration:none; color:#f0ff00; padding:0px 3px; } body div#devskin10239588 .text blockquote a:hover, body div#devskin10239588 .text a:hover { text-decoration:none; background:#f0ff00; color:#000; } body div#devskin10239588 .commentslink { text-decoration:none; position:absolute; bottom:10px; left:10px; padding:3px 10px 3px 10px; font-family:EB Garamond; background:#f56692; color:#000; font-size:20px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } body div#devskin10239588 .commentslink:hover { color:#fff; } body div#devskin10239588 .credit { position:absolute; bottom:10px; right:10px; font-size:12px; color:#005e9a; } body div#devskin10239588 .credit a { text-decoration:none; color:#005e9a; } body div#devskin10239588 .credit a:hover { color:#003354; text-decoration:none; text-shadow:none; } body div#devskin10239588 .topbtn { position:absolute; _border:1px solid red; top:0px; right:30px; font-size:16px; } body div#devskin10239588 h3 { color:red; } body div#devskin10239588 h3.redborder { border:1px solid red; } body div#devskin10239588 .greenborder { border:1px solid green; } body div#devskin10239588 .spaceleft { margin-left:20px; } body div#devskin10239588 .redborder.box { color:blue; background:white; } body div#devskin10239588 .redborder .box { color:blue; background:white; }

`CypherVisor's Page | Customization Resources | CSS Skins



Hi there,

If you are reading this blog then I assume that you are interested in learning about deviantART Journal Skins. In this beginner’s tutorial I’ll be covering the basic understanding of HTML, CSS and DA’s journal skins. I’ll be explaining everything in details from the scratch so that you do not miss anything. I have designed this tutorial in such a way that I can assure you that you’ll be able to achieve a working knowledge of deviantART journal skins.

A little background about myself: I am a hobby-driven artist who mainly deals with CSS and HTML in deviantART (now). I like to teach people about customization and provide helpful guides to achieve them. I have designed and coded over 100+ skins till now in DA and I can confidently say that I have quite a deep knowledge about dA’s journal and gallery skins.


A point of inspiration (may be):


I never had any kind of formal training or courses on HTML and CSS coding. I have self-learned everything myself only by going through online tutorials that were available in dA and outside dA. So, if I can do it you can do it too! Otherwise, if you say I cannot learn or understand CSS it would only mean that you are not interested to learn about it.

At the end of this tutorial you’ll know:

  • What is HTML?
  • What is CSS?
  • HTML tags and attributes
  • CSS classes, selectors and properties
  • How HTML and CSS work together
  • How CSS and HTML works in DA journal skinning system
  • How to code your first journal skin


    • Let's get started!



    What is HTML?
    HTML is the "mother tongue" of your web browser. HTML is a language, which makes it possible to present information in your browser. Generally, what you see when you view a page on the Internet is your browser's interpretation of HTML. HTML (Hypertext Markup Language) is a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

    The general syntax of a HTML page is as follows:




        Sample Web page


      • Here is a paragraph






    Don’t worry you do not actually have to understand the above code. Just see what the syntax is that’s all. I’ll explain at a later point in this tutorial why I have mentioned about the above syntax.





    What is CSS?
    CSS stands for Cascading Style Sheets. CSS defines HOW HTML elements are to be displayed in a web browser. Using CSS we can define the style of each element of HTML elements. The word “sheets” in CSS comes from the idea where you can create external CSS sheets with a .css format and include them in your page.

    The following syntaxes show how CSS is used in any given page:

    Syntax 1: External Style Sheets (cannot be used in DA by us)





    Here the file mystyle.css contains the styles defined.

    Example:
    • a {color:red;}
    • p {padding-left:20px;}
    • body {background-image:url("images/back40.gif");}




    Syntax 2: Inline Styles (cannot be used in DA by us)

    • This is where the content goes for a paragraph.






    Syntax 3: Internal Style Sheet (This is the one used in DA by us)






    You should just get an idea by now what HTML and CSS are and their syntaxes. Now, let’s get into practical understanding of these.





    HTML tags and attributes
    HTML tags are keywords (tag names) surrounded by angle brackets like . Normally HTML tags come in pairs like and where denotes the start tag and the end tag.

    General syntax of a tag is as follows:

    • Content inside it




    Complete list of available tags can be found here: HTML tags



    HTML attributes provide additional information about a tag. Attributes are always specified in the start tag. There can be more than one attribute in a single tag.

    General syntax of a tag is as follows:

    • Content inside it



    List of available attributes can be found here: HTML attributes



    Example: Hyperlinks are defined using tag and the URL address of the hyperlink is specified with the help of herf attributes as below.








    CSS classes, selectors and properties
    Just like HTML has syntax for writing tags and attributes, CSS also has its own syntax. The syntax of CSS for an element is called as rule.

    General syntax of a CSS rule is as follows:

    • selector {declaration;}




    A declaration consists of a property and value. And each declaration is written as property:value; So we can re-write the above syntax as below:

    • selector {property:value;}



    selector is generally the HTML tag or a class that you want to style.
    declaration is one definite style or function of that selector.

    Complete list of available properties can be found here: CSS Properties
    Different types of selectors can be found here: CSS Selectors



    Examples:

    • a {color:red;}
    • p {padding-left:20px;}
    • body {background-image:url("images/back40.gif");}






    How HTML and CSS work together
    This is the last phase of understanding how HTML and CSS both work together. I’ll be explaining this with live examples.

    See the below image and check how the CSS is defined for the tag





    You can now compare and see how the heading

    would have looked with and without CSS.

    In the above example we have defined two declaration for the selector

    One of the declaration color:red; states the colors of the h3 tag as red and the other one padding-left:10px; determines the space to the left of h3 tag as 10 pixels.

    Now let’s learn little bit more on how CSS are defined. I am sure you have seen CSS codes which look like something as follows (at least some of them):

    a
    {
    color:red;
    }
    a:hover
    {
    color:green;
    }
    a.drawbox
    {
    background:white;
    }
    .gr-body
    {
    border:2px dotted #fff234 ;
    }
    .gr-top h2
    {
    background:red;
    color:white;
    }
    .title h3
    {
    background:red;
    color:black;
    }
    .title .shadow
    {
    background:red;
    color:black;
    }

    /*see no space between .title and .shadow*/

    .title.shadow
    {
    background:red;
    color:black;
    }


    This can be really confusing for a new-comer! It was a hair-pulling situation for me when I first started learning about CSS coding. Anyways, I was a noob that time and there was no one to teach me these. But you have got me to save your time!

    Alright, lets understand what does those dots(.) before rules (or classes) signifies, when do you "not" use dots(.), what are classes with a dot(.) between them etc. etc. Argggggh! It drives us nuts! I know I know! Now stay calm, relax your mind and I’ll teach the differences between all these dots and no-dots. It is very easy actually. You just need to flow some thumb-rules for this!

    NOTE: I am not going to talk about CSS Id here because we can’t use it in deviantART. CSS Ids have hash(#) symbol before them as compared to dot(.) symbol before classes.

    So first thing first, let us see which all elements you can style using CSS.

  • All HTML tags such as , ,

    ,
    , etc.

  • Classes (can be used in DA)
  • Ids (cannot be used in DA)


    • As said above, we cannot use Ids so I won’t be explaining this to you.


    Styling HTML tags
    HTML tags are styled using the following syntax:

    a {color:red;}

    Notice HTML selectors do not need a dot(.) before them. You can never define the style of HTML by putting a dot(.) before it like this

    .a {color:red;}  -----> This is incorrect!!!



    Styling Classes
    Classes are custom selectors that you can define of your own. Example,

    .box{background:white; color:black;}

    Notice that a class is defined using a dot(.) before them.

    NOTE: Starting a classes name with a number (such as .3box or .66mybox) may not work in internet explorer.



    Alright! Now have you understood where and why dots(.) are used? Cool! Now let us go into little bit of complex selectors! Take a deep breath.. Lol just kidding.

    Okay, let us look at the following selectors:

    h3 {color:red;}

    h3.redborder {border:1px solid red;}

    .greenborder {border:1px solid green;}

    .spaceleft {margin-left:20px;}

    .redborder.box {color:blue; background:white;}

    .redborder .box {color:blue; background:white;}



    Let us now make sense of all these selectors one-by-one and then we’ll see how do to use them in HTML.

    h3 {color:red;}
    Defines the color of text of

    tag as red.

    How to use this CSS?:

    Heading



    Result:
    Heading


    h3.redborder {border:1px solid red;}
    Draws a red border around any  

    tag  which calls for the .redborder class.

    Here we are calling a custom class inside a HTML tag. It can only be use with the  

    tag because you have not left any space between the  

    tag and  .redborder.

    It will not work for other HTML tags.  For example: Heading will not get the red text color. It will simply get the default properties as below:
    Heading

    How to use this CSS?:

    Heading



    Result:
    Heading


    .greenborder {border:1px solid green;}
    Defines a class which will draw a green border around the element wherever used.

    How to use this CSS?:

    Heading



    Result:
    Heading

    Here we are calling a custom class inside a HTML tag. However, it can be used with any HTML tag or custom designed class.

    It will work for other HTML tags or classes.  For example: Heading will get the red text coloras below:
    Heading

    Explanation:
    When you are calling the .greenborder class in the

    tag basically it is including the properties of  both

    and .greenborder inside it. You can imagine the CSS of the

    tag as follows:

    h3 {color:red;
    border:1px solid green;}


    .spaceleft {margin-left:20px;}
    Defines a class which will assign a 20px margin to the left of the element wherever used.

    How to use this CSS?:

    Heading



    Result:
    Heading

    Explanation:
    When you are calling the .greenborder class plus the .spaceleft class in the

    tag basically it is including the properties of  

    , .greenborder and .spaceleft inside it. You can imagine the CSS of the

    tag as follows:

    h3 {color:red;
    border:1px solid green;
    margin-left:20px;}


    .redborder.box {color:blue; background:white;}
    Defines the class .redborder which will get a blue text and white background only when the .redborder class is used along with it.

    Here if you call only the .box class in a HTML tag it will not work because it is defined to work with it's parent class .redborder

    How to use this CSS?:
    Heading


    Result:

    Heading




    .redborder .box {color:blue; background:white;}
    Defines the class .box which will get a blue text and white background only when it is used anywhere inside the parent .redborder class.


    How to use this CSS?:

    Heading

    or

    Some text here.

    Heading


    Result:

    Heading


    or

    Some text here.

    Heading



    Explanation:
    I'll leave it on you to understand! You should be able to figure it out now!


    Some cool tips and tricks!

    1) You can define multiple selectors the same declaration by separating them using commas(,). Example:

    h3, .gr-body .text, .list
    {
    font-size:16px;
    }

    2) You can define styles for a selected tag or classes that which is present inside another tag or classes using the greater than symbol(>) Example:

    h3>span
    {
    color:green;
    }

    3) You can insert comments in your CSS by using the /* and */ You can use it anywhere in your CSS to put a small note or description. Comments are written inside the /* and */ as follows:

    /*This is demo comment*/




    How CSS and HTML works in DA journal skinning system
    I have often seen people directly going into the journal entry page or stash writer page and starts typing CSS codes to skin their journals. However, I have found only a few who actually understood how the DA journal skin system works.

    I am going to make you understand how the DA journal skin system actually works. Now you'll understand why I have explained all about HTML and CSS all this long! If you have skipped the previous steps then I would suggest to scroll up and just go through it.

    Take a look at the DA HTML page below:



    In the above image you can see the page contains all sorts of classes for your page widgets, scripts, etc. However, you cannot edit any of the classes or scripts of DA (at least if you are not a hacker or cracker ) The only part which you can edit is the

    and all the selectors inside it. Making sense now? If you are still unclear, then let me tell you....this is the part you get to edit in your journal editor or stash writer! Duh!

    Now check out the expanded class of
    below and see all the selectors that are present inside it. If you ever had tried to edit a skin then you'll be able to relate the things here on.



    Lets make the picture more clear shall we? Let's observe a practical example now. Check out the below image of the journal editor. You can see we write codes something like this:



    So now, if you see the CSS code above you see that we are editing the selectors (more precisely the classes) .gr-box, .gr-top and .gr-body from the above  

    ,  
    and


    This is how skins are made in deviantART! (By editing the pre-defined classes of dA and sometimes including your own classes)







    How to code your first journal skin
    Now, since you understood how to go about editing the selectors (or classes) of deviantART lets go ahead and create a very basic skin.

    Below is the skin that we will create:



    Let's start!

    Open your new journal entry page and paste the     Lorem Ipsum in the journal text area and click on "Edit Skin".

    New deviantART journal window Tip:


    Select HTML mode to insert your text and HTML tags. Otherwise if you insert your HTML tags in the Rich text mode you may get undesirable results.



    After you have clicked on "Edit Skin" enter the following CSS code in the CSS area and then enter you desired skin name and save the skin. Don't worry! I'll explain what you have just entered.


    .gr-box *
    {
    background:transparent;
    border:0;
    margin:0;
    padding:0;
    }
    .gr-top h2 img, .gr1, .gr2, .gr3, .tri, .gr3.gb, .gr2.gb, .gr1.gb
    {
    display:none;
    }
    .gr-box
    {
    background:#efffc0 ;
    border-radius:5px;
    border:1px solid #aacd41 ;
    }
    .gr-top
    {
    background:#fdffec ;
    border-bottom:1px solid #aacd41 ;
    height:50px;
    padding-top:10px;
    }
    .gr-top .gr
    {
    margin-left:-10px;
    }
    .gr-top h2, .gr-top h2 a
    {
    color:#ff589f ;
    font-family:Times new roman;
    font-size:24px;
    }
    .gr-top span
    {
    color:#9f9f9f ;
    }
    .gr-body .text
    {
    padding-top:20px;
    padding-left:20px;
    padding-right:20px;
    }
    .gr-body .list
    {
    background:#fdffec ;
    border-top:1px solid #aacd41 ;
    padding:10px;
    }
    .gr-body .list .f.a
    {
    background:#fdffec ;
    }


    What have you just entered?

    DA's journal skin is divided into two main parts: .gr-top and .gr-body and there are .gr1, .gr2, .gr3, etc. which mainly controls the shine effect in corners of the new default skin of DA.

    Step 1: Reset the skin

    As you have understood from the above, deviantART has a default skin for your journal. So, in order to create a new skin we need to reset every element of the skin. The best way to do that is by using the star (*) selector. The star (*) selector basically applies the CSS to all it's child selectors (or classes). Hence, I have reset the background, border, margin and padding of the whole journal to "nothing" by applying it to the .gr-box *

    .gr-box *
    {
    background:transparent;
    border:0;
    margin:0;
    padding:0;
    }

    Step 2: Apply style the skin

    This step is actually the "creative side" and "technical understanding" of your skin. This is the step which differentiates one skin from the other. You can do infinite number of things here. However, for our understanding I'll be just sticking to the above codes so that you understand the basics and then experiment it yourself.

    An expert's tip:


    The best way to learn CSS is by experimenting with the elements that you are styling. Try to learn new things from other skins/tutorials and check how elements are manipulated. Learn new properties and attibutes and apply your understanding.

    We have removed certain classes from our skin by the following rule. In the below rule you can see that I have assigned the declaration display:none; to all the selectors by separating them with commas.

    .gr-top h2 img, .gr1, .gr2, .gr3, .tri, .gr3.gb, .gr2.gb, .gr1.gb
    {
    display:none;
    }


    For our demo skin we have done the following in the .gr-box

    .gr-box
    {
    background:#efffc0 ;
    border-radius:5px;
    border:1px solid #aacd41 ;
    }


    Here we have created a declaration to change the background color by using background:#efffc0 ; and then we made the corners rounded by using border-radius:5px; and applied a border of 1px width and of solid color using border:1px solid #aacd41 ;

    In the .gr-top selector we have changed the background and gave it a border at the bottom and set the height to fixed 50px. The padding-top was used to push down the content inside it.

    .gr-top
    {
    background:#fdffec ;
    border-bottom:1px solid #aacd41 ;
    height:50px;
    padding-top:10px;
    }


    We have also edited some of the child classes of .gr-top namely .gr, h2(the journal title), h2 a(the hyperlink of journal title) and span (the date) by changing the font-size, font-family and colors.

    .gr-top .gr
    {
    margin-left:-10px;
    }
    .gr-top h2, .gr-top h2 a
    {
    color:#ff589f ;
    font-family:Times new roman;
    font-size:24px;
    }
    .gr-top span
    {
    color:#9f9f9f ;
    }


    Finally we have edited some of the child classes of .gr-body namely .text(the journal text area) and .list(the moods area) by changing the border style and color, padding and background colors.

    .gr-body .text
    {
    padding-top:20px;
    padding-left:20px;
    padding-right:20px;
    }
    .gr-body .list
    {
    background:#fdffec ;
    border-top:1px solid #aacd41 ;
    padding:10px;
    }
    .gr-body .list .f.a
    {
    background:#fdffec ;
    }


    Hope you enjoyed this tutorial!


    I am a free customization resource provider for the deviantART community. If you like my free customization resources you can donate some points to me as an appreciation or support.

    I take commissions to make custom journal/gallery CSS too. Check out my CSS Skins folder . Send me a note to contact me.






    Skin copyright © CypherVisor

    Related content

    CypherVisor - Button - Slide Arrow

    CypherVisor - Button - Slide Diagonal Background

    CypherVisor - The Ladder Gallery Icons

    CypherVisor - Circular Profile Menu - Template

    CypherVisor - Fransis PREIMUM Skin (with cool CSS3 features)

    [ TEXT ]


    CypherVisor - Wtf is wrong with status updates??

    [ TEXT ]


    CypherVisor - Sorry for disappearing! + Core Giveaway

    [ TEXT ]


    CypherVisor - CustomizeDeviantART.com BETA Launch

    [ TEXT ]


    CypherVisor - TROLOLOLOLOLO
    Comments: 524

    Miracat In reply to ??? [2013-12-22 14:38:34 +0000 UTC]

    okey... I think I explained it badly.... well... if I want a picture to be in the background... do I have to uplad it and put the url somewhere into the code or how do i manage that?

    👍: 0 ⏩: 2

    CypherVisor In reply to Miracat [2013-12-29 10:15:25 +0000 UTC]

    You can check this tutorial and skip to the part where you upload a pic and get the image link.

    👍: 0 ⏩: 1

    Miracat In reply to CypherVisor [2013-12-29 10:25:12 +0000 UTC]

    thanks so much

    👍: 0 ⏩: 1

    CypherVisor In reply to Miracat [2013-12-29 10:30:38 +0000 UTC]

    sorry the link is here: cyphervisor.deviantart.com/art…

    👍: 0 ⏩: 1

    Miracat In reply to CypherVisor [2013-12-29 11:00:16 +0000 UTC]

    Yes, I knew that one it´s great!

    👍: 0 ⏩: 0

    Ilovesouthparkyaoi In reply to Miracat [2013-12-22 15:13:54 +0000 UTC]

    Ah,I believe I can explain. If I understand correctly,you would like to know where you get the URL to put it in your code,so it'll appear as the background image on your Journal Skin?


    It's quite simple,actually.


    Go to either


    Tinypic.com

    Imageshack.us

    photobucket.com


    After you are at one of the locations; upload your image and copy the Tinypic: 'IMG Code for Forums & Message Boards' ((Make sure to remove the [IMG] & [/IMG] tags)) Imageshack: Copy the Image URL Photobucket: I'm not entirely sure... Probably the same as Imageshack.


    After that you have to paste it as shown..


    Ex: url({YOUR URL HERE}); <--- This code should appear somewhere when you edit or make a skin,just look for it.


    Here's a full blank code.



    .journalbox {
       border:  #000;
       border-radius: 00px;
       max-width: 000px;
       height:000px;
       background-color:transparent;
       border-style: 0px ridge;
       background-image: url( {Your URL here} ); "((<--- Here's the code I mentioned {Remove this if you use as a skin... It's limited by " & "))"
       background-repeat: no-repeat;
       text-align: center;
       font-family:  Times;
    }
    .journalbox .list li {
    text-align: center;
    font-family: Georgia, serif;
    font-size: 11px;
    padding: 2px;


       background-color: transparent !important;
       color: #FFFFFF !important;
    }

    .journalbox .list li.a {
       background-color: transparent !important;
       color: ##000000 !important;
    }

    .journaltop {
       background-color: transparent;
       color: #FFFFFF;
       display:block;
       text-shadow:0 0 20px #5CB3FF,0 0 10px #5CB3FF,0 0 5px #5CB3FF;
       background-position: middle center;
       background-repeat: no-repeat;
       height: 0px;
       text-align: center !important;
       font-family:Georgia, serif;
       padding-top: 100px
    }
    .journalbox h2 {
    color: #000000;
    text-shadow:0 0 20px #FFFFFF,0 0 10px #FFFFFF,0 0 5px #FFFFFF;
    font: bold 200%/100%  
    overflow: auto none;
    font-weight:normal;
    background-color: transparent;
    font-family: Georgia, serif;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: center;
    padding: 10px 0px 0px 0px;
    font-size:200%;
    }
    .text strong {
    color:#000000;
    font-family: tahoma;
    display: block;
    font: bold 200%/100%  
    overflow: auto none;
    font-weight:bold;
    text-shadow:0 0 20px #FFFFFF,0 0 10px #FFFFFF,0 0 5px #FFFFFF;
    background-color: transparent;
    font-size: 15px;
    text-align: center;
    padding-bottom: 1px;

    }
    .text p{
    color: #000000;
    font-size: 11px;
    font-family: Tahoma;
    text-align: center;
    text-shadow: #FFFFFF 1px 1px 1px;
    background-color:#ffffff;
    margin: 0px 21px 0px 21px;
    border:1px dashed #FFFFFF;
    padding:10px;
    -moz-border-radius: 10px;
    }
    .journaltop img
    {
    display: none;
    }

    .thumbs{text-align: center;}

    .thumbs img{
    width:75px;
    height:75px;
    opacity: 0.70;
    padding: 5px;
    border-radius: 7px;
    border: 1px dashed #FFFFFF;}

    .thumbs img:hover{
    opacity: 50;
    background: #34CDD5;
    border: 1px dashed #fff;}

    .journaltext
    {
       padding-top: 0px;
       padding-left: 255px;
       text-align: justify;
    }
    .journalbox .journaltext b {
    color:#000000;
    font-family:Lucida Console;
    font-size:13px;
    font-weight:bold;
           text-transform:none;
    text-decoration:none;
    }
    .journalbox .journaltext u {
    text-decoration: italic;
    color:#000000;
       
    font-family: Lucida Console;
    font-size:12px;
    font-weight: bold;
    }
    .journalbox .journaltext i {
    color:#00000;
         
    font-family:Lucida Console;
    font-size:11px;
    font-weight:italic;
           text-transform:none;
    text-decoration:none;
    }
    .journaltext a
    {
    color: #000000;
    font-family: Lucida Console;
    font-weight:bold;
    text-decoration: none;
    }
    .journaltext a:hover
    {
    color: #FFFFFF;
    text-decoration: underline;

    }
    .mainbox {
    position:relative;
    overflow:auto;
    width:330px;
    height:450px;
    text-align:left;
    background:transparent;
    border:0px solid #FFFFFF;
           font-family:font-family:  Georgia, serif;;
           padding: 50px 50px 50px 50px;
    }
    .journalbox .journalbottom {
       font-family: Lucida Console;
       font-size: 11px;
       color: #FFFFFF;
       text-decoration: bold;
       font-weight: bold;
       padding-left: 180px;
       padding-bottom: 40px;
    }
    .journalbottom a
    {
    font-family: Georgia, serif;
    font-size: 11px;
    color: #FFFFFF;
    text-decoration: bold;
    font-weight: bold;
    }
    .journalbottom a:hover
    {
    color: #FFFFFF;
    text-decoration: underline;
    }


    ((Note that there are many different codes))


    Hope I helped.



        

    👍: 0 ⏩: 1

    Miracat In reply to Ilovesouthparkyaoi [2013-12-22 16:27:29 +0000 UTC]

    Oh thanks! i´ll try!

    👍: 0 ⏩: 0

    dragoniteon In reply to ??? [2013-11-30 17:19:23 +0000 UTC]

    I don't really get how the .gr works... can you explain? ;w;

    👍: 0 ⏩: 1

    CypherVisor In reply to dragoniteon [2013-12-04 06:37:21 +0000 UTC]

    the .gr class is present under both the .gr-top and .gr-body classes.

    Hence if you want to control the .gr class of the top then you need to write like this:

    .gr-top .gr
    {
    ..
    }

    And similarly the below code will control the .gr of the body class,

    .gr-body .gr
    {
    ..
    }


    If you just write the below then it will affect both the classes under top and body class.

    .gr
    {
    ..
    }

    👍: 0 ⏩: 0

    Tigermint In reply to ??? [2013-11-30 06:18:40 +0000 UTC]

    This is perfect, finally what I needed! Thank you!

    👍: 0 ⏩: 1

    CypherVisor In reply to Tigermint [2013-12-04 06:32:44 +0000 UTC]

    Cool! Glad you found it useful.

    👍: 0 ⏩: 0

    JirouNamakii In reply to ??? [2013-11-28 03:51:42 +0000 UTC]

    So do I hadto do all that?

    👍: 0 ⏩: 1

    CypherVisor In reply to JirouNamakii [2013-12-04 06:32:25 +0000 UTC]

    Yeah...

    👍: 0 ⏩: 1

    JirouNamakii In reply to CypherVisor [2013-12-04 23:14:02 +0000 UTC]

    Aww

    👍: 0 ⏩: 0

    DABZEN In reply to ??? [2013-11-26 19:15:52 +0000 UTC]

    Gotta try this when i'm on my computer. I have costumized my profile a little thanks to your tutorials.

    👍: 0 ⏩: 1

    CypherVisor In reply to DABZEN [2013-12-04 06:34:12 +0000 UTC]

    Sure thing!

    And that's cool!

    👍: 0 ⏩: 0

    AnEclipseAtdusk In reply to ??? [2013-11-22 18:41:02 +0000 UTC]

    lol I dont get any of this im such a noob at coding

    👍: 0 ⏩: 1

    CypherVisor In reply to AnEclipseAtdusk [2013-11-24 13:46:01 +0000 UTC]

    👍: 0 ⏩: 1

    AnEclipseAtdusk In reply to CypherVisor [2013-11-27 18:24:31 +0000 UTC]

    lol, I want to learn it though...or at least the basics

    👍: 0 ⏩: 1

    CypherVisor In reply to AnEclipseAtdusk [2013-11-28 07:12:56 +0000 UTC]

    Experimenting is the key! Just keep doing something something with the codes and I am sure you'll learn something new every hour you spend!

    👍: 0 ⏩: 1

    AnEclipseAtdusk In reply to CypherVisor [2013-11-29 22:08:17 +0000 UTC]

    Okay Thanks XD But I dont know how to even make that black window pop up on the screen... The one you're supposed to write the code into

    👍: 0 ⏩: 1

    CypherVisor In reply to AnEclipseAtdusk [2013-12-03 12:56:40 +0000 UTC]

    You just goto your sta.sh writer page and click on "edit skin" on the media bar (on the right hand side).

    👍: 0 ⏩: 0

    ArtemisArchery In reply to ??? [2013-11-18 18:14:36 +0000 UTC]

    how did you make the black squares on your skin

    👍: 0 ⏩: 1

    CypherVisor In reply to ArtemisArchery [2013-11-18 21:29:48 +0000 UTC]

    You mean to say the background? If yes, then that is just a background pattern image that I made.

    👍: 0 ⏩: 0

    Fluffuu In reply to ??? [2013-11-18 13:39:17 +0000 UTC]

    Are there certain fonts that you need to enter, or can you get creative with fonts??

    I'm just curious because I'm starting to learn to code and I have no idea if your allowed to use a specific type of font, or not.

    👍: 0 ⏩: 1

    CypherVisor In reply to Fluffuu [2013-11-18 21:30:54 +0000 UTC]

    You can just use all web safe fonts plus all google fonts from here: www.google.com/fonts/

    👍: 0 ⏩: 1

    Fluffuu In reply to CypherVisor [2013-11-18 21:57:41 +0000 UTC]

    Yes I figured it out. ; v ;

    Thanks~!

    👍: 0 ⏩: 1

    CypherVisor In reply to Fluffuu [2013-11-19 12:43:14 +0000 UTC]

    Cool!

    👍: 0 ⏩: 0

    Chitterhoots In reply to ??? [2013-11-11 02:20:22 +0000 UTC]

    can u help me with coding plz?
    I know the tut is right in front of my eyes but I don't get this kind of stuff =A=
    I tried it on my profile and it just....turned out....BLOB XDD

    👍: 0 ⏩: 1

    CypherVisor In reply to Chitterhoots [2013-11-11 15:00:24 +0000 UTC]

    Well, in general coding coding mean the world

    Anything specific you want to know about?

    👍: 0 ⏩: 1

    Chitterhoots In reply to CypherVisor [2013-11-16 16:16:48 +0000 UTC]

    well,I try to put my new journal skin on,but it gets too big DX
    and I don know how to code so I got the journal coding from someone else,but it still doesn't work! .O.

    👍: 0 ⏩: 1

    CypherVisor In reply to Chitterhoots [2013-12-29 10:19:47 +0000 UTC]

    Can you show me the skin? (perhaps the code) I really can't say what's wrong without looking at the code.

    👍: 0 ⏩: 1

    Chitterhoots In reply to CypherVisor [2013-12-29 19:00:29 +0000 UTC]

    oh sorry I got it fixed already,but thanks! ^u^

    👍: 0 ⏩: 1

    CypherVisor In reply to Chitterhoots [2013-12-29 19:13:51 +0000 UTC]

    okay!

    👍: 0 ⏩: 0

    TheLeadBasedDesign In reply to ??? [2013-11-02 00:01:26 +0000 UTC]

    Am I the only one who thinks that dA should change the system in which you make journal skins?

    👍: 0 ⏩: 2

    koolcatloveanimals In reply to TheLeadBasedDesign [2013-11-16 03:38:12 +0000 UTC]

    or everything in fact?? jesus why codes?! just make buttons for customization for us like normal sites ;w;

    👍: 0 ⏩: 0

    CypherVisor In reply to TheLeadBasedDesign [2013-11-11 15:01:03 +0000 UTC]

    It is kinda difficult to code skins in DA actually. I believe a new and better system could be put into place.

    👍: 0 ⏩: 0

    SJ-Himiko-Minuit In reply to ??? [2013-10-27 17:51:43 +0000 UTC]

    How do you add pictures to the top of the journal , and scrolling .
    Sorry to bother you ,I just get confused with my vision being poor.

    👍: 0 ⏩: 1

    CypherVisor In reply to SJ-Himiko-Minuit [2013-10-28 12:23:02 +0000 UTC]

    There are different ways to add an image on your header.

    The simplest way that you could do that would be using the following:

    .gr-top
    {
    background:url("YOUR_IMAGE_URL");
    }

    And if you want to add scroll bar then you need to first restrict the size of your journal. The simplest way to do that would be to add the following line:

    .text
    {
    height:500px;
    overflow:auto;
    }

    Check the w3school.com for more information on overflow property here: www.w3schools.com/cssref/pr_po…

    Hope this helps!

    All the best!

    👍: 0 ⏩: 2

    koolcatloveanimals In reply to CypherVisor [2013-11-21 03:29:02 +0000 UTC]

    this doesnt seem to work for me

    👍: 0 ⏩: 1

    CypherVisor In reply to koolcatloveanimals [2013-12-22 15:07:02 +0000 UTC]

    Hmm

    👍: 0 ⏩: 0

    SJ-Himiko-Minuit In reply to CypherVisor [2013-10-28 13:37:33 +0000 UTC]

    Thanks I already figured it out .
    I am sure this will help others though.

    👍: 0 ⏩: 1

    CypherVisor In reply to SJ-Himiko-Minuit [2013-12-22 15:06:41 +0000 UTC]

    cool!

    👍: 0 ⏩: 0

    likelakers22 In reply to ??? [2013-10-26 19:59:10 +0000 UTC]

    I know this is about CSS, but apparently anchor links work on deviantART too. I assume this was intended for linking to the comments section, but I've found it useful as a table of contents for a journal.

    👍: 0 ⏩: 1

    CypherVisor In reply to likelakers22 [2013-10-27 14:14:29 +0000 UTC]

    Yes, it works..

    And yes, that is nifty trick to jump into your journal section.

    👍: 0 ⏩: 1

    likelakers22 In reply to CypherVisor [2013-10-28 19:16:24 +0000 UTC]

    Apparently the webcam on profiles doesn't have an anchor though. :/

    👍: 0 ⏩: 1

    CypherVisor In reply to likelakers22 [2013-10-29 12:32:16 +0000 UTC]

    It should have one. I didn't check though.

    👍: 0 ⏩: 1

    likelakers22 In reply to CypherVisor [2013-10-29 20:06:15 +0000 UTC]

    It DOES, but not a consistant one...

     


    This is my profile's HTML for the webcam. That gmi-GMFrame-Gruser seems to be reused for each widget, meaning it's NAME and ID fields are useless. The only other NAME or ID field I can find is in a div tag, labeled 859184574, and yes it does work .


    Here's the one for someone else's webcam. (namely, Intortus-aedo's webcam) As you can see, the ID field in the div tag is 781982029, showing that while this can be used as a shortcut to one's webcam, it doesn't appear to be consistant across profiles.

    👍: 0 ⏩: 1

    CypherVisor In reply to likelakers22 [2013-12-29 11:19:29 +0000 UTC]

    Oh that's cool! Thanks for the share.

    👍: 0 ⏩: 1

    likelakers22 In reply to CypherVisor [2013-12-29 22:08:30 +0000 UTC]

    No problem.

    👍: 0 ⏩: 0


    <= Prev | | Next =>