Share your HTML & CSS layout

Show your personal arts, videos or anything that you've created in this forum.

Moderators: RukiaKuchiki, tsundere

User avatar
XxMayuXx
Anispace Apprentice
Anispace Apprentice
Posts: 276
Joined: 24 Oct 2015, 11:29

Re: Share your HTML & CSS layout

Post by XxMayuXx » 14 Feb 2016, 14:50

PastelDreams wrote:
Simple

Code By Me

Preview
[spoiler]Image[/spoiler]
Code
[spoiler][code]<style>

<style type="text/css">

#box_top_ads{ display: none;}

#box_ticker,#box_top_ads,#nav{ display: none;}



::-webkit-scrollbar {
width:7px;
height:auto;
background:#fff;
}

::-webkit-scrollbar-corner {
background:#000;
}

::-webkit-scrollbar-thumb:vertical {
background:#eee;
}

::-webkit-scrollbar-thumb:horizontal {
background: #000;
border: 1px solid #fff;
}

/** --------------------------- WHOLE CUSTOMIZATION ------------------------------**/

body {
background-image: url(http://static.tumblr.com/6419fd2b152496 ... ocskow.png);
margin:0px;
color:#aaa;
font-family:courier;
font-size:9.5px;
text-transform:uppercase;
padding:5px;
}

/** --------------------------- ABOUT ------------------------------**/

.holder2{
margin:5px;
overflow:hidden;
transition:all 0.5s Ease;
text-align:left;
width:300px;
padding:5px;
float:right;
background:#fff;
border:1px #E9E9E9 solid;}
.holder2 img{max-width:100%;}

/** --------------------------- COMMENTS ------------------------------**/

.holder3{
margin:5px;
overflow:hidden;
transition:all 0.5s Ease;
text-align:left;
width:300px;
padding:5px;
float:right;
margin-right:;
background:#fff;
border:1px #E9E9E9 solid;}
.holder3 img{max-width:100%;}

/** --------------------------- AVATAR ------------------------------**/
.holder{
margin:5px;
overflow:hidden;
transition:all 0.5s Ease;
text-align:left;
float:left;
width:275px;
padding:5px;
margin-left:135;
background:#fff;
border:1px #E9E9E9 solid;}
.holder img{max-width:100%;}

/** --------------------------- LINKS ------------------------------**/


a {
color:#000;
text-decoration:none;
outline:none;
opacity:1 ;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
transition: all 0.8s;
}

a:hover {
color:#fff;
text-shadow: 0 0 0.3em #2F2F2F;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
transition: all 0.8s;
}

/** --------------------------- BOLD, ITALIC, UNDERLINED ------------------------------**/

b, strong {
color: #888888;
font-weight: bold;
}

i, em {
color: #676767;
font-style: italic;
}

u {
color: #CECECE;
}

/** --------------------------- HOVER DESIGN ------------------------------**/

#s-m-t-tooltip{
font-size:9.5px;
position:absolute;
margin-top: 15px;
letter-spacing:1px;
z-index:9999;
background:#eee;
color:#aaa;
text-transform:uppercase;
padding:2px 3px 2px 3px;
}

/** --------------------------- CREDIT ------------------------------**/
#credit {
bottom:25px;
float:right;
font-family:Arial;
font-size:9px;
font-weight:900;
letter-spacing:0px;
position:fixed;
right:15px;
}

#credit a {
background:#000000;
border:1px solid #eeeeee;
color:#ffffff;
text-transform:uppercase;
padding-bottom:8px;
padding:10px;
}

#credit a:hover {
color:#000000;
background:#ffffff;
}

</style>
</div>
<div style=margin-top:50px;>
<div class="holder">
<img src="http://s20.postimg.org/cbzw24v71/avi2611.png">
<br><br><br>
</div>
</div>
<div style="float:right;width:300px">
<div class="holder3"> [MY_STATS]</div>
<div class="holder3">[ABOUT_ME]</div>
<div class="holder3"> [BEST_FRIEND_BOX] </div>
</div>
</div>
<div style="float:left;width:330px">
<div class="holder2">[BUTTONS]</div>
<div class="holder2">[COMMENT_BOX]</div>

<div id="credit"><a href="/user/pasteldreams">Dreams</a></div>

</div>
</div></div>
</div>[/code][/spoiler]


Please Keep Credits
You may edited as much as you like
Thank you
It look awesome I probably use it one day~
Image
Image
Image
IllyaEmiya wrote:My Bad-Ass Little Sister In The World

Venerable

Re: Share your HTML & CSS layout

Post by Venerable » 14 Feb 2016, 15:51

So I figured this might be the best place to ask, but does anyone know how to disable..

"Privacy Policy • Contact Us
© 2008-2014 by AniSpace.net. Alright reserved. "

That part of the standard HTML layout?

User avatar
1aniVangel15
Posts: 3
Joined: 02 Apr 2009, 13:49

Re: Share your HTML & CSS layout

Post by 1aniVangel15 » 16 Feb 2016, 19:02

@luffy I just want to know how to center my about me, it bordered and tried using align:middle float:middle and none of it worked. it also tried using center. please help :(
Image

User avatar
Empress
Anispace Beginner
Posts: 64
Joined: 31 Dec 2015, 00:23

Re: Share your HTML & CSS layout

Post by Empress » 16 Feb 2016, 19:49

Venerable wrote:So I figured this might be the best place to ask, but does anyone know how to disable..

"Privacy Policy • Contact Us
© 2008-2014 by AniSpace.net. Alright reserved. "

That part of the standard HTML layout?
Disabling your page is in the edit page section.

To deactivate your profile. Put [disable_profile] [/disable_profile] in the Headline.
You can remove the code later to reactivate your profile.

User avatar
Seraph
Global moderators
Global moderators
Posts: 2726
Joined: 11 Jul 2013, 05:14

Re: Share your HTML & CSS layout

Post by Seraph » 11 Mar 2016, 00:20

Date wrote:
Kidd wrote:Does anybody know where I can find the code for the standard layout? I just want a new cursor with the layout that I have now.
Thats what I've been looking for.
If any of you have the default layout code. Mind sharing with us?
Is there any way of changing the font having the default layout :3
viewtopic.php?f=35&t=19278&start=10#p1285348

User avatar
Fawk
Anispace Pro
Anispace Pro
Posts: 1580
Joined: 23 Mar 2014, 18:26

Re: Share your HTML & CSS layout

Post by Fawk » 16 Mar 2016, 16:23

AskingAlexandria wrote:
Date wrote:
Kidd wrote:Does anybody know where I can find the code for the standard layout? I just want a new cursor with the layout that I have now.
Thats what I've been looking for.
If any of you have the default layout code. Mind sharing with us?
Is there any way of changing the font having the default layout :3
viewtopic.php?f=35&t=19278&start=10#p1285348
Far from default layout if it looks almost nothing like the original.
Image

Image

Image

Venerable

Re: Share your HTML & CSS layout

Post by Venerable » 24 Mar 2016, 23:09

Took a hand a creating a layout, trying to get it closer to the original layout but still far off. Still though, this is more of a checkpoint/to be updated post.
Image
Code (Still working on it)

Code: Select all

<!-- Anispace Default Theme Mockup v1 
      Developer: Jacob Campbell
      Date       : 3/25/2016
     
      Setup  : To set up this template, you need to do the following. 
                     
                     If using a Windows Machine, press and hold Ctrl and press F to bring up 
                     the finder. 

                     If using a Mac, press and hold Command and press F to bring up the  
                     finder. 

                     In the finder, type "[YOUR" and press enter, or return, to go to the first 
                     instance. (For a test, this [YOUR should be highlighted)
                     For each location where [YOUR <user id or username>] is
                     specified, replace the values with your user id & username respectively. 

                    To find your user id: Enable [BUTTONS] on your profile, then click the
                    "Send Message" button. In the URL at the top of the page, copy 
                    the number at the end of the URL, this is your User ID. 
         
                    For example, here is my link: 
    http://www.anispace.net/forums/ucp.php?i=pm&mode=compose&u=112811 
                    So my user unique ID is: 112811

                    It's best to select this number and copy it by highlighting it, right clicking and selecting "copy", then right click and press the "paste" button to paste the number. 
-->

<!DOCTYPE html>

<style>

  [BUTTONS] 
  { 
    display: none; 
  }

  
  textarea 
  {
    font-family            : monospace;
    border-color          : rgb(169, 169, 169);
    -webkit-appearance: textarea;
    background-color   : white;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    flex-direction        : column;
    resize                  : auto;
    cursor                 : auto;
    white-space         : pre-wrap;
    word-wrap          : break-word;
    border                : 1px solid;
    padding              : 2px;
    text-rendering     : auto;
    color                  : initial;
    letter-spacing      : normal;
    word-spacing       : normal;
    text-transform     : none;
    text-indent          : 0px;
    text-shadow        : none;
    display               : inline-block;
    text-align            : start;
    margin               : 0em 0em 0em 0em;
  }

  .LeftData
  { 
    padding  : 5px;
    border    : 1px solid;
    margin   : 5px;
    overflow : hidden;
    transition: all 0.5s Ease;
    text-align: left;
    float       : left;
    width      : 300px
  }

  .Music
  {
    padding-top: 20px;
    margin      : 4px;
    overflow    : hidden;
    transition   : all 0.5s Ease;
    text-align   : left;
    float          : left;
    width         : 300px
  }


  .RightData
  {
    padding  : 5px;
    border    : 1px solid #000;
    margin   : 5px;
    overflow : hidden;
    transition: all 0.5s Ease;
    text-align: left;
  }

  .StatsMeInner
  {
    padding    : 5px;
    border      : 1px solid;
    margin     : 5px;
    overflow   : hidden;
    transition  : all 0.5s Ease;
    text-align :left;
  }

 
  .ClearLine
  { 
    width:100%;
    clear:both!important;
    display:inline-block
  }

</style>



<html> <!-- HTML Tag Begin --> 

<div style="float:left;width:330px">

  <div class="LeftData">
    [AVATAR]
  </div>

  <div id="buttons" class="LeftData">

  <div style="background:#FFFFFF; width:300px; padding: 2px; border: 2px solid   #FAFAF0;">

  <table width="100%">

<tr><td>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAMCAAAAAChTgljAAAAkklEQVQI12PYe+rpfwQ4u2oXw4kXK2/ABRbXPT3JcPj/+2WHIfy3FS3v/x9mOPL///eVa34CBc6Ezvj3//8RkMj//xunfvg/2303iAkV+X+gOSYAYhxU5M//q7O//P8NF/n38zvQgP//vv+EmvP3+0+o5T+//wWKHPv/C8mFv/4fY9j5+gUyeL2T4cCDO8jgwQEAif+2xspuGF8AAAAASUVORK5CYII=" align="absbottom"/> <a href="../forums/ucp.php?i=pm&mode=compose&u=[YOUR USER ID]"><font color="#003C77"><b>Send Message</b></font></a></td>

<td>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAMAAAAMCGV4AAABI1BMVEX////b7NvT6NzM5dDT57nT6Li82LOt0aa+2prA3JuXxKmWwqmky5Cr0I2izolzto+jzHJhrYFWs4I0n2CFuzGFvjJrtCNyvB4ZjjQVkTJxthFrtQ4KkzYDhDYDjjkAhC4AijMDhDYDjjksrlsxrVw/rmlJtG1MsVRStl5UuVpVr1tWqWNWtDRWt2RZuWZauVVeuVthuktjqzFjrQJpvlBurz5wuiRytydyvB52tXZ2vgJ2vml3ui15wCh6wWZ8wBl9tlV9vSJ+vh1+wA+BwB2EwC6FvjKFwnaFxSOFxTCKwzWKxnCMv0ONwjmRxDaTxoScymKky5Cl0Y+n3K2r2rKt0aav4cO32aq34cXG4qHI5aXS6aPW78Pd7rfv+vv2+fz9//wlWeqTAAAAH3RSTlMAAgoSJCQqNkJCRkhMUFRqanyHqaurub/FycvP09vbkjk43AAAALNJREFUCNdtz8USwgAMBNDg7l7c3V2Ll0KLu+b/v4JOp8CFPeVddjYA/yJWGwwa8Zcmb8AfDHlNAi2+cOx8jEZ8Fp5mTy7eREwnsh4zR5EzWSj28Jmq5BMuCYAi06OoFT6bC6qdOQBou3cUsqttAPSDx8f7+hZA7lgykzW++nOWbZy4QjtJtqb4Ko2GY7uIs85NjxnE6ox26/gBRoKkb9cOSRiFgSobUS4TVuXvIdnlIuWPN8VYINqUHsFHAAAAAElFTkSuQmCC" align="absbottom"> <a href="http://www.anispace.net/friends.php?action=add&id=[YOUR USER ID]&uname=[YOUR USERNAME]"><font color="#003C77"><b>Add Friend</b></font></a>
</td></tr>


<tr><td> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAMAAAAMCGV4AAAAvVBMVEX////32trl0s/l0s/4w7vkt7Pkt7P3sJz5pZX2nYz2kn3tgGr4fmrzalSqWUnOZ1HyXUflTjm9SDKHKSTaNivUQyatOCB/FxGJEg3jKhfOJRGJEg2OAAC9BACkAACOAACkAADFGAnJEQLOJRHaJxPbEwHgFAPiJhLkt7PlTjnqOB/yXUfzalT3TC/3sJz3vrD32tr4PS74fmr4inL409D5pZX6FgT6IhH6OB76RSr65eH8KRH8ZE39WUv/npH2F5nsAAAAH3RSTlMABA4PJCotR01YZ3x8kpWWobC2ub/Dyc3R1Nvf3+zuPmONMQAAAIZJREFUCNdjYCAdcLBzgSgBSRFGEM3JYsLCzcAoyGtoLssG4ptYGXBwcdvoWpvJawD5PPoGJqZGOrYW6moKQD6jgJ2eqbGRjaW1qrIMK0i9oJGRjrauhbqSDB/YfH5RbVtNLSBXGGqhkJSWloqijDjcBWKyyshcoIAcXDEESEugupmZCUIDANI8DORa+D7MAAAAAElFTkSuQmCC" align="absbottom"> <a href="/friends.php?action=add_favorite&uname=[YOUR USERNAME]&uid=[YOUR USER ID]"><font color="#003C77"><b>Add To Favorite</b></font></a> </td><td>


<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAApNJREFUOI2l00tIlFEUB/D/uTN3xpmx0XGCApGU0FI30UMrJl9pSAvTNrWJoFZB0CoKWlT7CGlh0qYH1ioyw2iRiZEhIr3UwigfkFiZjY+Z8bvf/R6nxaSg1iI6y3PP/d0D51xiZvxPeP+UnKzeF3ICiLFlFoPIJfK8F9/N3ry3r8zVtbS6g0/7y067Wl90FtV6tm0AgJASIuCfIp//QtGz/lt/BYardjXbC4kzej4JMNsQwgDgZdcNEBH8kXXwZmZeKu0ZuLwGeFNT3qTjsw/UfBJCCJCU4+HNhbt1IqF1/Ge9o81mV+sNGZEw/NGc6m1dfT0rgBc7ioeN2YVSEEAgAAySvq7akfE6AOjZsz3fmpl5B8cJB6JZL2MDH2IAIACgt74iL7moShUDtj+jUxGZigmG1rWdWwt6Js+flVV9rye09LUaDCRSqqyvoS6yDMz9iOemLBsmEaxw1jknGDqoiKAAGKau7G+//xQATKDbJELKtOT06Fh0GVhkJA1mKDCMZLKkcXCk2wkFDy0hi9qsvFuU3649nhLFDIMZSvrVMiDzNn02QfPKZaS0PgUARwc/PnKDmY2KCIoBw7Iak6nUVcUMU4jJaEXV1DLQ1PFYWdJ3UwEwtFXTsqXgylzrdXF8aKRDRnJiphALBgOGy1AALOlrrb3W4q6Ywo0D1aHE2OiQa1kFRAQIMUFCPGeQAdc5wq4bYWZ4pBzM3hvbefLOPWvNIrXFyjdOfvv60LHt8nQ+PU6AQETwer3dxYWFhxuedM2vWCQvURhAtgMwBUO+Y9HwiaigesmcCxBr4MuMy51t0/Hb0CZ70nfnbOaFJUAC8APwOOnDJACBjGAARAwjZfx+MNOTbskBYNrM1prP9K/xCzYxU7setI4EAAAAAElFTkSuQmCC" align="absbottom"> <a href="/friends.php?action=block_user&uname=[YOUR USERNAME]&uid=[YOUR USER ID]"><font color="#003C77"><b>Block User</b></font></a></td></tr>


<tr><td>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAABLFBMVEX////63tvW1tbT09P09PT11tL00MzLy8v8/PzDw8Pyx8Hvvbi3t7fwvLbwu7WysrLvtK2rq6vrq6XtraWfn5/sopmVlZWTk5PpmY+MjIzpkomEhIRVVVXrjYN+fn7nh3x5eXnng3l0dHTmfnNsbGzjdWljY2PkbmMzMzPjbF9cXFziZ1ssLCziZVdVVVVTU1MlJSROTk5LS0sbGxvfVUVFREQWFhY7OzvfSzzdRDUzMzPdPy8DAwPcOincNSTbMB7cKxkWFhbcJhTbIQ7aHgzbGgcFBQUDAwPaFwPYDgDZEgADAwMMDAwSEhIWFhYbGxskJCQlJSQsLCw7OztcXFx0dHSEhISTk5Onp6erq6u+vr7aFwPaHgzbGgfbIQ7cJhTcKxncLhvcNCTkbmMoIalyAAAAS3RSTlMAAgcLCwsRFBQcHycpKSwuNDY9PURKTlFVV1xgYWJmaW1tcXR6foWFh4mLi5CQkpSXm52io6anrq61t7u+wsnP09ja4OPn6evr8PClh7NUAAABDklEQVQoz63SWzsCARSF4c+MUzmlKJVEjRBNilGSxJRkDxWRQzXF//8PLuQu48a+fS/WWs+z4R/P53VS7/Gcg8arEQfdq6ccdL9+5qDbt+bi7xqq3kTHgtsHLJTf8+Nweqts+uC0Z3vGTi11+yV3vNL7RIkZ2TBomXQm6Uqks0YC8FwN7I9hvzShtESkliVXE2m9WPLwqAOEKgN7YEbQpPHasWoraGIoM5bVeXMBsFMd2udgyPrs5K5sEpQkqiX3TeM7P9/tRkGXAziRIGFJo1pW+9k/an9hTsHydfHwqHipsiEZVJH2U3hUfzUF4M9Zd8Y8BJoaSqHVaBR+xq8BsJEzAsCS7gctkdRjf73HF1xpKrQm7UZUAAAAAElFTkSuQmCC" align="absbottom"> <a href="/top.php?view=profile_vote&user=[YOUR USER ID]&name=[YOUR USERNAME]"><font color="#003C77"><b>Awesome Profile</b></font></a> </td>

<td> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAApNJREFUOI2l00tIlFEUB/D/uTN3xpmx0XGCApGU0FI30UMrJl9pSAvTNrWJoFZB0CoKWlT7CGlh0qYH1ioyw2iRiZEhIr3UwigfkFiZjY+Z8bvf/R6nxaSg1iI6y3PP/d0D51xiZvxPeP+UnKzeF3ICiLFlFoPIJfK8F9/N3ry3r8zVtbS6g0/7y067Wl90FtV6tm0AgJASIuCfIp//QtGz/lt/BYardjXbC4kzej4JMNsQwgDgZdcNEBH8kXXwZmZeKu0ZuLwGeFNT3qTjsw/UfBJCCJCU4+HNhbt1IqF1/Ge9o81mV+sNGZEw/NGc6m1dfT0rgBc7ioeN2YVSEEAgAAySvq7akfE6AOjZsz3fmpl5B8cJB6JZL2MDH2IAIACgt74iL7moShUDtj+jUxGZigmG1rWdWwt6Js+flVV9rye09LUaDCRSqqyvoS6yDMz9iOemLBsmEaxw1jknGDqoiKAAGKau7G+//xQATKDbJELKtOT06Fh0GVhkJA1mKDCMZLKkcXCk2wkFDy0hi9qsvFuU3649nhLFDIMZSvrVMiDzNn02QfPKZaS0PgUARwc/PnKDmY2KCIoBw7Iak6nUVcUMU4jJaEXV1DLQ1PFYWdJ3UwEwtFXTsqXgylzrdXF8aKRDRnJiphALBgOGy1AALOlrrb3W4q6Ywo0D1aHE2OiQa1kFRAQIMUFCPGeQAdc5wq4bYWZ4pBzM3hvbefLOPWvNIrXFyjdOfvv60LHt8nQ+PU6AQETwer3dxYWFhxuedM2vWCQvURhAtgMwBUO+Y9HwiaigesmcCxBr4MuMy51t0/Hb0CZ70nfnbOaFJUAC8APwOOnDJACBjGAARAwjZfx+MNOTbskBYNrM1prP9K/xCzYxU7setI4EAAAAAElFTkSuQmCC" align="absbottom"> <a href="/friends.php?action=report_profile&user=[YOUR USERNAME]"><font color="#003C77"><b>Report</b></font></a> </td>
</tr><tr><td>
</td><td></td></tr>

</table>

  </div>
</div>

  <div class="Music">
    [MUSIC]
  </div>

  <div class="LeftData">
    <div style='padding-bottom:10px;'>
      <font size="3"><b>Sample Text Here</b> </font>
    </div>

        [BEST_FRIEND_BOX] 

    <div class="LeftData">
       [COMMENT_BOX]
    </div>

  </div>
</div>

<div class="RightData">

  <div class="StatsMeInner">
    <div style='border-bottom:2px dashed #fafaf0'>
      <font size="3"><b>Your Username Here</b></font><br>
    </div>

    [MY_STATS]

  </div>

  <div class="StatsMeInner">
    <div style='border-bottom:2px dashed #fafaf0'>
      <font size="3">
        <b>About Me</b>
      </font>
    </div>

    [ABOUT_ME]
  </div>

</div> <!-- StatsMeOuter closing tag -->
<div class="ClearLine"></div>

</html> <!-- HTML Closing Tag -->

User avatar
Glutton
Posts: 23
Joined: 20 Oct 2015, 17:18

Re: Share your HTML & CSS layout

Post by Glutton » 05 Apr 2016, 14:36

-------------------------------






This is why we cant have nice things.
Last edited by Glutton on 11 May 2016, 03:32, edited 4 times in total.

User avatar
Glutton
Posts: 23
Joined: 20 Oct 2015, 17:18

Re: Share your HTML & CSS layout

Post by Glutton » 05 Apr 2016, 17:25

....
Last edited by Glutton on 11 May 2016, 03:32, edited 3 times in total.

Venerable

Re: Share your HTML & CSS layout

Post by Venerable » 05 Apr 2016, 17:27

Glutton wrote:
Image
SLAY IT GIRL! <3

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests