Wordpress schoonheidsprobleempje

Status
Niet open voor verdere reacties.

Muchacho NL

Gebruiker
Lid geworden
13 jul 2006
Berichten
627
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:
uPuv7Hz.png


De CSS code die dit zou moeten verzorgen is:
Code:
.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:
0X70PU1.png


Of dit:
CwcsBpo.png


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.

Code:
.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.
 
Laatst bewerkt:
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...
Code:
/* 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.
 
Laatst bewerkt:
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:
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?
 
Laatst bewerkt:
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:
Code:
<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:
Code:
/* Start writing your custom CSS here */
Als je deze css hier toevoegt
Code:
/* 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.
 
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 :)
 
Laatst bewerkt:
Sorry, margin-bottom vergeten op 0 te zetten. Zo istie goed.
Code:
/* 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;
}

titel-met-lijn.jpg
 
Laatst bewerkt:
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 :)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan