Designa din Instrumentpanel

VIKTIGT MEDDELANDE ANG INLÄGGET!

Blogger verkar ha ändrat ett antal av namnen i instrumentpanelen vilket gör att det mesta av nedanstående kod inte fungerar för tillfället. 

Jag ska söka info ang detta hos Blogger och återkommer.

LÄGG ALLTSÅ INTE IN KODEN JUST NU!


Nu är det dags för alla att börja använda det nya gränssnittet på instrumentpanelen i Blogger och jag gissar att det är fler än jag som verkligen inte gillar det bleka, urvattnade utseendet?

Vi kan inte göra så mycket åt själva uppbyggnaden, men det går faktiskt att designa om med färger och annan css-kod förutsatt att du använder Google Chrome eller Firefox när du surfar. Den förändring du gör syns bara i just den webläsaren och bloggar du från en annan dator kommer du inte heller att se din nya design.
Eftersom jag själv alltid sitter vid samma dator och använder samma webläsare (både Chrome och Firefox) passar det här mig ändå bra, kanske är det något för dig med?

Det du behöver göra är att installera ett speciellt tillägg/plugin som heter Stylish och i det klistra in den kodmall jag ger dig här i inlägget.

Stylish - Firefox

Stylish - Google Chrome

Det ser lite olika ut i de två webläsarna, men grunden är densamma.
Skapa en ny stilmall och klistra in den kod du får av mig i denna. Sen kan du redigera och förhandsgranska tills du är nöjd, då spar du.

Innan du börjar lägga till din nya stilmall, ÖPPNA INSTRUMENTPANELEN I BLOGGEN!

I Google Chrome:

Klicka på ikonen i verktygslisten och välj Manage installed styles. 

Välj att skapa en ny stilmall: Write new style

Fyll i uppgifterna, se till att Enabled är ikryssat så att du kan se din färdiga mall efteråt och klistra in koden. Spara för att kunna se dina förändringar.

Nästa gång du klickar på ikonen i verktygslisten kan du välja att redigera stilmallen, klicka då på Edit. Du kan också välja att tillfälligt inaktivera din stilmall genom att klicka på Disable.


I Firefox:

Leta rätt på Stylish-ikonen och klicka på den för att få fram menyn.
Välj Skriv ny Style och välj blogger.com

Här fyller du i ett lämpligt namn på stilmallen och klistrar in koden du får här i inlägget.

Klicka på förhandsgranska för att se hur din instrumentpanel ser ut och spara när du inte vill ändra mer.


Stilmallen jag skrivit innehåller en del av de element som du hittar i instrumentpanelen, men långt ifrån alla. Jag kommer att uppdatera med fler färgkombinationer och utöka mallen framöver, men jag känner att det ändå kan vara intresse för många av er att ta del av det jag hitills arbetat fram.

Den här stilmallen går i blå-grått, men du kan ändra alla färgkoder själv. I nedladdningen hittar du länkar till plugin/tillägg med färgväljare för båda webläsarna så att du enkelt kan hitta rätt färgkod till det utseende du vill ha.

Har du frågor om fler kodstycken till stilmallen, vill du veta vad något speciellt heter?
Ställ då din fråga i den här tråden på Fixas Forum.

/* bg ovanför headern */
.GPCRQBSKBB {
    background:#F4F3EB !important;
}
.GPCRQBSEEB {
    background:#F4F3EB !important;
}

/* Knapparna högst upp */
a.blogg-button.blogg-primary {
    background: #FB8F3D !important;
}
a.blogg-button {
    background: #FFFFFF !important;
}

/* headern */
.GPCRQBSMAB {
    background: #8096C9 !important;
}
.GPCRQBSMAB .GPCRQBSDBB {
    background: #8096C9 !important;
}

/* bakgrund */
.GPCRQBSCBB {
    background:#F4F3EB;
}
.GPCRQBSLAB {
    background: #F4F3EB;
}

/* headertext */
.GPCRQBSMAB .GPCRQBSPAB a {
    color: #FFFFFF !important;
}
.GPCRQBSPBB .GPCRQBSACB{
    color: #FFFFFF !important;
}
/* Layoutsidans gadget-bakgrund */
body#layout {
    background-color: #A4B8E8 !important;
    border: 1px solid #526EAF !important;
}

/* Layoutsidan flyttbara gadgets */
body#layout .draggable-widget {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}
/* Layoutsidan  låsta gadgets */
body#layout .locked-widget .widget-content {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}

/* Layoutsidan Lägg till gadget */
body#layout .add_widget {
    border: 1px dashed #526EAF !important;
}

/* Layoutsidan Favicon-gadgeten */
.GPCRQBSOSB {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}

/* Knapparna i headern, ej aktiva */
button.blogg-button {
    border-right: 1px solid #C9C9C9 !important;
    border-bottom: 1px solid #C9C9C9 !important;
    border-top: 1px solid #E0E0E0 !important;
    border-left: 1px solid #E0E0E0 !important;
}

/* Profilknappen */
button.blogg-menu-button {
    border-right: 1px solid #C9C9C9 !important;
    border-bottom: 1px solid #C9C9C9 !important;
    border-top: 1px solid #E0E0E0 !important;
    border-left: 1px solid #E0E0E0 !important;
}

/* Nytt inläggknappen ovanför menyn till vänster */
button.blogg-button.blogg-primary {
    border: 1px solid #FB8F3D !important;
    color: white;
}
/* Menyn till vänster - bakgrund */
.GPCRQBSGBB {
    background: #FFFFFF;
    border: 1px solid #E0E0E0 !important;
    margin-left: 24px !important;
    padding: 10px 0 10px 20px !important;
}

/* Menyn till vänster - hovereffekt */
.GPCRQBSDDB:hover {
    background: #FFFFFF !important;
}
.GPCRQBSEDB:hover {
    color:#F26300 !important;
}

/* Översikt Uppdateringar högersidan */
.GPCRQBSOFB {
    background-color: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
}
.GPCRQBSPFB td {
    border-bottom: 0px !important;
}

/* Översikt Sidvyer */
div.GPCRQBSMFB {
    background-color: #FFFFFF !important;
    padding: 10px !important;
}
img.gwt-Image {
    background-color: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    padding: 10px !important;
    margin-top: -10px !important;
}

/* Inläggsidan - bakgrund bakom inläggen */
.GPCRQBSMR{
    background: #FFFFFF;
    padding: 10px !important;
}
.GPCRQBSAEC:hover{background-color:#eeeeee !important;}
/* Sidor - sidgadgets */
.GPCRQBSGF {
    background: #FFFFFF !important;
    border: 1px solid #768DBF !important;
}
/* Sidor  Länkarna i gadgets */
.GPCRQBSKF a, .GPCRQBSKF {
    color: #000000 !important;
}
.GPCRQBSLF a {
    color: #4464AA !important;
}

/* Kodmallens bakgrund */
.GPCRQBSAQB {
    background: #B3C1E0;
}
/* Orden Redigera HTML i kodmallen */
.GPCRQBSPPB .GPCRQBSBQB em {
    color: #FFFFFF !important;
}

/* Mallsidan - bakgrunden bakom de olika mallarna */
.GPCRQBSPEC {
    background: #FFFFFF;
}

/* Inställningar menyn hovereffekt */
.blogg-tab .GPCRQBSDCB:hover {
    background: #FFFFFF !important;
}

/* Inställningar hovereffekt alternativen högersidan */
.GPCRQBSPK tr:hover {
    background: #FFFFFF !important;
}

/* bg ovanför headern */
.GPCRQBSKBB {
    background:#F4F3EB !important;
}
.GPCRQBSEEB {
    background:#F4F3EB !important;
}

/* Knapparna högst upp */
a.blogg-button.blogg-primary {
    background: #FB8F3D !important;
}
a.blogg-button {
    background: #FFFFFF !important;
}

/* headern */
.GPCRQBSMAB {
    background: #8096C9 !important;
}
.GPCRQBSMAB .GPCRQBSDBB {
    background: #8096C9 !important;
}

/* bakgrund */
.GPCRQBSCBB {
    background:#F4F3EB;
} 
.GPCRQBSLAB {
    background: #F4F3EB;
}

/* headertext */
.GPCRQBSMAB .GPCRQBSPAB a {
    color: #FFFFFF !important;
}
.GPCRQBSPBB .GPCRQBSACB{
    color: #FFFFFF !important;
}
/* Layoutsidans gadget-bakgrund */
body#layout {
    background-color: #A4B8E8 !important;
    border: 1px solid #526EAF !important;
}

/* Layoutsidan flyttbara gadgets */
body#layout .draggable-widget {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}
/* Layoutsidan  låsta gadgets */
body#layout .locked-widget .widget-content {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}

/* Layoutsidan Lägg till gadget */
body#layout .add_widget {
    border: 1px dashed #526EAF !important;
}

/* Layoutsidan Favicon-gadgeten */
.GPCRQBSOSB {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}

/* Knapparna i headern, ej aktiva */
button.blogg-button {
    border-right: 1px solid #C9C9C9 !important;
    border-bottom: 1px solid #C9C9C9 !important;
    border-top: 1px solid #E0E0E0 !important;
    border-left: 1px solid #E0E0E0 !important;
}

/* Profilknappen */
button.blogg-menu-button {
    border-right: 1px solid #C9C9C9 !important;
    border-bottom: 1px solid #C9C9C9 !important;
    border-top: 1px solid #E0E0E0 !important;
    border-left: 1px solid #E0E0E0 !important;
}

/* Nytt inläggknappen ovanför menyn till vänster */
button.blogg-button.blogg-primary {
    border: 1px solid #FB8F3D !important;
    color: white;
}
/* Menyn till vänster - bakgrund */
.GPCRQBSGBB {
    background: #FFFFFF;
    border: 1px solid #E0E0E0 !important;
    margin-left: 24px !important;
    padding: 10px 0 10px 20px !important;
}

/* Menyn till vänster - hovereffekt */
.GPCRQBSDDB:hover {
    background: #FFFFFF !important;
}
.GPCRQBSEDB:hover {
    color:#F26300 !important;
}

/* Översikt Uppdateringar högersidan */
.GPCRQBSOFB {
    background-color: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
}
.GPCRQBSPFB td {
    border-bottom: 0px !important;
}

/* Översikt Sidvyer */
div.GPCRQBSMFB {
    background-color: #FFFFFF !important;
    padding: 10px !important;
}
img.gwt-Image {
    background-color: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    padding: 10px !important;
    margin-top: -10px !important;
}

/* Inläggsidan - bakgrund bakom inläggen */
.GPCRQBSMR{ 
    background: #FFFFFF; 
    padding: 10px !important;
}
.GPCRQBSAEC:hover{background-color:#eeeeee !important;} 
/* Sidor - sidgadgets */
.GPCRQBSGF {
    background: #FFFFFF !important;
    border: 1px solid #768DBF !important;
}
/* Sidor  Länkarna i gadgets */
.GPCRQBSKF a, .GPCRQBSKF {
    color: #000000 !important;
}
.GPCRQBSLF a {
    color: #4464AA !important;
}

/* Kodmallens bakgrund */
.GPCRQBSAQB {
    background: #B3C1E0;
}
/* Orden Redigera HTML i kodmallen */
.GPCRQBSPPB .GPCRQBSBQB em {
    color: #FFFFFF !important;
}

/* Mallsidan - bakgrunden bakom de olika mallarna */
.GPCRQBSPEC {
    background: #FFFFFF;
}

/* Inställningar menyn hovereffekt */
.blogg-tab .GPCRQBSDCB:hover {
    background: #FFFFFF !important;
}

/* Inställningar hovereffekt alternativen högersidan */
.GPCRQBSPK tr:hover {
    background: #FFFFFF !important;
}

Ladda ner en zippad fil med länkar, screenshots och koden här


Det här är nog min favorit - att få en mörkare ram runt kodmallen. Då ser man vad som är vad så mycket enklare...