HOME | DD

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

    diyahart In reply to ??? [2014-03-31 13:15:18 +0000 UTC]

    Oh I didn't code it, my sister did.
    So I really have no idea what to do.

    👍: 0 ⏩: 1

    CypherVisor In reply to diyahart [2014-03-31 17:37:18 +0000 UTC]

    Hmm okay.

    👍: 0 ⏩: 0

    Hasil42 In reply to ??? [2014-03-30 22:39:36 +0000 UTC]

    Oh my GOSH, this is beautiful!
    I should have seen this alot time ago, because it´s awesome.
    Great guide!!!

    👍: 0 ⏩: 1

    CypherVisor In reply to Hasil42 [2014-03-31 10:56:27 +0000 UTC]

    Thanks, I am glad that I helped you out!

    👍: 0 ⏩: 0

    artbymba In reply to ??? [2014-03-14 08:33:07 +0000 UTC]

    This is one of best tutorials ever.

    👍: 0 ⏩: 1

    CypherVisor In reply to artbymba [2014-03-15 12:37:20 +0000 UTC]

    Thanks..

    👍: 0 ⏩: 1

    artbymba In reply to CypherVisor [2014-03-15 13:04:08 +0000 UTC]

    No, thanks to you. I have learned everything about css from deviantart tutorials; and at the very beginning this one was the most useful one for me; who used to have no idea about even simple html codes.
    It is also appealing to eye; easy to read.

    👍: 0 ⏩: 1

    CypherVisor In reply to artbymba [2014-03-15 14:09:35 +0000 UTC]

    Ah! Thank you so much! I am glad that I was a help to you on learning CSS

    👍: 0 ⏩: 0

    meekowdesigns In reply to ??? [2014-03-09 22:43:45 +0000 UTC]

    can I ask a question, where can I upload the images in my css, I mean, I created my own repeatable pattern for header, where can I upload it ?

    👍: 0 ⏩: 1

    CypherVisor In reply to meekowdesigns [2014-03-15 12:40:28 +0000 UTC]

    Well, there are many ways you can do that.

    The easiest perhaps would be following this: www.w3schools.com/cssref/pr_ba…

    In the above link you need to use the journal body classes such as .gr-box, .gr-body, .gr-top to change the background.

    And you can simply upload your image in your sta.sh and use it.

    👍: 0 ⏩: 1

    meekowdesigns In reply to CypherVisor [2014-03-16 04:39:20 +0000 UTC]

    thanks for this

    👍: 0 ⏩: 1

    CypherVisor In reply to meekowdesigns [2014-03-16 05:16:29 +0000 UTC]

    np

    👍: 0 ⏩: 0

    onlytheecho-pics In reply to ??? [2014-03-04 04:05:18 +0000 UTC]

    In the Skin footer I pasted a HTML code of a picture but I'd like it to be on the right side of my journal but can't seem to make it work? :C
    Is there I a way for me to fix it or..?

    👍: 0 ⏩: 1

    CypherVisor In reply to onlytheecho-pics [2014-03-15 12:41:51 +0000 UTC]

    You can use the following to align your image:

    👍: 0 ⏩: 0

    Watolf In reply to ??? [2014-02-23 23:02:16 +0000 UTC]

    Hello~! I was wondering, how does it work if I wants to set up the journal background stay there while the mouse hovering down the scroll bar from right at very edge of screen? 



    I'm sorry that my English are second language if it's not make any sense, you can ask me what I'm mean by that? 

    👍: 0 ⏩: 1

    CypherVisor In reply to Watolf [2014-02-24 11:42:42 +0000 UTC]

    You need to use the background-attachment:fixed; property to fix your bg and then when you scroll using your mouse it'll stay there.

    👍: 0 ⏩: 0

    DestinyRose09 In reply to ??? [2014-02-18 15:02:36 +0000 UTC]

    I'm curious; what font did you use for this journal? Lol

    👍: 0 ⏩: 1

    CypherVisor In reply to DestinyRose09 [2014-02-18 16:11:24 +0000 UTC]

    I think it's the "Noto Serif"

    👍: 0 ⏩: 2

    DestinyRose09 In reply to CypherVisor [2014-02-18 16:16:38 +0000 UTC]

    Thanks

    👍: 0 ⏩: 1

    CypherVisor In reply to DestinyRose09 [2014-02-18 16:57:03 +0000 UTC]

    np

    👍: 0 ⏩: 0

    DestinyRose09 In reply to CypherVisor [2014-02-18 16:15:35 +0000 UTC]

    thanks! ^_^

    👍: 0 ⏩: 0

    kofucha In reply to ??? [2014-02-08 03:47:49 +0000 UTC]

    Is there any free journal CSS that we dont have to buy premium member?? ;A;


    //hope fully

    👍: 0 ⏩: 1

    CypherVisor In reply to kofucha [2014-02-08 20:45:11 +0000 UTC]

    There is no concept as such in DA. If you want to use ANY skin in DA you need to have premium membership.

    👍: 0 ⏩: 1

    kofucha In reply to CypherVisor [2014-02-08 23:25:00 +0000 UTC]

    But a year ago I found a free journal CSS themed Christmas from one of the official member of dA *I thought* and its able to use without premium membership.

    * I wonder, have you ever heard it? Its exactly on 2012*


    But now I moved my account so I lost it D:

    👍: 0 ⏩: 1

    CypherVisor In reply to kofucha [2014-02-10 15:26:47 +0000 UTC]

    Nah. I guess that was a special promotion of some sort.

    👍: 0 ⏩: 1

    kofucha In reply to CypherVisor [2014-02-11 08:13:28 +0000 UTC]

    ah okay..

    thank you anyway!

    👍: 0 ⏩: 1

    CypherVisor In reply to kofucha [2014-02-11 10:50:12 +0000 UTC]

    np

    👍: 0 ⏩: 0

    TamilaB In reply to ??? [2014-01-29 12:39:07 +0000 UTC]

    Hello there!

    I would like to customize my things and I already know how css works but I can't seem to find the html reference for it... Could you help me out? Where did you find it?  
    (Sorry if this was already asked, I didn't see it in the comments...)

    👍: 0 ⏩: 1

    CypherVisor In reply to TamilaB [2014-01-31 12:09:31 +0000 UTC]

    By HTML reference what do you mean?

    👍: 0 ⏩: 1

    TamilaB In reply to CypherVisor [2014-02-15 11:16:47 +0000 UTC]

    Well, maybe I'm totally out of the picture here, but normally you code HTML first, and than link a CSS sheet to it (or embed it into the HTML doc) - I can only access the ''Skin CSS'' with DA, so how am I suppose to know what the CSS code is referring to? 

    I need the name of an item to link it to its CSS attributes, no?

    Example:

    [styles.css]
    textabc {

    color: red;
    }


    ---is linked to---


    [index.html]

    Hello World!


    ______


    So "Hello World!" will print red. 
    But if I don't the name of the class/ID written in the HTML or can I know what to write for the CSS to work??





    👍: 0 ⏩: 1

    CypherVisor In reply to TamilaB [2014-02-18 16:10:28 +0000 UTC]

    Well, okay, let me explain it to you.

    Our profile page is divided in number of

    classes which holds each widgets. Now the DA skin works for only for the journal widget (that has a set of HTML codes+CSS defined already) So, basically, when you want to skin your journal (via the sta.sh writer) you basically alter the default CSS of your journal widget and hence you customize it.

    I hope this makes sense to you.

    Unlike in website, where you create a number of pages and each page gets one or more css styles embed in it, in DA, you get only a set of HTML codes in a page to change the CSS for.

    👍: 0 ⏩: 0

    HarLeezPix In reply to ??? [2013-12-16 19:34:44 +0000 UTC]

    Hello Sid!!
      My name is Lee and I first want to thank you very much for the time and trouble of creating and sharing this tutorial as I understand some of it, but am still confused!!   I know that DA has undergone the restructuring of how and where the CSS (and some HTML) coding is placed and I guess I now trying to figure this new structure out "gruze"!! 
      I have a question for you regarding the HTML area that is able to be edited by us and the selectors and classes that we insert in the journal creation page!!  When you enter these different selectors in your Skin CSS area, does it automatically create the HTML tags that are being used within the HTML area of the entire page code (I believe it's that area tagged "negate-box-margin") or do I insert these tags myself??  I'm sorry if this isn't making sense as I'm not very literate at all to all of this!!
      Anyway ... if you understand what I mean, please reply at your earliest convenience or by note!!

      Thank you
      Lee

    👍: 0 ⏩: 1

    CypherVisor In reply to HarLeezPix [2013-12-21 12:07:00 +0000 UTC]

    Hi Lee,

    Sorry for my late reply.

    The default selectors and classes (such as the .negate-box-margin , .gr-top etc. etc.) that are already present in the journal portion of the HTML have styles coded (CSS coded) in them by default. (Hence, the default skin of DA is displayed when you create a new journal). Now, when you want to edit the skin you basically change the CSS (styles) of the selectors and classes. (provided the basic journal structure of HTML is always present).

    Let me know if you need more info on this.

    Regards,
    Sid

    👍: 0 ⏩: 1

    HarLeezPix In reply to CypherVisor [2013-12-21 22:56:07 +0000 UTC]

    Hello again Sid!!   Thanks for replying to me!!
      "Yes" ... I read this tutorial and understood this much, but I wasn't for sure if a person had to go in and create the necessary HTML tags before creating the CSS selectors, etc. to modify them!!    Anyway ... I also printed and was studying the DeviantArt HTML code page that you displayed within the tutorial and noticed the little icon boxes with a "+" or "-" sign in front of different tags!!  Would this indicate that certain tags are "divisions" of different "parent" tags?  For example ... is the "grf-indent" class tag is a sub-class tag only to the "gr-body" class tag? (I hope I said this accurately)!!   I guess I'm asking because I'm trying to figure out what specific "classes" pertain to others and also ... trying to figure this out visually as well!!  I was trying to think of all of this as being like working with "layers" in a photo editing program of something!! :nod;

      Anyway ... please don't worry about late replies as I'm sure you are busy helping others!!  Please just try to answer when time affords you to do so!!
      If I don't hear from you before the Holidays ... I send you my very best wishes this Holiday Season Sid!!

      ~Lee

    👍: 0 ⏩: 2

    HeyTayHolt In reply to HarLeezPix [2014-09-18 11:25:23 +0000 UTC]

    This is exactly what problem I've been having (I think), and I've been struggling so hard in my mind to articulate it! I'm going to try, and maybe you can tell me if it's the same issue?

    Normally, in web building, it seems to me at least that we go in and "activate" the CSS styling by pointing our HTML div to it/labeling it correctly. For example, if you created the div class

    .thisnewboximade {
    background:#000000;
    padding:7px;
    text-align:justify;
    border-style:solid;
    border-color: #000000;
    border-width:0px 5px 5px 5px;
    }

    you'd have to physically go & write in the HTML this tag

    < div class="thisnewboximade" >Text that goes in my box. < /div > (extra spaces for demo only)

    to activate that styling for that div area.

    But Devianart is set up so you just chunk the CSS styling in a skin box using the Edit Skin tool. But I don't see how to organize the actual HTML the way it's set up. Yet when I see others put in (seemingly endless?) arrays of new custom class selectors, I don't see where they changed the HTML attributes to account for them, so that's where I got totally confused as far as Deviantart is concerned!

    👍: 0 ⏩: 0

    CypherVisor In reply to HarLeezPix [2013-12-22 14:56:37 +0000 UTC]

    The plus (+) and minus (-) are there to organize the sub-classes structure in the HTML page. Yes, grf-indent is a sub-class to gr-body

    However, there is one more class gr between those two. If you want to access .grf-indent and customize it then you can write in the following way:

    .gr-body .grf-indent
    {
    ...
    }

    or

    .gr-body .gr .grf-indent
    {
    ...
    }

    👍: 0 ⏩: 1

    HarLeezPix In reply to CypherVisor [2013-12-22 21:04:17 +0000 UTC]

    Hey Sid!!
      Well I guess I at least figured this out correctly ... YAY!!   I did in fact notice that class as well ... I'm just now trying to figure out exactly what classes refer and are associated with the overall layout of the "box" in terms of the individual divisions and how they affect the structure and appearance!!  For example ... I have no clue as to what is meant by the class of ".gr-indent", what it's for, and where exactly it's located in terms of the geographical layout of the journal box!!  I guess I will figure it out eventually through a lot of trial and error in the meantime!!
      Thank you very much for your reply ... I really appreciate it!!
      ~Lee

    👍: 0 ⏩: 1

    CypherVisor In reply to HarLeezPix [2013-12-23 15:02:12 +0000 UTC]

    Do not try to understand the meanings of each class instead just check out how and what does each of the classes hold. The simplest trick to check that is by using the following:

    border: 1px solid red;

    You are smart enough to take this further from here onwards.

    Have a great day!

    👍: 0 ⏩: 1

    HeyTayHolt In reply to CypherVisor [2014-09-18 11:26:43 +0000 UTC]

    This is exactly what problem I've been having (I think), and I've been struggling so hard in my mind to articulate it! I'm going to try, and maybe you can tell me if it's the same issue? It's not a matter of not understanding how the css styling affects individual elements for me, but how it all works together.

    Normally, in web building, it seems to me at least that we go in and "activate" the CSS styling by pointing our HTML div to it/labeling it correctly. For example, if you created the div class

    .thisnewboximade {
    background:#000000;
    padding:7px;
    text-align:justify;
    border-style:solid;
    border-color: #000000;
    border-width:0px 5px 5px 5px;
    }

    you'd have to physically go & write in the HTML this tag

    < div class="thisnewboximade" >Text that goes in my box. < /div > (extra spaces for demo only)

    to activate that styling for that div area.

    But Devianart is set up so you just chunk the CSS styling in a skin box using the Edit Skin tool. But I don't see how to organize the actual HTML the way it's set up. Yet when I see others put in (seemingly endless?) arrays of new custom class selectors, I don't see where they changed the HTML attributes to account for them, so that's where I got totally confused as far as Deviantart is concerned!

    👍: 0 ⏩: 1

    CypherVisor In reply to HeyTayHolt [2014-09-20 18:51:49 +0000 UTC]

    You are right about the usage of the CSS and HTML.

    In this tutorial you can see I have provided the list of divs and other HTML tags that makes up the whole skin. For example, the "text" class is inside "gr-body". Now, you can not only obviously manipulate these pre-defined classes but also include your own classes by defining them as for example:

    .gr-body .text .mybox
    {
    }
    .gr-body .text .myowntitle
    {
    }

    etc. etc.

    That's how you do it.

    👍: 0 ⏩: 0

    Neko-Bear In reply to ??? [2013-12-08 07:11:37 +0000 UTC]

    Hi Cyphervisor Sorry to be a bother, but I was wondering if you'd be able to help with some coding. I would like to code the thumb images (gallery and skin wise) so that when you hover over them, the image fades out and the title/deviant name appears over the image (hope that makes sense). I have tried to have a fiddle, but I am very new to coding and for the life of me can't figure it out with my limited knowledge

    If you could shed some light on this with a code snippet, I'd be forever grateful

    Sorry if this is not the right forum to be asking such questions

    👍: 0 ⏩: 1

    CypherVisor In reply to Neko-Bear [2013-12-08 14:00:41 +0000 UTC]

    That is a very cool thumb effect that I like myself.

    That code is quite complex though. I would suggest that you get familiar with the normal thumbs before jumping into getting that effect.

    👍: 0 ⏩: 1

    Neko-Bear In reply to CypherVisor [2013-12-08 14:34:32 +0000 UTC]

    Thank you so much for replying! Yes, it really is a great effect! Ah, isn't most code complex Good suggestion, I tend to get a bit ambitious when learning something new! I'll continue to experiment - I've figured out how to get the fade effect, but I'm just stuck on how you get the title/deviant name to appear over the faded thumb image on hover   But I'll keep at it

    Thanks so much for your time, much appreciated!

    👍: 0 ⏩: 1

    CypherVisor In reply to Neko-Bear [2013-12-22 13:21:45 +0000 UTC]

    Though, there are different ways by which you can achieve that. The simplest would be to use the "content" property for that.

    👍: 0 ⏩: 0

    Miracat In reply to ??? [2013-12-05 18:22:44 +0000 UTC]

    sorry,dude, how do I install my picture as the journal skin??? Maybe I´m too stupid.....

    👍: 0 ⏩: 1

    CypherVisor In reply to Miracat [2013-12-08 13:58:16 +0000 UTC]

    using the backround property as shown below:

    {
    background:url(YOUR_IMAGE_URL);
    }

    👍: 0 ⏩: 1

    Miracat In reply to CypherVisor [2013-12-08 20:03:24 +0000 UTC]

    Thank you! But... where do I put that? I mean.. You got this long, long code you get a skin with... and then where there do I put that in? sorry....

    👍: 0 ⏩: 1

    CypherVisor In reply to Miracat [2013-12-22 13:20:09 +0000 UTC]

    When you edit a skin you are given a window to enter codes in the Header, CSS and Footer. You write your codes in the CSS part.

    👍: 0 ⏩: 1

    Miracat In reply to CypherVisor [2013-12-22 13:38:33 +0000 UTC]

    Yeah... I know... I meant the URL in the code

    👍: 0 ⏩: 1

    CypherVisor In reply to Miracat [2013-12-22 14:32:52 +0000 UTC]

    which URL?

    👍: 0 ⏩: 1


    <= Prev | | Next =>