Colour change Santa Fe

[Yami]

Hi everyone,
I am using Sante Fe theme on Omeka. I tried to change the colour, but it isn’t working. I used the CSS plugin; it allows me to change the colour but then it affects the layout as the search bar loses its position on the page.

Does anyone happen to know how I change the colour without affecting the search bar?

[DanieleB]

Could you post your changes here? Colors and positions are not related, so there might be something wrong in your css.

[Yami]

Hi Daniele,
Please find below my CSS:

body {
margin:0
}

article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block
}

video {
display:inline-block;
vertical-align:baseline
}

a {
background-color:transparent
}

b, strong {
font-weight:700
}

dfn {
font-style:italic
}

h1 {
font-size:2em;
margin:0.67em 0
}

mark {
background:#ff0;
color:#000
}

small {
font-size:80%
}

sub, sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}

sup {
top:-0.5em
}

sub {
bottom:-0.25em
}

img {
border:0
}

figure {
margin:1em 40px
}

hr {
height:0
}

pre {
overflow:auto
}

code, kbd, pre, samp {
font-family:monospace, monospace;
font-size:1em
}

input {
line-height:normal
}

table {
border-collapse:collapse;
border-spacing:0
}

td, th {
padding:0
}

@media screen {
body {
font:12px Verdana, Arial, sans-serif;
line-height:18px;
color:#222;
background-color:#D5D2B8
}

#wrap {
border-top:36px solid #D2267D
}

#site-title {
width:100%;
color:#fafafa;
text-align:center;
padding:18px 0
}

#site-title a {
color:#fafafa;
text-decoration:none;
font-size:24px;
line-height:36px
}

h1, h2, h3, h4 {
margin:0
}

h1 {
font-size:27px;
line-height:36px;
color:#D2267D;
margin-bottom:18px;
font-weight:400
}

h2 {
font-size:21px;
line-height:36px;
font-weight:400;
margin-bottom:18px
}

h3 {
font-size:18px;
margin-bottom:18px
}

p, ul, ol, dl {
margin:18px 0
}

i, em {
font-style:italic
}

b, strong {
font-weight:700
}

a {
color:#D2267D;
text-decoration:none
}

a:hover {
text-decoration:underline
}

input {
font-family:Verdana, Arial, sans-serif;
font-size:12px;
line-height:18px;
padding:0 5px;
border:0;
min-height:27px
}

.button {
background-color:#000 !important;
color:#fff;
line-height:27px
}

.field {
margin-bottom:18px
}

table {
margin:18px auto
}

tr * {
border-top:1px solid #d3d6bc;
padding-top:9px
}

th, td {
border-right:1px solid #d3d6bc
}

th {
background-color:#d3d6bc
}

caption {
font-style:italic
}

.exhibit-thumbnail {
float:left;
padding:0 10px 0 0
}

.odd .exhibit-thumbnail {
float:left;
padding:0 10px 0 0
}

.even .exhibit-thumbnail {
float:right;
padding:0 0 0 10px
}

.image img {
height:63px;
width:auto;
float:left;
border:1px solid rgba(0,0,0,0.2);
margin:0 9px 9px 0
}

.collection .image img, .exhibit .image img {
margin-left:6px
}

ul.navigation, ul.pagination, #sort-links ul, #sort-links span {
padding:0;
list-style-type:none
}

ul.pagination {
overflow:hidden;
clear:both
}

.pagination li {
border-right:1px solid #d3d6bc
}

.page-input, .pagination_next a, .pagination_previous a {
display:block;
height:45px
}

.pagination_next a, .pagination_previous a {
font-family:FontAwesome;
text-indent:0;
position:absolute;
left:0;
top:0;
bottom:0;
width:45px;
text-align:center;
line-height:49.5px
}

.page-input {
width:3em
}

#sort-links {
border-bottom:1px solid #d3d6bc;
margin-bottom:18px;
line-height:45px
}

#sort-links span, #sort-links ul, #sort-links li, #sort-links a {
display:block;
float:left;
margin:0
}

#sort-links span, #sort-links a {
margin-right:1em;
padding:9px 0
}

.asc a, .desc a {
font-family:FontAwesome
}

.current, .active {
font-weight:700
}

#outputs {
clear:both
}

.item, .collection, .exhibit {
border-bottom:1px solid #d3d6bc;
padding-bottom:17px;
margin-bottom:18px;
clear:both;
overflow:hidden
}

.item p, .collection p, .exhibit p {
margin-bottom:0
}

.item + .pagination-nav, .collection + .pagination-nav, .exhibit + .pagination-nav {
margin-top:-9px
}

.items.show .element {
margin-bottom:36px
}

.item img, .item-img, .item-file img {
float:left;
margin:0 9px 9px 0;
border:1px solid rgba(0,0,0,0.2);
overflow:hidden
}

.item img {
height:63px
}

#itemfiles .item-file img {
height:108px
}

.files .item-file img {
max-width:100%;
margin-right:0
}

.item-img img {
margin:0;
border:0
}

.title-list {
clear:both
}

.hTagcloud ul {
padding:0;
margin:18px 0;
overflow:visible
}

.hTagcloud li {
display:inline-block;
margin:6px 10px
}

.hTagcloud li a {
display:inline-block;
background-color:#d3d6bc;
padding:9px
}

.popular a {
font-size:120%
}

.v-popular a {
font-size:140%
}

.vv-popular a {
font-size:180%
}

.vvv-popular a {
font-size:220%
}

.vvvv-popular a {
font-size:260%
}

.vvvvv-popular a {
font-size:300%
}

.vvvvvv-popular a {
font-size:320%
}

.vvvvvvv-popular a {
font-size:340%
}

.vvvvvvvv-popular a {
font-size:360%
}

#header {
border:1px solid #fff;
border-width:1px 0;
background:#444
}

#header .center-div {
display:block;
height:0;
clear:both
}

#search-container, #search-form {
width:100%;
clear:both;
position:relative
}

#search-container {
padding:0 1em 18px
}

#search-form .show-advanced.button, #search-form {
font-family:FontAwesome;
text-indent:0;
position:absolute;
width:27px;
height:27px;
left:0;
top:0;
bottom:0;
text-align:center
}

#query {
width:100%;
padding-right:27px;
height:27px
}

.show-advanced.button {
border-left:1px solid rgba(0,0,0,0.2)
}

#advanced-form {
margin:0;
padding:0
}

#advanced-form.closed {
display:none
}

#advanced-form #query-types :first-child {
margin-top:0
}

#advanced-form p {
margin-bottom:0
}

#skipnav {
border:0;
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px
}

#skipnav:focus {
top:0;
z-index:9999;
height:auto;
width:auto;
padding:0.5em;
border:1px #00F dashed
}

ul h3 {
font-size:1.6em
}

.tags {
margin-top:3px
}

#backlink {
float:right;
font-size:1.5em;
display:block;
padding-right:8px
}

#content {
background:#fff;
padding:18px 1em;
overflow:hidden
}

.center-div {
display:block;
clear:both
}

#login-status {
float:right;
color:#D5D2B8;
padding:10px 0.55em 0 0
}

#primary-nav {
width:100%;
display:block
}

#primary-nav ul {
display:none
}

.secondary-nav, #secondary-nav {
border-bottom:1px solid #d3d6bc;
padding-bottom:8px;
width:100%;
margin:-9px 0 0;
overflow:hidden
}

.secondary-nav li, #secondary-nav li {
display:block;
float:left;
margin-right:1em
}

.secondary-nav a, #secondary-nav a {
color:#D2267D
}

.secondary-nav a:hover, #secondary-nav a:hover {
color:#D2267D;
text-decoration:none
}

.featured, #featured-exhibit {
margin-bottom:0
}

.featured .record, #featured-exhibit .exhibit {
border-bottom:0;
padding:0;
overflow:visible
}

#recent-items {
border:none;
background-color:#d3d6bc;
padding:18px 1.69492%
}

#recent-items .item, #recent-items .item img {
border-color:#D2267D
}

#intro {
width:100%;
padding:10px 0
}

#advanced-search-form {
padding:18px 0
}

#submit_search_advanced {
clear:both;
float:left
}

.no-results {
margin:10px
}

#item-filters, #search-filters {
border-bottom:1px solid #d3d6bc
}

#item-filters ul, #search-filters ul {
margin:0;
padding:0;
list-style-type:none
}

#item-filters ul li, #search-filters ul li {
margin:9px 9px 9px 0
}

#item-filters li, #search-filters li {
display:inline-block;
background-color:#d3d6bc;
padding:4.5px;
border:0;
overflow:visible
}

#item-filters ul ul, #search-filters ul ul {
display:inline
}

#item-filters ul ul li, #search-filters ul ul li {
padding:0
}

.search-entry {
margin-bottom:9px
}

.search-entry:first-child .advanced-search-joiner {
display:none
}

.search-entry .advanced-search-joiner {
width:5em
}

.search-entry, .search-entry {
margin-right:0.5%
}

.search-entry input {
vertical-align:top
}

.remove_search {
font-family:FontAwesome;
text-indent:0;
text-align:center;
width:100%;
top:0;
left:0;
position:absolute;
line-height:27px
}

#search-results {
width:100%
}

#search-results th {
text-align:left
}

#search-results th, #search-results td {
border-left-color:transparent;
border-right-color:transparent;
vertical-align:top
}

#search-results .image {
float:left
}

#search-results .image img {
height:72px;
width:auto;
margin:0 9px 0 0
}

.browse .exhibit {
clear:both
}

#exhibit-pages {
overflow:hidden;
background-color:#f2f3eb;
margin:0;
border:1px solid #D2267D;
border-width:1px 0;
padding:17px 1.26582%
}

#exhibit-pages * {
width:74.57627%;
float:left;
margin-right:1.69492%;
clear:right
}

#exhibit-pages ul ul, #exhibit-pages .child-pages {
margin:0;
overflow:hidden;
padding:0 0 0 11.11111%;
border-left:1px solid #D2267D
}

#exhibit-pages .current ul {
font-weight:400
}

#exhibit-pages li {
list-style-type:none;
float:none;
padding-top:9px
}

#exhibit-pages h4 {
font-size:15px;
margin-bottom:9px;
margin-right:-6.32911%;
margin-left:-6.32911%;
padding-right:6.32911%;
padding-left:6.32911%;
border-bottom:1px solid #D2267D;
padding-bottom:12.5px
}

#exhibit-pages ul {
margin:0;
padding:0
}

#exhibit-pages ul li li {
display:none
}

#exhibit-pages ul li.current li {
display:block
}

.exhibits.browse .secondary-nav + nav.pagination-nav {
position:absolute;
height:1px;
width:100%;
bottom:0;
left:0;
background-color:#d3d6bc
}

.exhibit-block {
margin-bottom:0
}

.show.collections .element {
margin-bottom:18px
}

.browse.collections .element {
clear:none
}

.collections .view-items-link {
margin:18px 0;
display:block
}

.show.collections .view-items-link {
font-size:15px
}

#footer {
margin:0;
width:100%;
clear:both;
border:1px solid #fff;
background-color:#D2267D;
overflow:hidden;
padding:0 5.26316%
}

#footer li {
display:inline
}

#footer .navigation li {
margin-right:0.5em
}

#footer a {
color:#D5D2B8
}

#footer p {
color:#D5D2B8
}

#recaptcha_area input {
min-height:0
}
}

@media screen and (min-width: 768px) {
#site-title {
width:50%;
float:left;
text-align:left;
padding:18px 0 18px 1em
}

div#search-container {
width:23.72881%;
float:right;
margin-right:0;
clear:none;
margin-top:22.5px;
padding-right:1em
}

.center-div {
margin:0 11.11111%
}

#header .center-div {
position:relative;
padding:0
}

#primary-nav {
overflow:visible;
padding:0
}

#primary-nav .nav-menu {
display:block;
position:relative;
list-style:none;
margin:0;
padding:0;
z-index:15;
width:100%;
background-color:#000;
float:left
}

#primary-nav .nav-item {
list-style:none;
display:inline-block;
padding:0;
margin:0
}

#primary-nav .nav-item a {
position:relative;
margin:0 0 -1px;
color:#D2267D;
display:block;
float:left;
padding:10px
}

#primary-nav .nav-item a.open {
background-color:#fff;
border:1px solid #dedede;
border-bottom:none;
z-index:1
}

#primary-nav .sub-nav {
position:absolute;
display:none;
top:38.25px;
margin-top:-1px;
padding:0.5em 1em;
border:1px solid #dedede;
border-top:0;
background-color:#fff;
z-index:2
}

#primary-nav .sub-nav.open {
display:block
}

#primary-nav .sub-nav ul {
display:block;
vertical-align:top;
margin:0 1em 0 0;
padding:0 0 0 1em
}

#primary-nav .sub-nav li {
display:block;
list-style-type:none;
margin:0;
padding:0
}

#primary-nav .sub-nav a {
padding:9px;
display:block;
position:relative;
z-index:2
}

#primary-nav .mobile {
display:none
}

#footer {
min-height:30px
}

#content {
padding:18px 1em
}

#home #content div {
width:66.10169%;
float:left;
margin-right:1.69492%
}

#home #content #recent-items {
float:left;
overflow:hidden;
padding:0.5em 0;
width:32.20339%;
margin-right:1.69492%;
margin-left:0;
background:#D3D6BD
}

.pagination {
margin:9px 0
}

.featured, #featured-exhibit {
width:66.10169%;
float:left;
margin-right:1.69492%
}

#recent-items {
width:32.20339%;
display:inline-block
}

#intro {
width:82.64463%
}

.field {
margin-bottom:18px;
overflow:hidden
}

.field, .field .label {
width:23.07692%;
float:left;
margin-right:2.5641%;
margin-bottom:18px
}

.field .inputs {
width:100%
}

.search-entry {
margin-bottom:18px
}

.pagination-nav {
float:left
}

#sort-links {
text-align:right
}

#sort-links span, #sort-links ul {
display:inline-block;
float:none;
vertical-align:top
}

#sort-links span, #sort-links a {
padding:13.5px 0;
margin:0 0 0 1em
}

.item-description {
clear:none
}

.exhibits.summary #primary, .exhibits #content h1, #exhibit-blocks, #exhibit-page-navigation {
width:74.57627%;
float:right;
margin-right:0
}

#exhibit-pages {
width:23.72881%;
display:inline-block
}
}

As well, the link to my Omeka page:
https://hums3052yamilaalonso.omeka.net/exhibits/show/migration-australia

The area that says “Yamila Alonso” and the “Advance Search” tool is missing the black background. The search button should have the pink colour and not be green. As well, the wording Advance Search is behind the search button and is not easy to read because it is not in one line.

Could you please help me fix it?

[DanieleB]

Hi.
Well, you’ve made quite a few changes there I’m afraid you might have overloaded your theme with CSS changes that are messing up completely (have you checked your other pages? this is what I see when browsing for Items on Chrome):

So, I would suggest a complete rethinking, starting from the vanilla theme, but that’s up to you of course.
As for your requests, 2 are simple:

• title area: add background-color: black; to #site-title;
• search button: create #search-form button and add background-color: #d2267d to it.

As for the Advanced Search area, it’s a bit trickier: you’ve reduced the height of #search-form button to 0, and that’s the div you’d want to use to change the background color of both Title and Advanced Search areas. My suggestion would be to remove that height: 0, and then add the background color you prefer; but then you’ll have issues with the borders… so we’re back to the original suggestion.

Hope this helps (a little).