It was time for a new theme and I tossed Twenty Fourteen on… Then, I found this sweet little css input area (yes I’ve seen them before but I tend to avoid them because they overide rules elsewhere in the theme by outputting css inline with the html)… But then I figured hey… this thing looks terrible, but it works great, so I made lemonade… and what makes that lemonade even sweeter is that I can update my blog with the code I added.
Love Twentyfourteen?
Hate the Web-Design of Twentyfourteen?
Download the Dabzo Interaction
Twentyfourteen Child-theme!
Before I hit ‘ctrl-v’ and ‘unleash the fury’ I’d like to point out a couple of things that take place in this stylesheet.
First off, I’ve copy / pasted the rules I want to change from the parent css in their entirety and left a lot of commented out data… This is mostly because I’m lazy but also adds maintainability to my code – I can refer to rules nearby the rules I modified and have a slightly better understanding of what the environment I’m working in is.
I like to comment out things… Remember commenting out html and php are different. The php output won’t show on the page if you comment out the html it outputs, but it still uses resources when it executes. So comment out with these: I’ve been using this one lately for html & php documents <?/*?>this is commented out in both html and php<?*/?>…. But doesn’t have to be within a php-block.
Another thing you can notice about (at line 99 of) this stylesheet is that anything that happen in a media-query in the parent stylesheet had to happen in the same media-query to be over-wrote by a child-stylesheet.
Here’s those css tweaks for the Twenty Fourteen theme (possibly to be updated)
** Update: I’ve elaborated on this style-sheet and then some in the twentfourteen child-theme for this site – So go download it if you like!
/*
Welcome to Custom CSS!
CSS (Cascading Style Sheets) is a kind of code that tells the browser how
to render a web page. You may delete these comments and get started with
your customizations.
By default, your stylesheet will be loaded after the theme stylesheets,
which means that your rules can take precedence and override the theme CSS
rules. Just write here what you want to change, you don't need to copy all
your theme's stylesheet content.
*/
.site{margin:0 auto}
a {
color: #0074a2;
/* text-decoration: none;
*/
}
::selection {
background: #0074a2;
/* color: #fff;
text-shadow: none;
*/
}
::-moz-selection {
background: #0074a2;
/* color: #fff;
text-shadow: none;
*/
}
button,
.contributor-posts-link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
background-color: #0074a2;
/* border: 0;
border-radius: 2px;
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 10px 30px 11px;
text-transform: uppercase;
vertical-align: bottom;
*/
}
.search-toggle {
background-color: #0074a2;
/* cursor: pointer;
float: right;
height: 48px;
margin-right: 38px;
text-align: center;
width: 48px;
*/
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
background: #0074a2;
}
.paging-navigation .page-numbers.current {
border-top: 5px solid #0074a2;
}
.widget button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"] {
background-color: #0074a2;
/* border: 0;
font-size: 12px;
padding: 5px 15px 4px;
*/
}
.widget_calendar tbody a {
background-color: #0074a2;
/* color: #fff;
display: block;
*/
}
.content-sidebar .widget a {
color: #0074a2;
}
.content-sidebar .widget input[type="button"],
.content-sidebar .widget input[type="reset"],
.content-sidebar .widget input[type="submit"] {
background-color: #0074a2;
/* border: 0;
color: #fff;
*/
}
.slider-control-paging .slider-active:before,
.slider-control-paging .slider-active:hover:before {
background-color: #0074a2;
}
.slider-direction-nav a:hover {
background-color: #0074a2;
}
@media screen and (min-width: 783px) {
.primary-navigation ul ul {
background-color: #0074a2;
/* float: left;
margin: 0;
position: absolute;
top: 48px;
left: -999em;
z-index: 99999;
*/
}
.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
background-color: #0074a2;
/* color: #fff;
*/
}
.secondary-navigation ul ul {
background-color: #0074a2;
/* position: absolute;
top: 0;
left: -999em;
width: 182px;
z-index: 99999;
*/
}
.secondary-navigation li:hover > a,
.secondary-navigation li.focus > a {
background-color: #0074a2;
/* color: #fff;
*/
}
}
a:active,
a:hover {
/* color: #41a62a;
*/ text-decoration:underline;
}
button:hover,
button:focus,
.contributor-posts-link:hover,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: #148dbc;
/* color: #fff;
*/
}
.search-toggle:hover,
.search-toggle.active {
background-color: #148dbc;
}
.search-box {
background-color: #148dbc;
/* padding: 12px;
*/
}
.ngg-gallery-thumbnail-box {
/* float:left;
*/ margin-right:0!important;
}