HOME | DD

CypherVisor — Journal {CSS} Guide - Beginners
Published: 2013-07-14 16:18:23 +0000 UTC; Views: 91946; 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

    4LadyLilian In reply to ??? [2014-09-30 16:37:56 +0000 UTC]

       I try but I can not    

    👍: 0 ⏩: 1

    CypherVisor In reply to 4LadyLilian [2014-10-06 18:38:10 +0000 UTC]

    Oh! I do commission for skins btw. If you are interested then I can create one for you.

    👍: 0 ⏩: 0

    bmliam In reply to ??? [2014-09-24 00:39:26 +0000 UTC]

    great work, a lot of effort here to explain this.I know css a bit amd html5, but rusty but i was not at all clear on what dA lets you customise.

    👍: 0 ⏩: 1

    CypherVisor In reply to bmliam [2014-09-24 14:45:33 +0000 UTC]

    Thanks.

    And yes, DA css is little tricky because you have to play with existing DA HTML tags and then manipulate them.

    👍: 0 ⏩: 0

    acceI [2014-09-22 09:30:09 +0000 UTC]

    i'm really awful with coding and describing, so im gonna try to describe as best as i can
    say you wanted to have your text container be semitransparent, but not the content, so that it was obviously different from the actual background

    how would you go about that?

    👍: 0 ⏩: 1

    CypherVisor In reply to acceI [2014-09-22 18:25:40 +0000 UTC]

    Lets say for example you want the class mybox to be your text container then use the following code

    .mybox
    {
    background:rgba(0,0,0,.5);
    color:white;
    }

    Here rgba has an alpha channel i.e. the transparency, in the above example I made it half transparent (0.5 is half, 1 is full opaque and 0 is full transparent). And the font color to be white.

    👍: 0 ⏩: 0

    Cypher-Boss [2014-09-19 06:22:48 +0000 UTC]

    This was an awesome tutorial ^^

    Although, how do you upload it to dA again? I knew, but I've forgotten......any chances you know? ^^

    👍: 0 ⏩: 1

    CypherVisor In reply to Cypher-Boss [2014-09-19 15:51:40 +0000 UTC]

    1) Goto your sta.sh writer
    2) Select default skin (none)
    3) Click "edit skin"
    4) Insert your codes and save it
    5) When writing your journal select the saved skin and use it

    👍: 0 ⏩: 2

    Cypher-Boss In reply to CypherVisor [2014-09-19 20:55:18 +0000 UTC]

    Thank you ^^
    But I mean in the way other people can download it as well, and use it ^^

    👍: 0 ⏩: 1

    CypherVisor In reply to Cypher-Boss [2014-09-20 15:40:08 +0000 UTC]

    Just search how to upload skins in DA. You'll be able to find one

    👍: 0 ⏩: 1

    Cypher-Boss In reply to CypherVisor [2014-09-20 21:10:11 +0000 UTC]

    ah! XD thnx tho

    👍: 0 ⏩: 0

    Cypher-Boss In reply to CypherVisor [2014-09-19 20:40:59 +0000 UTC]

    Thanx ^^

    👍: 0 ⏩: 0

    royal-regius In reply to ??? [2014-09-11 00:29:20 +0000 UTC]

    This is probably the most helpful tutorial I've seen : D Thank you for making this!
    Though I do have one question: How do you change the color, size, and font of the text in the "current status" section? (The mood, listening to, etc.) I've tried adding "font-family:Arial; font-size:13px;" to ".gr-body .list" and ".gr-body .list .f.a" but it doesn't seem to be working.
    Thank you in advance! : )

    👍: 0 ⏩: 1

    CypherVisor In reply to royal-regius [2014-09-17 19:38:18 +0000 UTC]

    Thanks! I am glad that you liked it!

    And you can change the mood section style by doing the following:

    .f
    {color:#fff;

    font-size:16px;

    font-family:Verdana;
    }

    👍: 0 ⏩: 1

    royal-regius In reply to CypherVisor [2014-09-17 21:46:18 +0000 UTC]

    Thank you very much! : )

    👍: 0 ⏩: 1

    CypherVisor In reply to royal-regius [2014-09-18 11:33:09 +0000 UTC]

    yw

    👍: 0 ⏩: 0

    TheRealBlackLion In reply to ??? [2014-09-09 14:05:41 +0000 UTC]

    How do I add links in the top to for example for commission info, note me ......? :3

    👍: 0 ⏩: 1

    CypherVisor In reply to TheRealBlackLion [2014-09-17 19:35:06 +0000 UTC]

    You can use the tag to put links and customize them using CSS. However, it is hard to explain in words..

    👍: 0 ⏩: 1

    TheRealBlackLion In reply to CypherVisor [2014-09-21 13:22:25 +0000 UTC]

    I think it helps! Thank you

    👍: 0 ⏩: 1

    CypherVisor In reply to TheRealBlackLion [2014-09-21 14:59:44 +0000 UTC]

    Yw

    👍: 0 ⏩: 0

    Coykat In reply to ??? [2014-09-06 03:45:26 +0000 UTC]

    How do you put a black border just around a text box in the journal? .3.

    👍: 0 ⏩: 1

    CypherVisor In reply to Coykat [2014-09-06 21:26:05 +0000 UTC]

    You can use the border property in CSS:

    Example:

    border:1px solid #000;

    👍: 0 ⏩: 1

    Coykat In reply to CypherVisor [2014-09-06 21:50:48 +0000 UTC]

    Ah! Thank you! ^^

    👍: 0 ⏩: 1

    CypherVisor In reply to Coykat [2014-09-21 20:09:02 +0000 UTC]

    yw

    👍: 0 ⏩: 0

    kateran In reply to ??? [2014-09-03 18:56:30 +0000 UTC]

    Why is it I feel as if I need a college degree.... just in order to comprehend lol XD . This is going to take a lot of practice 

    👍: 0 ⏩: 1

    CypherVisor In reply to kateran [2014-09-06 21:34:16 +0000 UTC]

    Lol.

    it is not that hard too. You should wait a bit. I am going to upload video tutorials soon!

    👍: 0 ⏩: 1

    kateran In reply to CypherVisor [2014-09-07 23:00:24 +0000 UTC]

    I. Love. You

    👍: 0 ⏩: 1

    CypherVisor In reply to kateran [2014-09-21 20:08:40 +0000 UTC]

       

    👍: 0 ⏩: 0

    BitchGemma In reply to ??? [2014-08-23 20:11:42 +0000 UTC]

    Thank you!

    👍: 0 ⏩: 1

    CypherVisor In reply to BitchGemma [2014-08-23 21:41:07 +0000 UTC]

    yw

    👍: 0 ⏩: 0

    sweetiebelle22 [2014-07-28 22:52:52 +0000 UTC]

    Is this for non premium members as well? :/

    👍: 0 ⏩: 2

    CypherVisor In reply to sweetiebelle22 [2014-07-31 16:41:25 +0000 UTC]

    Journal/Gallery skin can be only used by PMs. However, you can surely code CSS skin but only thing is that you can't use them in your page if you are not PM.

    👍: 0 ⏩: 1

    sweetiebelle22 In reply to CypherVisor [2014-07-31 16:51:10 +0000 UTC]

    Oh I see. Okay, thank you. ^^

    👍: 0 ⏩: 1

    CypherVisor In reply to sweetiebelle22 [2014-08-16 15:36:51 +0000 UTC]

    yw

    👍: 0 ⏩: 0

    Lumented In reply to sweetiebelle22 [2014-07-30 00:01:01 +0000 UTC]

    You have to be premium to have any sort of custom journal, regardless of if you code it yourself or not. Sorry.

    👍: 0 ⏩: 1

    sweetiebelle22 In reply to Lumented [2014-07-30 00:04:57 +0000 UTC]

    Oh I see. Okay.

    👍: 0 ⏩: 1

    Lumented In reply to sweetiebelle22 [2014-07-30 00:09:59 +0000 UTC]

    Hope I helped a little!

    👍: 0 ⏩: 1

    sweetiebelle22 In reply to Lumented [2014-07-30 00:10:46 +0000 UTC]

    You did! ^_^

    👍: 0 ⏩: 0

    ArtisticJessy In reply to ??? [2014-07-28 15:13:51 +0000 UTC]

    I dont know if I just didnt read it, but how can I get a CSS code of a self made journal skin (PNG or JPEG) ?

    👍: 0 ⏩: 1

    CypherVisor In reply to ArtisticJessy [2014-07-28 15:36:02 +0000 UTC]

    If you goto your journal edit page there you can click on "edit skin". There you can get your journal skin CSS.

    👍: 0 ⏩: 1

    ArtisticJessy In reply to CypherVisor [2014-07-28 15:54:25 +0000 UTC]

    No it says I need to enter the journal CSS there...and thats the Problem, I dont know how to get it

    👍: 0 ⏩: 1

    CypherVisor In reply to ArtisticJessy [2014-08-16 22:24:44 +0000 UTC]

    You are trying to edit a skin or create a skin?

    👍: 0 ⏩: 1

    ArtisticJessy In reply to CypherVisor [2014-08-17 08:22:38 +0000 UTC]

    I drew a skin, now I need to know where do I get it's CSS code from?

    👍: 0 ⏩: 1

    CypherVisor In reply to ArtisticJessy [2014-08-17 09:23:58 +0000 UTC]

    Okay, you mean you created a skin design and now want to code it? If yes, then just goto your journal entry page (sta.sh writer) and select the default skin. Now, click on "edit skin" and start typing your CSS in the CSS area to code your skin.

    👍: 0 ⏩: 1

    ArtisticJessy In reply to CypherVisor [2014-08-17 09:34:26 +0000 UTC]

    My CSS? I dont know any CSS codes or....I dont know what to type at all O___o

    Do you have Skype maybe? Then you could help me better ^^"

    👍: 0 ⏩: 1

    CypherVisor In reply to ArtisticJessy [2014-08-17 10:54:00 +0000 UTC]

    To write CSS code you need to first learn it. This journal teaches you the basics of HTML and CSS.

    Yes, I have skype. However, I don't know how can I help you there. You need to know CSS coding and it is then you will be able to make skins.

    👍: 0 ⏩: 1

    ArtisticJessy In reply to CypherVisor [2014-08-17 11:47:58 +0000 UTC]

    But if I drew a skin, how am I supposed to code it!?

    👍: 0 ⏩: 1

    CypherVisor In reply to ArtisticJessy [2014-08-17 13:16:21 +0000 UTC]

    Well, it's not a one comment answer. There is much to it.

    You need to know how web designs are sliced, how they are positioned images using codes, how to work with different tags, attributes, properties, etc.

    I suggest you go through journal skin tutorials to understand how to create skins.

    👍: 0 ⏩: 0

    wolvenlied1989 In reply to ??? [2014-07-25 21:50:14 +0000 UTC]

    the most thorough and helpful css guide for deviantArt I've found so far. Thanks !!

    👍: 0 ⏩: 1

    CypherVisor In reply to wolvenlied1989 [2014-07-26 02:38:34 +0000 UTC]

    Thanks!

    I am glad that you found this helpful!

    👍: 0 ⏩: 0


    <= Prev | | Next =>