Sidebar, design hjelp....

Turbo Heidi

Turbo Heidi

Member
Står virkelig fast. Skjønner ingenting! :)

Bilde 1:

- Hvordan får eg smalere sidebar(finner ingenting om dette i CSS eller sidebar.php)? Føler produktkatalogen er helt inni sidebaren. Ikkje bra!
- Hvordan fikser eg problemet med søkefelt(i header)? Der er en border som ikkje skal vere der?
- Hvordan får man logoen transparent? Den er i hovedsak transparent, men når den legges inn på plassen så blir den ikkje det lengre.

Bilde 2:
- Prisen på produktet når man bruker zoom-funk. dekker viktige funksjoner. Hvordan fjerner eg den prisen? Evt. flytter den til ett passende sted(der den ikkje står i veien?


Se selv: http://nettbutikk.nyehjem.com
 

Vedlegg

  • Skjermbilde 2015-01-06 kl. 14.48.56.png
    Skjermbilde 2015-01-06 kl. 14.48.56.png
    189,4 KB · Sett: 17
  • Skjermbilde 2015-01-06 kl. 14.49.09.png
    Skjermbilde 2015-01-06 kl. 14.49.09.png
    125,5 KB · Sett: 16
W

Weboz

Medlem
Turbo Heidi skrev:
Står virkelig fast. Skjønner ingenting! :)

Bilde 1:

- Hvordan får eg smalere sidebar(finner ingenting om dette i CSS eller sidebar.php)? Føler produktkatalogen er helt inni sidebaren. Ikkje bra!
- Hvordan fikser eg problemet med søkefelt(i header)? Der er en border som ikkje skal vere der?
- Hvordan får man logoen transparent? Den er i hovedsak transparent, men når den legges inn på plassen så blir den ikkje det lengre.

Bilde 2:
- Prisen på produktet når man bruker zoom-funk. dekker viktige funksjoner. Hvordan fjerner eg den prisen? Evt. flytter den til ett passende sted(der den ikkje står i veien?


Se selv: http://nettbutikk.nyehjem.com
Klikk for å utvide...


1)
a) Theme du har valgt er basert på et grid system. Du kan endre sidebar størrelsen ved å endre div class.
Dine nåværende div class:
HTML: 
<section id="wpo-main-content " class="col-xs-12 col-md-6 col-md-push-3 clearfix">
<div class="wpo-sidebar wpo-sidebar-1 col-md-3 col-md-pull-6">
Skal endres til:
HTML: 
<section id="wpo-main-content " class="col-xs-12 col-md-7 col-md-push-2 clearfix">
<div class="wpo-sidebar wpo-sidebar-1 col-md-2 col-md-pull-7">


b) For å fikse border i søkefeltet ville jeg flyttet disse kodene fra:
Kode: 
.wpo-search {
    border: 1px solid #e5e5e5;
    border-radius: 2px;
}
Til: .wpo-search .filter_search
Slik at det blir seende ut:
Kode: 
.wpo-search .filter_search {
    border: 1px solid #e5e5e5;
    border-radius: 2px;
   position: relative;
}

c) Anbefaler ikke å ha logoen gjennomsiktig? Men her er koden:
Kode: 
.header-wrap .logo {
opacity: 0.8;
}
Korriger 0.8 for hvor gjennomsiktig logoen skal være.

2)
For å fjerne pris informasjonen på hover:
Kode: 
.product-grid .image .price {
    display: none;
}


Gikk veldig kjapt igjennom siden din, så mulig noe ble feil her. Gi beskjed dersom noe av det jeg sendte over ikke fungerer
 
Turbo Heidi

Turbo Heidi

Member
Weboz skrev:
1)
a) Theme du har valgt er basert på et grid system. Du kan endre sidebar størrelsen ved å endre div class.
Dine nåværende div class:
HTML: 
<section id="wpo-main-content " class="col-xs-12 col-md-6 col-md-push-3 clearfix">
<div class="wpo-sidebar wpo-sidebar-1 col-md-3 col-md-pull-6">
Skal endres til:
HTML: 
<section id="wpo-main-content " class="col-xs-12 col-md-7 col-md-push-2 clearfix">
<div class="wpo-sidebar wpo-sidebar-1 col-md-2 col-md-pull-7">


b) For å fikse border i søkefeltet ville jeg flyttet disse kodene fra:
Kode: 
.wpo-search {
    border: 1px solid #e5e5e5;
    border-radius: 2px;
}
Til: .wpo-search .filter_search
Slik at det blir seende ut:
Kode: 
.wpo-search .filter_search {
    border: 1px solid #e5e5e5;
    border-radius: 2px;
   position: relative;
}

c) Anbefaler ikke å ha logoen gjennomsiktig? Men her er koden:
Kode: 
.header-wrap .logo {
opacity: 0.8;
}
Korriger 0.8 for hvor gjennomsiktig logoen skal være.

2)
For å fjerne pris informasjonen på hover:
Kode: 
.product-grid .image .price {
    display: none;
}


Gikk veldig kjapt igjennom siden din, så mulig noe ble feil her. Gi beskjed dersom noe av det jeg sendte over ikke fungerer
Klikk for å utvide...


Dette må prøves. Takk for hjelpen. Gir beskjed om det ikkje fungerer :)
 
Turbo Heidi

Turbo Heidi

Member
Weboz skrev:
1)
a) Theme du har valgt er basert på et grid system. Du kan endre sidebar størrelsen ved å endre div class.
Dine nåværende div class:
HTML: 
<section id="wpo-main-content " class="col-xs-12 col-md-6 col-md-push-3 clearfix">
<div class="wpo-sidebar wpo-sidebar-1 col-md-3 col-md-pull-6">
Skal endres til:
HTML: 
<section id="wpo-main-content " class="col-xs-12 col-md-7 col-md-push-2 clearfix">
<div class="wpo-sidebar wpo-sidebar-1 col-md-2 col-md-pull-7">


b) For å fikse border i søkefeltet ville jeg flyttet disse kodene fra:
Kode: 
.wpo-search {
    border: 1px solid #e5e5e5;
    border-radius: 2px;
}
Til: .wpo-search .filter_search
Slik at det blir seende ut:
Kode: 
.wpo-search .filter_search {
    border: 1px solid #e5e5e5;
    border-radius: 2px;
   position: relative;
}

c) Anbefaler ikke å ha logoen gjennomsiktig? Men her er koden:
Kode: 
.header-wrap .logo {
opacity: 0.8;
}
Korriger 0.8 for hvor gjennomsiktig logoen skal være.

2)
For å fjerne pris informasjonen på hover:
Kode: 
.product-grid .image .price {
    display: none;
}


Gikk veldig kjapt igjennom siden din, så mulig noe ble feil her. Gi beskjed dersom noe av det jeg sendte over ikke fungerer
Klikk for å utvide...


Men hvor legger eg dem? Har jo 100 kode filer. Både CSS og PHP. Men ingen HTML filer :)
 
W

Weboz

Medlem
Turbo Heidi skrev:
Prøvde å legge kodene inn der, men ser ut til at kun search koden fungerte. Samtidig så ble hovedmenyen loddrett og den var vannrett.

Har du koder for sidebarene også?
Klikk for å utvide...
Altså, kode 1 b), 1 c) og 2a) skal inn i template.css. Bruk søkefunksjonen i editoren og søk opp de classene og lim de inn der de hører hjemme.

Koden for sidebaren er det som er forklart i "1a)".
Koden skal inn i en av dine PHP filer. Jeg kan ikke se hvilken fil de kodene skal inn i uten tilgang til serveren, men mest sannsynlig heter filen "archive.php" eller noe i den duren. Så her må du bare åpne de forskjellige filene og søke for f.eks "wpo-main-content" eller "wpo-sidebar "

For å fjerne breadcrumbs:
Legg til "display: none;" i classen .breadcrumb i template.css. (linje 3365)
Og lim deretter inn denne koden et sted i template.css:
Kode: 
.archive #wpo-mainbody, .single #wpo-mainbody  {
padding-top:12px;
}
 
Turbo Heidi

Turbo Heidi

Member
Weboz skrev:
Altså, kode 1 b), 1 c) og 2a) skal inn i template.css. Bruk søkefunksjonen i editoren og søk opp de classene og lim de inn der de hører hjemme.

Koden for sidebaren er det som er forklart i "1a)".
Koden skal inn i en av dine PHP filer. Jeg kan ikke se hvilken fil de kodene skal inn i uten tilgang til serveren, men mest sannsynlig heter filen "archive.php" eller noe i den duren. Så her må du bare åpne de forskjellige filene og søke for f.eks "wpo-main-content" eller "wpo-sidebar "

For å fjerne breadcrumbs:
Legg til "display: none;" i classen .breadcrumb i template.css. (linje 3365)
Og lim deretter inn denne koden et sted i template.css:
Kode: 
.archive #wpo-mainbody, .single #wpo-mainbody  {
padding-top:12px;
}
Klikk for å utvide...

Den sidebar koden du forteller om. Finner eg ikkje i noen av mine php filer.

Men takk for breadcrumbs koden. Den forsvant endelig :)
 
Du må logge inn eller registrere deg for å svare her.
Topp