Kjapp og trygg hosting for Wordpress

Simplr, nytt "blogger" design

S

sinols

Medlem
Hei

Jeg har nettopp blitt ferdig med mitt gratis design, Simplr. Jeg har basert den på Minima, som er ett orginal design hos blogger.

Lurer på om det er noe feil i koden, noe som er avgjørende for brukere.



Det er bare å laste ned, bruke og nyte!

Finner designet her, Sindre Olsson: SIMPLR, new blogger template


Sindre Olsson
 
Sist redigert av en moderator:
S

sinols

Medlem
Simplr.

Hei

Simplr er nå lansert, ett nytt blogger design - Gratis!

1496wxk.png


Last ned her: Sindre Olsson: SIMPLR, new blogger template


Mvh
Sindre Olsson
 
hansson

hansson

Langveisfarende
Hvis du har litt peiling på Wordpress kunne du kanskje snekret sammen en gratismal til dette systemet også? Det ville vært mer i opp i alléen for mange her på Webforumet også. Selv om mange nok ville ha savnet mulighet for å legge inn en annonse her eller der, og noen lenker i sidestolpen osv.
 
S

sinols

Medlem
Jeg er dessverre ikke så god på og kode.

Jeg trenger faktisk litt hjelp akkurat nå: lurer på hvordan jeg får endret marginen på layouten. Har ordnet det i photoshop så dere kan se:
ejttvs.jpg


Lurer nesten på om koden min på ryddes opp i. Prøver og endre litt på marginer og legge til padding, men ser ikke ut som den vil padde så mye som jeg vil. Noen som kan hjelpe meg og legge det inn sånn som det er på bildet?

Jeg har fått til 20px mellom tekst. Men resten mangler. Det vil si: 48px mellom linjer og innhold. 35px mellom innhold innenfor linjene.


Mvh
Sindre.
 
S

sinols

Medlem
Når det blir mer luft imellom ting blir det bedre. Bruker den bare som en notatbok egentlig, har den helt enkel. Samler opp stiler osv. Okei, skal prøve på dt, men mener at det er smartere og bruke em isteden for px? stemmer dette?

Men det blir ikke den nøyaktige differensen på diverse ;s Skjønner ikke. Har ikke så veldig stor css, om noen har litt ekstra tid?
 
Sist redigert:
S

sinols

Medlem
deaa39.jpg


- litt mindre margin. Koden er her;

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font-size:100%
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration: none;
}
a:hover {
color:$titlecolor;
text-decoration: underline;
}
a img {
border-width:0;
}

/* Decorations
----------------------------------------------- */

.jump-link{
font-size: 100%;
}

/* Facebook
----------------------------------------------- */


/* Header
----------------------------------------------- */

#header-wrapper {
width:600px;
margin:0 auto 25px;
border:0px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 0px;
border: 0px solid $bordercolor;
text-align: left;
color:$pagetitlecolor;
padding-bottom:1.5em;
border-bottom: 1px dotted #ccc;

}

#header h1 {
margin:40px 0px 0;
padding:0px 0px .0em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 0px 0px;
padding:0 0px 0px;
max-width:600px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}


/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {
width: 600px;
margin:0 auto;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 600px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.sidebar-wrapper {
width: 600px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
color:$sidebarcolor;
}


/* Posts
----------------------------------------------- */

h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.4em;
line-height: 1.8em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 5px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$titlecolor;
}

.post p {
margin:0 0 .75em;
line-height:1.8em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

.comment-link {
margin-left:.6em;
}
.post img {
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

/* Comments
----------------------------------------------- */

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000000;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
line-height: 1.5em;

}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
padding-bottom:1.5em;
border-bottom:1px dotted $bordercolor;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: left;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}


/* Profile
----------------------------------------------- */

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */

#footer {

border-top: 1px dotted #ccc;
width:600px;
clear:both;
margin:0 auto;
padding-top:33px;
padding-bottom:33px;
line-height:1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: left;
}
 
A

agrimsrud

Medlem
På hvit bakgrunn kan det bli hardt med helt svart tekst. Hva med å endre fargen på overskrifter fra #000 til #111? Kan også være et tips å være mer konsekvent med marginer. Pr nå ser det ut som det er større avstand mellom avsnitt i brødteksten enn det er f.eks. mellom brødteksten og kommentarene.

Er ellers enig med Torstein i at det er kjedelig. Jobb litt med alternative bakgrunns- og tekstfarger, vær mer konsekvent på marginer og luft og prøv å legge inn én farge som bryter svart/hvitt-oppsettet, så kan mye være gjort!
 
S

sinols

Medlem
agrimsrud skrev:
På hvit bakgrunn kan det bli hardt med helt svart tekst. Hva med å endre fargen på overskrifter fra #000 til #111? Kan også være et tips å være mer konsekvent med marginer. Pr nå ser det ut som det er større avstand mellom avsnitt i brødteksten enn det er f.eks. mellom brødteksten og kommentarene.

Er ellers enig med Torstein i at det er kjedelig. Jobb litt med alternative bakgrunns- og tekstfarger, vær mer konsekvent på marginer og luft og prøv å legge inn én farge som bryter svart/hvitt-oppsettet, så kan mye være gjort!
Klikk for å utvide...

Jeg synes det funker veldig bra. 000000 kontra 111111 er ikke så stor. Liker å jobbe med 000000. Men når det kommer til mer luft så er det nettopp det jeg trenger litt hjelp med, som jeg spurte om her oppe. Det er første steg nå.

Her er ett godt eksempel på hvordan 000000 funker bra med resten. Men de har brukt mer den røde fargen for og få en helhet. De bruker da altså 000000 bare i toppen. distrop - web site and -application development

Det første jeg skal fikse nå er marginene.. Håper det er noen som kan hjelpe meg med dette.

Enda ett godt eksempel: rikcatindustries - Google Search

Det er veldig mye bra der ute. Vi har også en av mine største inspirasjoner: 26000 Vodka


Mvh
Sindre.
 
Sist redigert:
S

sinols

Medlem
TorsteinO skrev:
En fin "regel" for "god" minimalisme er å fjerne farger, elementer et.c. helt til det ikke lenger funker, og så tar du ett skritt tilbake. Eventuelt kan du gjenta dette, men "angripe" fra en annen retning.

Du har derimot bare fortsatt å fjerne, og da ender du bare opp med noe kjedelig :)
Klikk for å utvide...

Kommer ann på øye som ser det. Ikke ett endelig resultat - men denne stilen er den jeg vil jobbe med. Jeg er ikke ute etter kommentarer, men hjelp til og få på plass den marginen jeg har lagt ut over her.
 
TorsteinO

TorsteinO

Art Director & grunder
Hvordan du kunne fikse margene ga jeg deg et tips til litt lenger oppi her.

men kommentarer må du nok finne deg i å få når du legger det ut på et *diskusjons*forum ;) Og endel kommentarer kan det nok også være greit å ta til seg, selv om du selv syns det ser topp ut - det kommer nemlig ikke bare an på øyet som ser. Flere av de linkene du la ut som dine "inspirasjonskilder" er kjempetøffe, men hvis du ser litt nøyere på dem ser du at de er LANGT mer raffinerte/gjennomtenkte/gjennomførte enn ditt theme.
 
Sist redigert:
S

sinols

Medlem
TorsteinO skrev:
Hvordan du kunne fikse margene ga jeg deg et tips til litt lenger oppi her.

men kommentarer må du nok finne deg i å få når du legger det ut på et *diskusjons*forum ;) Og endel kommentarer kan det nok også være greit å ta til seg, selv om du selv syns det ser topp ut - det kommer nemlig ikke bare an på øyet som ser. Flere av de linkene du la ut som dine "inspirasjonskilder" er kjempetøffe, men hvis du ser litt nøyere på dem ser du at de er LANGT mer raffinerte/gjennomtenkte/gjennomførte enn ditt theme.
Klikk for å utvide...

Det er helt i orden det. Jeg ser hva du mener. Men jeg er ikke ferdig, så kommentarene nå vet jeg blir litt sån der. Jeg sier ikke den er perfekt, fordi den må jobbes mer med for og få helheten på plass. Men takk : )
 
Du må logge inn eller registrere deg for å svare her.
Topp