In Chat #1:
In Old Chat #2:
  • Profile CSS framework 5 1
Currently:  

0 Members and 1 Guest are viewing this topic.

Tags (Stories Only Please!): css profile ultimate profile background 

Author Topic: Profile CSS framework  (Read 380 times)

Offline Miss_Ally

  • Miss Fox
  • Gender: Female
  • Country: us
  • Posts: 67
  • Rep: 24
  • I'm a Fox.
Profile CSS framework
« on: August 20, 2016, 02:28:59 AM »
Hey everyone! :fox:  I am a former web designer and I love my CSS editing.  I have drawn up a large CSS framework for everyone to use.  This layout will allow a full page background and includes a few quick fixes here and there.  If you are intimated by this you are able to just add in the background url links and leave it at that.  If you are new to css editing and would like to learn more I would recommend this series.


If you are still having issues or have any advanced questions please feel free to post them here.  Myself or someone else will answer your question and try and help!


To use this copy everything below and go to your profile > Ultimate profile and paste in the area at the bottom.

Code: [Select]
<style>
body {                                                                                                                              /*This is where your*/
      background-image: url("INSERT YOUR BACKGROUND URL HERE!"); /*background will be*/
     background-repeat: no-repeat;}     /*Depends on your background choice*/

#bodyarea-r {                                   /*~Start of do not change!~*/
    background: transparent;}
#bodyarea {
    background: transparent;}        /*Allows the background to show*/
#bodyarea-l {
    background: transparent;}       /*~End of do not change!~*/     


#header {                                           
     background: transparent;}      /*Makes it so changes to head-l can be seen*/
#head-r{
     background: transparent;}


#head-l {                                                     /*Adds the roundness to the boxes*/
     -webkit-border-radius: 8px;}            /* Changes these to the same values*/                                     
#logo a {
     -webkit-border-radius: 8px;}            /* Changes these to the same values*/ 
#chat {
     -webkit-border-radius: 8px;}            /* Changes these to the same values*/   
#toolbar {   
    -webkit-border-radius: 8px;}            /* Changes these to the same values*/   


#tbar-l {                                                      /*!Start of do not change!~*/
    padding-left: 0px;
    background-color: transparent;}
#tbar-r {
    padding-right: 0px;
    background-color: transparent;}      /*~End of do not change~!*/


h3.catbg {                                                        /*This is the top of the main area*/
    text-align: center;                                      /*This makes the header text centered*/
    background-image: url("INSERT YOUR HEADER BACKGROUND URL HERE!");
    -webkit-border-radius: 15px 15px 0 0; /*More roundness*/
    background-position: center;                /*You might need to play around with these*/
    background-size: 100%;                          /*To find a position and size that works*/
    border-bottom: none;}                             /*Do not change*/

h4.catbg {                                                        /*This is the top of left menu area*/
    text-align: center;                                      /*This makes the header text centered*/
    background-image: url("INSERT YOUR LEFT MENU HEADER BACKGROUND URL HERE!");
    -webkit-border-radius: 15px 15px 0 0; /*More roundness*/
    background-position: center;                /*You might need to play around with these*/
    background-size: 100%;}                         /*To find a position and size that works*/


#left_admsection {
    padding-right: 0px;                                   /*Removes eyesore to the right do not change*/
    background-image: url("INSERT LEFT SIDE MENU BACKGROUND URL HERE");
    -webkit-border-radius: 9px;                    /*More roundness*/
    background-position: center;                 /*You might need to play around with these*/
    background-size: 100%;}                          /*To find a position and size that works*/

.windowbg {                                                  /*These are the main windows on your profile*/
    color: #bdbdbd;                                         /*Change to font color of choice*/
    background-image: url("INSERT YOUR BACKGROUND URL HERE!");
    background-position: center;               /*positions the background*/           
    background-repeat: repeat-y;               /*lets the image repeat top to bottom*/
    background-size: 100%;                          /*change to size as needed*/
    border-top: solid 1px #666666;              /*Border for the boxes*/
    border-bottom: solid 1px #666666;       /*Keep top and bottom the same as your start color*/
    border-right: solid 1px #848484;           /*Pick a marginally lighter shade of your start color*/
    border-left: solid 1px #2d2d2d;}            /*Pick a marginally darker shade of your start color*/

.creator dl {                   
    color: blue;}        /*Change to the same font color in .windowbg*/

textarea {
    width: 269px;}    /*Removes the scroll bar for Referal link*/


</style>
« Last Edit: August 20, 2016, 02:35:43 AM by Miss_Ally »
I'm a Fox! :3

 

Offsite Contacts Email Admins (Offsite) Admins Addie RayPistonprowl Global Moderators Ingenue Red Right Hand Moderators Surrender2U EssenceofRed kittyumbrass the savage Smirkin