css

Vandaag de custom.css helemaal leeg gemaakt (daarna pakte Thesis gewoon de html-codering mee). Toen kon ik gaan dus werken met de custom file editor aan een custom.css betand. Vandaag achtergrond-afbeelding ingevoegd als test, sidebars en contentbox van een testkleurtje voorzien en ook zowaar een weer 4 widgetized footer onderaan het sjabloon werkend gekregen. Gewoon dankzij mijn grote vriend GOOGLE! Voor zowel het zoeken als de vertaling. Op de volgende pagina's van deze post wat codes.



Voorbeeldcodes

Met deze code wordt de kleur van de sidebars niet altijd tot helemaal onderaan de box doorgetrokken.
.custom #sidebar_1 {background: #888888;}
.custom #content {background: #888888;}

Achtergrondkleur sidebars
Maar deze werkt goed:
.custom #content_box {background-color: #888888;}

.custom #content {background-color: #FFD630;}

Achtergrondkleur instellen

body.custom {

    background-color: #DDDDDD;}

}

invoegen van afbeelding

body.custom {

    background: #8db6b6 url('http://www.top-designer.nl/wp-content/uploads/2010/10/backgroundtest.jpg') 50% 0 no-repeat;

}

Code 4 widgetized footer

Add this code to custom_functions.php

Use FTP path or go to custom file editor and paste this below code.

/*-----------------------------------------*/
/* register sidebars for widgetized footer */
if (function_exists('register_sidebar')) {
$sidebars = array(1, 2, 3, 4);
foreach($sidebars as $number) {
register_sidebar(array(
'name' => 'Footer ' . $number,
'id' => 'footer-' . $number,
'before_widget' => '',
'after_widget' => '',
'before_title' => '
',
'after_title' => '
'
));
}
}

/*-----------------------*/
/* set up footer widgets */
function widgetized_footer1() {
?>
Now go to wordpress admin panel and click Appearance then select widgets.
In the right side you will see Footer 1, 2, 3, and 4.
Add this code into custom.css
/* CUSTOM.CSS */

.custom #footer {
border-top:2em solid #9c9c9c;
background: #eeeeee;
padding:0em;
text-align:center;
}
.custom #footer a{
border-bottom: 1px none #cccccc;
}

/* footer widget area setup */
#footer_setup {
background: #444343;
padding:1.5em;
margin-bottom: 25px;
overflow: hidden;
}

/* widget item setup */
#footer_setup .footer_items {
text-align: left;
width: 24.5%;
padding-right: 0px;
color: #2361A1;
display: inline-block;
float: left;
height: 100%;
}

/* widget item headers */
#footer_setup .footer_items h3 {
font-size: 1.5em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0px;
color: #ffffff;
padding-bottom: 3px;
border-bottom: 3px none #ffdf00;
margin-bottom: 5px;
}

/* do not change these! */
#footer_setup .footer_items ul li { list-style:none;
font-size:1.4em;
line-height:1.5em;
}
#footer_setup .footer_items ul { margin: 1em; padding: 0px; }

En dit was de oorspronkelijke tekst:

/*

File: custom.css

Description: Custom styles for Thesis

BASIC USAGE:

If you have enabled the custom stylesheet in the Thesis options panel, the tag

will be appended with the "custom" class, like so: . You can use

the "custom" class to override *any* CSS declarations contained in the style.css file.

For example, if you wish to change the default link color to green, you would add the

following declarations to this file:

.custom a, .custom a:visited { color: #090; } <--- This makes links green

.custom a:hover { color: #00f; } <--- This makes links blue when you mouse over them

WHY THIS WORKS:

By using the "custom" class, you are creating more specific CSS declarations for HTML

elements. CSS styling is applied through rules of specificity, and because declarations

prepended with .custom are more specific, they get applied when the page is rendered!

More information about styling your Thesis installation using this file can be found

in the User's Guide:

http://diythemes.com/thesis/rtfm/customizing-thesis-with-customcss/

/*

File: custom.css

Description: Custom styles for Thesis