1
kaotik
New Theme for my site
  • 2010/4/26 18:27

  • kaotik

  • Just can't stay away

  • Posts: 861

  • Since: 2004/2/19


Hello fellow xoopers

I've developed a new theme for my site. I'm going to elaborate a bit on where I started and what I'm planning.

Step 1
As usual I started the design process without touching a computer. Just some sketching paper and some colored pencils. I know there are some designers that like to start immediately on a computer. If you are comfortable using a vector or image program then go for it.
However DON't start designing a new theme with code. If you do you will start off limited by what you know of code and that will hamper your design.
I've covered this in a previous tutorial but it's always good to restate this for new users.

Step 2
With the design locked down, my next step is to build on a foundation. Now I don't want to use any tables, just div's, since this is the latest rage in web design. Instead of reinventing the wheel I used a very good css framework as the foundation for my theme.
Now I can customize the css to my likening.

Step 3
I really wanted to take advantage of css 3 with this theme. You will see that the block headers are selectable. I did this using @font-face. There are 2 things to be carefull:
1- Copyright. Make sure you can use the font in your theme.
2- Size. The font will be loaded for each clients session. If you are going to use a font that's 150kb or more in size, make sure you have bandwidth to spare. Plus the font will only show on the page once it's loaded. This can lead to your text showing in standard type until the font is loaded.
This theme also uses rounded corners through css3.

Step 4
I wanted to do something completely different with my main menu. So now each menu item is twisted and placed in a specific position. This is done with css3 and works in firefox and chrome. Opera doesn't support this yet.
Once I install some more modules you will see the full effect of this block.

Let me know what you think of my theme.

2
mariane
Re: New Theme for my site
  • 2010/4/27 6:27

  • mariane

  • Theme Designer

  • Posts: 649

  • Since: 2008/1/11


I like the theme, it's so nice, I have one small remark : the hover color of the menu is a liitle dark
the road of success is always under construction

3
deka87
Re: New Theme for my site
  • 2010/4/27 6:37

  • deka87

  • Friend of XOOPS

  • Posts: 1125

  • Since: 2007/10/5


There is an issue with the rounded bottom corners in Chrome.
Resized Image

Mind anchors

4
kaotik
Re: New Theme for my site
  • 2010/4/27 8:23

  • kaotik

  • Just can't stay away

  • Posts: 861

  • Since: 2004/2/19


mariane: I see your point. I could do a lighter color. Thanks for your input.

deka87:thanks... fixed.

5
mariane
Re: New Theme for my site
  • 2010/4/27 9:49

  • mariane

  • Theme Designer

  • Posts: 649

  • Since: 2008/1/11


you use cs3 to make rounded corners? if yes there is lot of codes that works also with IE.
if you want I can provide you one
the road of success is always under construction

6
kaotik
Re: New Theme for my site
  • 2010/4/30 12:22

  • kaotik

  • Just can't stay away

  • Posts: 861

  • Since: 2004/2/19


Thank you mariane for the offer.
I've used several solutions in past themes to fix IE problems.
However, since this is my own personal theme, I'm not to worried about IE incompatibilities.

7
kris_fr
Re: New Theme for my site
  • 2010/5/17 7:33

  • kris_fr

  • Theme Designer

  • Posts: 1009

  • Since: 2005/12/31


hi,

@kaotik : minors corrections
/* -----------------------------------------------------------------------


 Blueprint CSS Framework 0.9
 http://blueprintcss.org

   * Copyright (c) 2007-Present. See LICENSE for more info.
   * See README for instructions on how to use Blueprint.
   * For credits and origins, see AUTHORS.
   * This is a compressed file. See the sources in the 'src' directory.

----------------------------------------------------------------------- */
/* xoops  */
.cLblock{
border:thin solid #990000;
border-radius5px;
    -
moz-border-radius5px;
    -
khtml-border-radius5px;
    -
webkit-border-radius5px;
    
margin-bottom:10px;
    
padding:5px;
}
.
cLblock h2{font-familyrepublic;}

.
cRblock{
border:thin solid #990000;
border-radius5px;
    -
moz-border-radius5px;
    -
khtml-border-radius5px;
    -
webkit-border-radius5px;
    
margin-bottom:10px;
    
padding:5px;
}
.
cRblock h2{font-familyrepublic;}

.
rblock{
    
margin-bottom:10px;
    
margin-right:10px;
    
padding:5px;
}


/*  kaotik  */
.sideClr{background-color:#FFE9D2;}


.roundc{
border-radius5px;
    -
moz-border-radius15px;
    -
khtml-border-radius15px;
    -
webkit-border-radius15px;

}
#artdecoMM{
width:310px;
height:175px;
background-color:#FFCC00;
border-radius-topleft15px;
-
moz-border-radius-topleft15px;
-
khtml-border-top-left-radius15px;
-
webkit-border-top-left-radius15px;
}
#artdecoMM a {text-decoration:none;}
#artdecoMM a:hover{ color:#FF0000;}

    
.mm1 {position:relativetop:19pxleft:89px;  
    
font-weight:boldfont-size:20pxtext-align:left;}
    .
mm1 acolor:#000}
    
    
.mm2{position:relativetop:13pxleft:75px;
     
font-size:20px;}
    .
mm2 a {color:#FFF;}
    
    
.mm3{position:relativetop:-20pxleft:-40pxfont-weight:boldwidth:180pxtext-align:left;
    
font-size:20px;
    
transformrotate(-90deg);
    -
o-transformrotate(-90deg);
    -
webkit-transformrotate(-90deg);
    -
moz-transformrotate(-90deg);
    }
    .
mm3 a {color:#CCC;}
    
    
.mm4{position:relativetop:-15pxleft:-160pxfont-weight:boldtext-align:right;
    
font-size:14px;}
    .
mm4 a {color:#000;}
    
    
.mm5{position:relativetop:150pxleft:-77pxtext-align:right;
    
font-size:18px;
    
transformrotate(-90deg);
    -
o-transformrotate(-90deg);
    -
webkit-transformrotate(-90deg);
    -
moz-transformrotate(-90deg);}
    .
mm5 a {color:#666;}
    
    
.mm6{position:relativetop:-80pxleft:-25pxwidth:105pxtext-align:leftfont-weight:bold;
    
font-size:15px;
    
transformrotate(-90deg);
    -
o-transformrotate(-90deg);
    -
webkit-transformrotate(-90deg);
    -
moz-transformrotate(-90deg);}
    .
mm6 a {color:#333;}
    
    #mm7{position:relative; top:-100px; left:60px; font-weight:bold; width:105px; text-align:left;
    
font-size:22pxcolor:#666;transform: rotate(-90deg);-o-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);}
    #mm7 a {color:#666;}




/* reset.css */
htmlbodydivspanobjectiframeh1h2h3h4h5h6pblockquotepreaabbracronymaddresscodedeldfnemimgqdldtddolullifieldsetformlabellegendtablecaptiontbodytfoottheadtrthtdarticleasidedialogfigurefooterheaderhgroupnavsection {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
articleasidedialogfigurefooterheaderhgroupnavsection {display:block;}
body {line-height:1.5em;}
table {border-collapse:separate;border-spacing:0;}
captionthtd {text-align:left;font-weight:normal;}
tabletdth {vertical-align:middle;}
blockquote:beforeblockquote:afterq:beforeq:after {content:"";}
blockquote{quotes:"" "";}
a img {border:none;}

/* typography.css */
html {font-size:100.01%;}
body {font-size:75%;color:#222;background-color:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
h1 {font-size:3em;line-height:1em;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1em;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25em;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 imgh2 imgh3 imgh4 imgh5 imgh6 img {margin:0;}
{margin:0 0 1.5em;}
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focusa:hover {color:#000;}
{color:#009;text-decoration:underline;}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:bold;}
emdfn {font-style:italic;}
dfn {font-weight:bold;}
supsub {line-height:0;}
abbracronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
precodett {font:1em 'andale mono''lucida console'monospace;line-height:1.5em;}
li ulli ol {margin:0;}
ulol {margin:0 1.5em 1.5em 0;padding-left:3.333em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
thead th {background-color:#c3d9ff;}
thtdcaption {padding:4px 10px 4px 5px;}
tr.even td {background-color:#e5ecf9;}
tfoot {font-style:italic;}
caption {background-color:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.
large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.
hide {display:none;}
.
quiet {color:#666;}
.loud {color:#000;}
.highlight {background-color:#ff0;}
.added {background-color:#060;color:#fff;}
.removed {background-color:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.
last {margin-right:0;padding-right:0;}
.
top {margin-top:0;padding-top:0;}
.
bottom {margin-bottom:0;padding-bottom:0;}

/* forms.css */
label {font-weight:bold;}
fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}
input[type=text], input[type=password], input.textinput.titletextareaselect {background-color:#fff;border:1px solid #bbb;}
input[type=text]:focusinput[type=password]:focusinput.text:focusinput.title:focustextarea:focusselect:focus {border-color:#666;}
input[type=text], input[type=password], input.textinput.titletextareaselect {margin:0.5em 0;}
input.textinput.title {width:300px;padding:5px;}
input.title {font-size:1.5em;}
textarea {width:390px;height:250px;padding:5px;}
input[type=checkbox], input[type=radio], input.checkboxinput.radio {position:relative;top:.25em;}
form.inline {line-height:3em;}
form.inline p {margin-bottom:0;}
.
error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background-color:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background-color:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background-color:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

/* grid.css */
.container {width:950px;margin:0 autobackground-color:#ffffff;}


.showgrid {background-color:url(src/grid.png);}
.
column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:10px;}
.
last {margin-right:0;}
.
span-{width:30px;}
.
span-{width:70px;}
.
span-{width:110px;}
.
span-{width:150px;}
.
span-{width:190px;}
.
span-{width:230px;}
.
span-{width:270px;}
.
span-{width:310px;}
.
span-{width:350px;}
.
span-10 {width:390px;}
.
span-11 {width:430px;}
.
span-12 {width:470px;}
.
span-13 {width:510px;}
.
span-14 {width:550px;}
.
span-15 {width:590px;}
.
span-16 {width:630px;}
.
span-17 {width:670px;}
.
span-18 {width:710px;}
.
span-19 {width:750px;}
.
span-20 {width:790px;}
.
span-21 {width:830px;}
.
span-22 {width:870px;}
.
span-23 {width:910px;}
.
span-24 {width:950px;margin-right:0;}
input.span-1textarea.span-1input.span-2textarea.span-2input.span-3textarea.span-3input.span-4textarea.span-4input.span-5textarea.span-5input.span-6textarea.span-6input.span-7textarea.span-7input.span-8textarea.span-8input.span-9textarea.span-9input.span-10textarea.span-10input.span-11textarea.span-11input.span-12textarea.span-12input.span-13textarea.span-13input.span-14textarea.span-14input.span-15textarea.span-15input.span-16textarea.span-16input.span-17textarea.span-17input.span-18textarea.span-18input.span-19textarea.span-19input.span-20textarea.span-20input.span-21textarea.span-21input.span-22textarea.span-22input.span-23textarea.span-23input.span-24textarea.span-24 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;}
input.span-1textarea.span-{width:18px;}
input.span-2textarea.span-{width:58px;}
input.span-3textarea.span-{width:98px;}
input.span-4textarea.span-{width:138px;}
input.span-5textarea.span-{width:178px;}
input.span-6textarea.span-{width:218px;}
input.span-7textarea.span-{width:258px;}
input.span-8textarea.span-{width:298px;}
input.span-9textarea.span-{width:338px;}
input.span-10textarea.span-10 {width:378px;}
input.span-11textarea.span-11 {width:418px;}
input.span-12textarea.span-12 {width:458px;}
input.span-13textarea.span-13 {width:498px;}
input.span-14textarea.span-14 {width:538px;}
input.span-15textarea.span-15 {width:578px;}
input.span-16textarea.span-16 {width:618px;}
input.span-17textarea.span-17 {width:658px;}
input.span-18textarea.span-18 {width:698px;}
input.span-19textarea.span-19 {width:738px;}
input.span-20textarea.span-20 {width:778px;}
input.span-21textarea.span-21 {width:818px;}
input.span-22textarea.span-22 {width:858px;}
input.span-23textarea.span-23 {width:898px;}
input.span-24textarea.span-24 {width:938px;}
.
append-{padding-right:40px;}
.
append-{padding-right:80px;}
.
append-{padding-right:120px;}
.
append-{padding-right:160px;}
.
append-{padding-right:200px;}
.
append-{padding-right:240px;}
.
append-{padding-right:280px;}
.
append-{padding-right:320px;}
.
append-{padding-right:360px;}
.
append-10 {padding-right:400px;}
.
append-11 {padding-right:440px;}
.
append-12 {padding-right:480px;}
.
append-13 {padding-right:520px;}
.
append-14 {padding-right:560px;}
.
append-15 {padding-right:600px;}
.
append-16 {padding-right:640px;}
.
append-17 {padding-right:680px;}
.
append-18 {padding-right:720px;}
.
append-19 {padding-right:760px;}
.
append-20 {padding-right:800px;}
.
append-21 {padding-right:840px;}
.
append-22 {padding-right:880px;}
.
append-23 {padding-right:920px;}
.
prepend-{padding-left:40px;}
.
prepend-{padding-left:80px;}
.
prepend-{padding-left:120px;}
.
prepend-{padding-left:160px;}
.
prepend-{padding-left:200px;}
.
prepend-{padding-left:240px;}
.
prepend-{padding-left:280px;}
.
prepend-{padding-left:320px;}
.
prepend-{padding-left:360px;}
.
prepend-10 {padding-left:400px;}
.
prepend-11 {padding-left:440px;}
.
prepend-12 {padding-left:480px;}
.
prepend-13 {padding-left:520px;}
.
prepend-14 {padding-left:560px;}
.
prepend-15 {padding-left:600px;}
.
prepend-16 {padding-left:640px;}
.
prepend-17 {padding-left:680px;}
.
prepend-18 {padding-left:720px;}
.
prepend-19 {padding-left:760px;}
.
prepend-20 {padding-left:800px;}
.
prepend-21 {padding-left:840px;}
.
prepend-22 {padding-left:880px;}
.
prepend-23 {padding-left:920px;}
.
border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;}
.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
.pull-{margin-left:-40px;}
.
pull-{margin-left:-80px;}
.
pull-{margin-left:-120px;}
.
pull-{margin-left:-160px;}
.
pull-{margin-left:-200px;}
.
pull-{margin-left:-240px;}
.
pull-{margin-left:-280px;}
.
pull-{margin-left:-320px;}
.
pull-{margin-left:-360px;}
.
pull-10 {margin-left:-400px;}
.
pull-11 {margin-left:-440px;}
.
pull-12 {margin-left:-480px;}
.
pull-13 {margin-left:-520px;}
.
pull-14 {margin-left:-560px;}
.
pull-15 {margin-left:-600px;}
.
pull-16 {margin-left:-640px;}
.
pull-17 {margin-left:-680px;}
.
pull-18 {margin-left:-720px;}
.
pull-19 {margin-left:-760px;}
.
pull-20 {margin-left:-800px;}
.
pull-21 {margin-left:-840px;}
.
pull-22 {margin-left:-880px;}
.
pull-23 {margin-left:-920px;}
.
pull-24 {margin-left:-960px;}
.
pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
.
push-{margin:-40px 1.5em 40px;}
.
push-{margin:-80px 1.5em 80px;}
.
push-{margin:-120px 1.5em 120px;}
.
push-{margin:-160px 1.5em 160px;}
.
push-{margin:-200px 1.5em 200px;}
.
push-{margin:-240px 1.5em 240px;}
.
push-{margin:-280px 1.5em 280px;}
.
push-{margin:-320px 1.5em 320px;}
.
push-{margin:-360px 1.5em 360px;}
.
push-10 {margin:-400px 1.5em 400px;}
.
push-11 {margin:-440px 1.5em 440px;}
.
push-12 {margin:-480px 1.5em 480px;}
.
push-13 {margin:-520px 1.5em 520px;}
.
push-14 {margin:-560px 1.5em 560px;}
.
push-15 {margin:-600px 1.5em 600px;}
.
push-16 {margin:-640px 1.5em 640px;}
.
push-17 {margin:-680px 1.5em 680px;}
.
push-18 {margin:-720px 1.5em 720px;}
.
push-19 {margin:-760px 1.5em 760px;}
.
push-20 {margin:-800px 1.5em 800px;}
.
push-21 {margin:-840px 1.5em 840px;}
.
push-22 {margin:-880px 1.5em 880px;}
.
push-23 {margin:-920px 1.5em 920px;}
.
push-24 {margin:-960px 1.5em 960px;}
.
push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;}
.
prepend-top {margin-top:1.5em;}
.
append-bottom {margin-bottom:1.5em;}
.
box {padding:1.5em;margin-bottom:1.5em;background-color:#E5ECF9;}
hr {background-color:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
hr.space {background-color:#fff;color:#fff;visibility:hidden;}
.clearfix:after, .container:after {content:"020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.
clearfix, .container {display:block;}
.
clear {clear:both;}

Login

Who's Online

449 user(s) are online (333 user(s) are browsing Support Forums)


Members: 0


Guests: 449


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits