Unieke widget style

(@hindrik)

Hallo,

Ik werk momenteel aan een website met het Genesis framework en het Streamline thema. Ik zit te kloten met een widget die ze standaard leveren. Die is namelijk mooi groen en sprint er in de sidebar uit. Ik heb nu de css die daar bijhoort gekregen. Nu wil ik deze style aan mijn specifieke text widget toevoegen. Text widget 3. Ik krijg het maar niet voor elkaar. Niet met custom css plugins en ook niet via de style.css.

Hier de css die ik wil toewijzen aan de text widget:

.enews #subbutton {
 background: url(images/button-light.png) repeat scroll 0 0 transparent;
 border: medium none;
 border-radius: 3px 3px 3px 3px;
 box-shadow: 0 1px 1px #A24A1D;
 color: #333333 !important;
 font-size: 14px;
 font-weight: bold;
 margin: 0 auto;
 padding: 10px 15px;
 text-shadow: 1px 1px #FFFFFF;
 text-transform: uppercase;
}

.streamline-green .navigation li a:hover, .streamline-green .navigation li.active a, .streamline-green #sidebar .enews {
 background-color: #98D348 !important;
}

#sidebar .enews {
 background-color: #E96A2A;
 margin: -30px;
 min-height: 201px;
 padding: 25px 20px 24px;
 text-align: center;
}

Alleen dan dus niet aan .enews maar aan text-3.

Hier mijn firebug:

<html xmlns="http://www.w3.org/1999/xhtml" lang="nl-NL" xml:lang="nl-NL">
<head profile="http://gmpg.org/xfn/11">
<body class="page page-id-9 page-template-default logged-in admin-bar custom-header header-image content-sidebar streamline-green customize-support">
<div id="wrap">
<div id="header">
<div id="nav">
<div id="inner">
<div class="wrap">
<div id="content-sidebar-wrap">
<div id="content" class="hfeed">
<div id="sidebar" class="sidebar widget-area">
<div id="text-3" class="widget widget_text">
<div class="widget-wrap">
</div>
<div id="text-2" class="widget widget_text">
<div id="search-3" class="widget widget_search">
</div>

1 reactie aan het bekijken (van in totaal 1)

Thread starter

Hindrik

(@hindrik)

10 jaren, 9 maanden geleden

Oke mensen. Na lang prutsen ben ik eruit gekomen. Mochten jullie met hetzelfde probleem zitten. Hier de CSS die ik gebruikt heb en de widget. Ik gebruik deze plugin omdat ik dan niet de CSS van de normale text widget hoef te overrulen.

Enhanced text widget

Hier de CSS:

#sidebar #enhancedtextwidget-2 {
	background-color:#98D348;
	font-size: 14px;
	color: #ffffff;
	text-shadow: #415529 1px 1px;
	text-align:center;
}

#sidebar #enhancedtextwidget-2 h4 {
	margin-bottom:10px;
	text-align:center;
	color: #ffffff;
	font-size: 26px;
	background-image: none;
}

#sidebar #subbutton {
 background: url(images/button-light.png) repeat scroll 0 0 transparent;
 border: medium none;
 border-radius: 3px 3px 3px 3px;
 box-shadow: 0 1px 1px #A24A1D;
 color: #333333 !important;
 font-size: 14px;
 font-weight: bold;
 margin: 0 auto;
 padding: 10px 15px;
 text-shadow: 1px 1px #FFFFFF;
 text-transform: uppercase;
}

#sidebar #subbutton:hover {
	background: url(images/button-light.png) 0 -40px;
}

En hier de HTML code om de button op te roepen. In mijn geval heb ik er een link van gemaakt.

<button onclick="window.location.href='/?page_id=581'" id="subbutton">Aanmelden</button>

See ya

1 reactie aan het bekijken (van in totaal 1)

Het onderwerp ‘Unieke widget style’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven