New Theme for my site [Theme designer talk] - XOOPS Web Application System

XOOPS

Forum

Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk

1

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.

www.kaotik.biz

2

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

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

Resized Image

Mind anchors

4

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.

www.kaotik.biz

5

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

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.

www.kaotik.biz

7

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-radius: 5px;

    -moz-border-radius: 5px;

    -khtml-border-radius: 5px;

    -webkit-border-radius: 5px;

    margin-bottom:10px;

    padding:5px;

}

.cLblock h2{font-family: republic;}



.cRblock{

border:thin solid #990000;

border-radius: 5px;

    -moz-border-radius: 5px;

    -khtml-border-radius: 5px;

    -webkit-border-radius: 5px;

    margin-bottom:10px;

    padding:5px;

}

.cRblock h2{font-family: republic;}



.rblock{

    margin-bottom:10px;

    margin-right:10px;

    padding:5px;

}





/*  kaotik  */

.sideClr{background-color:#FFE9D2;}





.roundc{

border-radius: 5px;

    -moz-border-radius: 15px;

    -khtml-border-radius: 15px;

    -webkit-border-radius: 15px;



}

#artdecoMM{

width:310px;

height:175px;

background-color:#FFCC00;

border-radius-topleft: 15px;

-moz-border-radius-topleft: 15px;

-khtml-border-top-left-radius: 15px;

-webkit-border-top-left-radius: 15px;

}

#artdecoMM a {text-decoration:none;}

#artdecoMM a:hover{ color:#FF0000;}



    .mm1 {position:relative; top:19px; left:89px;  

    font-weight:bold; font-size:20px; text-align:left;}

    .mm1 a{ color:#000}

    

    .mm2{position:relative; top:13px; left:75px;

     font-size:20px;}

    .mm2 a {color:#FFF;}

    

    .mm3{position:relative; top:-20px; left:-40px; font-weight:bold; width:180px; text-align:left;

    font-size:20px;

    transform: rotate(-90deg);

    -o-transform: rotate(-90deg);

    -webkit-transform: rotate(-90deg);

    -moz-transform: rotate(-90deg);

    }

    .mm3 a {color:#CCC;}

    

    .mm4{position:relative; top:-15px; left:-160px; font-weight:bold; text-align:right;

    font-size:14px;}

    .mm4 a {color:#000;}

    

    .mm5{position:relative; top:150px; left:-77px; text-align:right;

    font-size:18px;

    transform: rotate(-90deg);

    -o-transform: rotate(-90deg);

    -webkit-transform: rotate(-90deg);

    -moz-transform: rotate(-90deg);}

    .mm5 a {color:#666;}

    

    .mm6{position:relative; top:-80px; left:-25px; width:105px; text-align:left; font-weight:bold;

    font-size:15px;

    transform: rotate(-90deg);

    -o-transform: rotate(-90deg);

    -webkit-transform: rotate(-90deg);

    -moz-transform: rotate(-90deg);}

    .mm6 a {color:#333;}

    

    #mm7{position:relative; top:-100px; left:60px; font-weight:bold; width:105px; text-align:left;

    font-size:22px; color:#666;transform: rotate(-90deg);-o-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);}

    #mm7 a {color:#666;}









/* reset.css */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}

article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}

body {line-height:1.5em;}

table {border-collapse:separate;border-spacing:0;}

caption, th, td {text-align:left;font-weight:normal;}

table, td, th {vertical-align:middle;}

blockquote:before, blockquote:after, q:before, q:after {content:"";}

blockquote, q {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 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

p {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:focus, a:hover {color:#000;}

a {color:#009;text-decoration:underline;}

blockquote {margin:1.5em;color:#666;font-style:italic;}

strong {font-weight:bold;}

em, dfn {font-style:italic;}

dfn {font-weight:bold;}

sup, sub {line-height:0;}

abbr, acronym {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;}

pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5em;}

li ul, li ol {margin:0;}

ul, ol {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;}

th, td, caption {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.text, input.title, textarea, select {background-color:#fff;border:1px solid #bbb;}

input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {border-color:#666;}

input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;}

input.text, input.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.checkbox, input.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 auto; background-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-1 {width:30px;}

.span-2 {width:70px;}

.span-3 {width:110px;}

.span-4 {width:150px;}

.span-5 {width:190px;}

.span-6 {width:230px;}

.span-7 {width:270px;}

.span-8 {width:310px;}

.span-9 {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-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;}

input.span-1, textarea.span-1 {width:18px;}

input.span-2, textarea.span-2 {width:58px;}

input.span-3, textarea.span-3 {width:98px;}

input.span-4, textarea.span-4 {width:138px;}

input.span-5, textarea.span-5 {width:178px;}

input.span-6, textarea.span-6 {width:218px;}

input.span-7, textarea.span-7 {width:258px;}

input.span-8, textarea.span-8 {width:298px;}

input.span-9, textarea.span-9 {width:338px;}

input.span-10, textarea.span-10 {width:378px;}

input.span-11, textarea.span-11 {width:418px;}

input.span-12, textarea.span-12 {width:458px;}

input.span-13, textarea.span-13 {width:498px;}

input.span-14, textarea.span-14 {width:538px;}

input.span-15, textarea.span-15 {width:578px;}

input.span-16, textarea.span-16 {width:618px;}

input.span-17, textarea.span-17 {width:658px;}

input.span-18, textarea.span-18 {width:698px;}

input.span-19, textarea.span-19 {width:738px;}

input.span-20, textarea.span-20 {width:778px;}

input.span-21, textarea.span-21 {width:818px;}

input.span-22, textarea.span-22 {width:858px;}

input.span-23, textarea.span-23 {width:898px;}

input.span-24, textarea.span-24 {width:938px;}

.append-1 {padding-right:40px;}

.append-2 {padding-right:80px;}

.append-3 {padding-right:120px;}

.append-4 {padding-right:160px;}

.append-5 {padding-right:200px;}

.append-6 {padding-right:240px;}

.append-7 {padding-right:280px;}

.append-8 {padding-right:320px;}

.append-9 {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-1 {padding-left:40px;}

.prepend-2 {padding-left:80px;}

.prepend-3 {padding-left:120px;}

.prepend-4 {padding-left:160px;}

.prepend-5 {padding-left:200px;}

.prepend-6 {padding-left:240px;}

.prepend-7 {padding-left:280px;}

.prepend-8 {padding-left:320px;}

.prepend-9 {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-1 {margin-left:-40px;}

.pull-2 {margin-left:-80px;}

.pull-3 {margin-left:-120px;}

.pull-4 {margin-left:-160px;}

.pull-5 {margin-left:-200px;}

.pull-6 {margin-left:-240px;}

.pull-7 {margin-left:-280px;}

.pull-8 {margin-left:-320px;}

.pull-9 {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-1 {margin:0 -40px 1.5em 40px;}

.push-2 {margin:0 -80px 1.5em 80px;}

.push-3 {margin:0 -120px 1.5em 120px;}

.push-4 {margin:0 -160px 1.5em 160px;}

.push-5 {margin:0 -200px 1.5em 200px;}

.push-6 {margin:0 -240px 1.5em 240px;}

.push-7 {margin:0 -280px 1.5em 280px;}

.push-8 {margin:0 -320px 1.5em 320px;}

.push-9 {margin:0 -360px 1.5em 360px;}

.push-10 {margin:0 -400px 1.5em 400px;}

.push-11 {margin:0 -440px 1.5em 440px;}

.push-12 {margin:0 -480px 1.5em 480px;}

.push-13 {margin:0 -520px 1.5em 520px;}

.push-14 {margin:0 -560px 1.5em 560px;}

.push-15 {margin:0 -600px 1.5em 600px;}

.push-16 {margin:0 -640px 1.5em 640px;}

.push-17 {margin:0 -680px 1.5em 680px;}

.push-18 {margin:0 -720px 1.5em 720px;}

.push-19 {margin:0 -760px 1.5em 760px;}

.push-20 {margin:0 -800px 1.5em 800px;}

.push-21 {margin:0 -840px 1.5em 840px;}

.push-22 {margin:0 -880px 1.5em 880px;}

.push-23 {margin:0 -920px 1.5em 920px;}

.push-24 {margin:0 -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;}

Resized Image

Login

Username

Password

Remember me

Register now! | Lost Password?

Search

Advanced Search

Recent Posts

Re: Rebuilding and Updating a 20 years old Xoops Website from 2.0.18? to 2.5.11

3/16 2:02 Mamba
Rebuilding and Updating a 20 years old Xoops Website from 2.0.18? to 2.5.11

3/14 20:34 hnn_gerd
Re: NewBB v 5.1.0 b 6

3/7 12:07 Mamba
Re: NewBB v 5.1.0 b 6

2/23 2:57 Mamba
NewBB v 5.1.0 b 6

2/17 18:57 spierrard
Re: XOOPS 2.5.11 search user is not working

2/14 13:11 Mamba
Re: oledrion

2/14 11:29 Mamba
Re: oledrion

2/13 15:22 oswaldo
Re: oledrion

2/12 19:20 Mamba
Re: oledrion

2/12 16:02 oswaldo

Who's Online

261 user(s) are online (174 user(s) are browsing Support Forums)

Members: 0

Guests: 261

Donat-O-Meter

Stats
Goal:	$100.00
Due Date:	Apr 30
Gross Amount:	$0.00
Net Balance:	$0.00
Left to go:	$100.00

Latest GitHub Commits

{{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }}

{{ record.commit.author.name }} {{ record.commit.author.date | formatDate }}