Pomoč pri CSS

Na Themeforestu sem nabavil nek templejt za Wordpress. Sicer se na CSS spoznam bolj malo, ampak mi je uspelo večino stvari urediti kot sem želel. Vse razen widgetov, ki so prvotno imel ostre pravokotne robove, sam pa sem želel imeti lepo okrogle. Dobil zaobljeni background image in vse popravil, a sedaj mi preglavico dela rob (označen spodaj na sliki). Torej samo zgornji rob.

CSS za widgete je takšen:

.sidebar .widget {
    border:1px solid #e0e0e0;
    background:#fff;
    padding:11px;
    overflow:hidden;

}

.sidebar .widget .widget_title {
    background-image:url('http://shrani.si/f/3v/pe/1HuOAlFU/widget2.png');
    line-height:30px;
    margin:-11px;
    padding:0 10px;
    font-size:17px;
    color:#404040;
    margin-bottom:2px;
}

.sidebar .widget .wid_border {
       border-top:none
       margin:0 -11px;
       height:10px;
}

.sidebar .widget iframe {
    display:block;
}
.sidebar .widget ul {
    margin-bottom:0;
    margin:-11px;
}
.sidebar .widget select {
       padding:6px;
       width:100%;
       border:1px solid #e0e0e0;
       color:#4d4d4d;
}
.sidebar .widget input.sf {
       padding:0 6px;
       height:26px;
       line-height:26px;
       width:185px;
       border:1px solid #e0e0e0;
       float:left;
       margin-right:5px;
       color:#4d4d4d;
}
.sidebar .widget input.sb {
       border:none;
       height:28px;
        color: #404040;
    font-family:'Play' !important;
    font-size: 15px;
    text-transform:uppercase;
       background:#e0e0e0;
       width:75px;
       float:right;
       padding-bottom:2px;
       cursor:pointer;
}

.sidebar .widget ul li {
    padding:10px 15px;
    border-bottom:1px solid #f0eded;
}
.sidebar .widget ul li:last-child {
    border-bottom:none;
}

Kaj naj storim, da bo samo zgornji (označen) rob izginil?

16 odgovorov

Na http://border-radius.com/ si generiraj border za .sidebar .widget in nadomesti obstoječega.
Malo boš moral poizkušat, saj je zdaj za modri rob slika. Lahko bi v bistvu tudi sliko nadomestil s css.

1

V .sidebar .widget dodaj: border-radius: 5px 5px 0px 0px;

Tisti backgroun image pa pusti kot je bil original, ne pobirati robov na roke, ker ni potrebe + levi in desni rob se razlikujeta ;)

1

Sem že uredil po predlogu @Matjaža (hvala!). V prvo uganil robove in sedaj lepo vse zamenjal. Krasno. :)

@5ka, background image bom sedaj pač pustil kakor je, predenj kaj pokvarim naknadno. :) Hvala vseeno!

Pojavil se je že nov problem; tokrat s custom fields v Wordpressu. Nastavljena imam dva custom fielda: Avtor prispevka in Avtor fotografij. K obema pripišeš ime in priimek in to se prikaže pri postu na stranu v obliki Avtor prispevka: Janez Novak in Avtor fotografij: Aljaž Markovšek.

To imam urejeno s kodo:

<span class="meta_author">Avtor prispevka: <strong><?php echo get_post_meta($post->ID, 'Avtor prispevka', true); ?></strong></span>

in

<span class="meta_cat">Avtor fotografij: <strong><?php echo get_post_meta($post->ID, 'Avtor fotografij', true); ?></strong></span>

Sedaj pa bi rad naredil tako, da kadar sta custom fielda prazna (se pravi, da jih ne izpolnem pri objavi posta), da ne prikaže ničesar, tudi "Avtor fotografij:" in "Avtor prispevka:" ne. Je brez pomena to tam, če zraven ni avtorja.

Nekaj sem že poskušal s temi navodili, a mi ne gre namreč. Mogoče kakšna varjanta z echo? Ker je potrebno imeti zraven nekaj HTMLja.

Načeloma bi to lahko naredil z if stavkom. Samo ne poznam toliko WP, da bi vedel iz glave kaj vrne getpostmeta(). V teoriji bi zgledalo tako:

<?php $post_meta = get_post_meta($post->ID, 'Avtor prispevka', true); ?>
<?php if (!empty($post_meta) ) : ?>
<span class="meta_author">Avtor prispevka: <strong><?php echo $post_meta  ?></strong></span>
<?php endif  ?>
2

s1l3, 1000x hvala za tole! Dela kot po maslu, vrhnusko! Hvala! :)

Živjo.

Preveri sledečo zadevo
http://border-radius.com/

Pozdravljeni!

Izkoristil bom že odprto temo za pomoč pri CSS, saj imam tudi sam problem na strani prekrški.com, ki se pojavlja na MAC-u v browserju Safari Version 6.0.5 (8536.30.1). Sam ga nimam, mi je pa kolega poslal Prt Sc napake, ki je vidna kot zamik v levo belih krogcev, ki bi morala biti pod social ikoncami in znaka za telefonsko slušalko, ki bi moral biti ob telefonski številki:

Mi zna kdo pomagat pri odpravi napake?

Hvala.

Zelo težko boš odpravil napako, če ne moreš preveriti ali je napaka dejasnko odpravljena. Naloži si Safari za Windows in preveri kako ti tam prikaže zadevo. Če je ok, boš verjetno moral naložiti eno MacOS virtualko in tam poskusiti.

Prav tako je kul, ko sprašuješ za pomoč, če nalimaš kakšno kodo, da ljudje ne brskajo in iščejo zadeve na strani.

Kar se pa problema tiče ti pa težko kaj pametnega povem, vsaj po hitrem pregledu. Če se bom spomnil bom doma pogledal, mislim da imam celo Mountain Lion naložen na virtualki.

@s1l3: ravno zato tukaj sprašujem, ker verjamem, da so tukaj mojstri, ki delajo na Macu in imajo Safari, kjer lahko preverijo in najdejo napako.

Kar se kode tiče je vsa vidna na spltni strani.

1