Wordpress schoonheidsprobleempje

[Muchacho NL]

Ik heb een klein probleempje met onze website.
Ingebouwd zit een mooie titel waarin er een zogeheten 'padded' tekst staat, met daaronder een grijze balk die over de hele breedte van de content doorloopt.

Zoals dit:

De CSS code die dit zou moeten verzorgen is:

.nb_wrap .nb-header {
    margin-bottom: 15px;
    border-bottom: 4px solid #eaeaea;  <--- grijze balkje
}
.nb_wrap .nb-header .nb-title {
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0;
}
.nb_wrap .nb-header .nb-title a, .nb_wrap .nb-header .nb-title span {
    padding: 7px 20px;
    display: inline-block;
    background: #cd2122;
    line-height: 20px;
    color: #fffff;

Voor een sidebar titel is er echter geen ingebouwde CSS code, en is de titel van een sidebar widget slechts zwarte tekst.
Ik heb nu gevonden hoe ik die kan aanpassen, en als ik deze aanpas (.sidebar .widget .widget-title benoemen in een custom CSS), en bovenstaande code kopieer, dan krijg ik een soortgelijke titel in de sidebar.
Echter loopt het grijze balkje net zo ver door als het blokje waar de tekst in staat... niet over de hele breedte van de sidebar.
Haal ik het stukje "Display: inline-block;" weg, dan trekt de rode achtergrond in zijn geheel mee over de hele breedte van de sidebar.

Ik zie dus dit:

Of dit:

Ik wil echter alléén de grijze balk laten doorlopen.

Dit is de code die ik nu heb, en net zoals de Newsbox titel een aparte header aanroepen om de grijze balk te maken lijkt niet te werken, of enigszins iets te doen: als ik heel die code weg laat is er alsnog een grijs balkje te zien.

.sidebar .widget .widget-header {
    margin-bottom: 15px;
    border-bottom: 4px solid #eaeaea;
}
.sidebar .widget .widget-title {
    color: #FFFFFF;
    font-size: 17px;
  	line-height: 20px;
  	padding: 7px 20px;
  	/*display: inline-block;*/
    text-transform: uppercase; 
    background: #E10001;
    font-weight: normal;
}
.sidebar .widget .widget-title.empty_title {
    display: none;
 }

De ".sidebar .widget .widget-header" doet dus helemaal niets.

 

[bron]

Hoi Muchacho,
Je geeft een hoop plaatjes en een hoop css. Je krijgt denk ik niet zoveel hulp omdat de html en een linkje van de website missen.

** edit:

Ik wil echter alléén de grijze balk laten doorlopen.

Op de gok omdat benodigde gegevens missen...

/* nb-header */
.nb_wrap .nb-header {
    margin-bottom: 15px;
    border-bottom: 4px solid #eaeaea;
}
.nb_wrap .nb-header .nb-title {
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0;
}
.nb_wrap .nb-header .nb-title a,
.nb_wrap .nb-header .nb-title span {
    padding: 7px 20px;
    display: inline-block;
    background: #cd2122;
    line-height: 20px;
    color: #fff;
}

/* widget-header */
.sidebar .widget .widget-header {
    margin-bottom: 15px;
    border-bottom: 4px solid #eaeaea;
}
.sidebar .widget .widget-title {
    margin-bottom: 0;
    padding: 14px 40px;
    display: inline-block;
    background: #cd2122;
    font-size: 17px;
    line-height: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}
.sidebar .widget .widget-title.empty_title {
    display: none;
}

Beide titels zijn even groot en alleen de grijze balk loopt door.
Mogelijk moet je de padding bij widget-title aanpassen omdat ik niet weet hoe de website eruit ziet.

Suc6. Have fun.

 

[Muchacho NL]

Bedankt voor je reactie.
Ik ga deze eens proberen.

HTML heb ik inderdaad niet gegeven, omdat de CSS geen HTML code gebruikt om deze dingen aan te roepen.
Het veldje "Custom CSS" in de Wordpress adminpanel behoeft ook geen HTML: Dat wordt zelf geregeld.

URL van de site: http://www.gscods.nl


EDIT: Je aanpassing werkt helaas niet.
De site kijkt naar het bestand main.css, en deze wordt overschreven door custom.css als deze dezelfde items bevatten.

Dit is de originele code:

.sidebar .widget {
    position: relative;
    margin-bottom: 30px;
}
.sidebar .widget .widget_content {
    margin-bottom: 0;
}
.widget .widget_content {
    padding: 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
}
.sidebar .widget .widget-title {
    border-bottom: 4px solid #eaeaea;
    color: #585858;
    font-size: 17px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    font-weight: bold;
}
.sidebar .widget .widget-title.empty_title {
    display: none;
}

Deze zorgt voor een zwarte tekst, zonder block display of padding, en dus loopt de bottom border geheel door, want de achtergrond loopt ook gewoon door (die is niet eens gedefinieerd)

zoals je ziet: hier wordt geen .widget-header aangeroepen, maar deze wordt blijkbaar ook niet geaccepteerd door de site.
Dit zou dus eigenlijk betekenen dat ik toch zal moeten kiezen tussen het een of het andere?

 

[bron]

Dit is precies de reden waarom html en/of een linkje nodig zijn voor een goed antwoord, dan zien we meer! De html van je website zie je met Ctrl + I toets. In de html zoek je met Ctrl + F toets naar Programma om het juiste stukje html te vinden. De volgende html hoort bij de css die je geeft:

<div class="sidebar main-sidebar">
  <div class="widget wedstrijd-widget">
    ...
  </div>
  <div class="widget widget_text">
    <h3 class="widget-title">Programma</h3>
    <div class="widget_content">
      <div class="textwidget">
        ...
      </div>
    </div>
  </div>

Ergens bovenaan in de html staat dit:

/* Start writing your custom CSS here */

Als je deze css hier toevoegt

/* Start writing your custom CSS here */
.sidebar h3.widget-title {
  display: inline-block !important;
  border-bottom: 0 !important;
}
.sidebar .widget_content {
  border-top: 4px solid #eaeaea;
}

dan werkt het. Zelf even uitzoeken hoe je de css daar krijgt, of probeer het in een css bestand te zetten.

Suc6.

 

[Muchacho NL]

Je laatste suggestie heb ik inderdaad ook al geprobeerd, werkt wel, maar is het net niet: De bovenste rand van het content kader wordt dan dikker, maar er zit dan dus 15 pixels tussen de rode titel en de grijze balk

Ik zal er maar aan moeten geloven dat we het niet voor elkaar gaan krijgen zoals ik wil

 

[bron]

Sorry, margin-bottom vergeten op 0 te zetten. Zo istie goed.

/* Start writing your custom CSS here */
.sidebar h3.widget-title {
  display: inline-block !important;
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.sidebar .widget_content {
  border-top: 4px solid #eaeaea;
}

 

[Muchacho NL]

Dat is op zich geen probleem, maar als je bijvoorbeeld bij de Kerstboomactie kijkt, dan is het rode block breder dan de grijze onderlijn

Als de titels structureel 12+ tekens lang zijn, dan werkt dit niet.
Maar ik ga het in mijn achterhoofd houden voor wanneer de actie is afgelopen, en we kortere titels gebruiken in de sidebars