changes in CSS

Allgemeines
Post Reply
roze
Posts: 16
Joined: Wed 18. Sep 2013, 11:03

changes in CSS

Post by roze »

I have made some changes in the CSS of simplesyle3cols

My CSS looks now like this:

Code: Select all

@font-face {font-family: Montserrat; font-style: regular; font-weight: 400;}

@font-face {font-family: Montserrat; font-style: bold; font-weight: 900;}
@font-face {font-family: Montserrat; font-style: regular; font-weight: 700;}
@font-face {font-family: Montserrat; font-style: light; font-weight: 400; }

/* RESET BROWSERSTYLE */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,hr,blockquote,main,article,aside {padding: 0; margin: 0;}

/* GLOBAL */
h1, h2, h3 {font-family: Montserrat, RobotoCondensed, sans-serif; color: #234; font-size: 36px; line-height: 1.2em; font-weight: 100; padding: 0 0 6px 0; margin: 24px 0 10px 0;}
h4 {font-family: Montserrat, sans-serif; color: #234; font-size: 32px; line-height: 1.2em; font-weight: 100; margin: 24px 0 10px 0;}
h5 {font-family: Montserrat, sans-serif; color: #234; font-size: 30px; line-height: 1.2em; font-weight: 100; margin: 24px 0 10px 0;}
h6 {font-family: Montserrat, sans-serif; color: #234; font-size: 28px; line-height: 1.2em; font-weight: 100; margin: 24px 0 10px 0;}
p {margin: 10px 0;}
ol {margin: 6px 0;}
ol li {line-height: 1.4em; border: 0; padding: 3px 0; margin: 2px 0 2px 22px;}
ul {list-style-image: url(images/inhlist.gif); margin: 6px 0;}
ul li {line-height: 1.4em; border: 0; padding: 3px 0; margin: 2px 0 2px 17px;}
hr {height: 1px; clear: both; color: #aaa; background-color: #aaa; border: 0; margin: 16px 0;}
blockquote {background: #eee; font-style: italic; padding: 1px 0 1px 20px; border-left: 3px solid #999;}





/* 
##############################
 C O N T E N T  C L A S S E S 
##############################
*/

img {box-sizing: border-box; max-width: 100%;}
img.tplge_left_border {float: left; max-width: 48%; border: 5px solid #ff0000; margin: 0 20px 10px 0;}
img.tplge_left_noborder {float: left; max-width: 48%; border: 0; margin: 0 20px 10px 0;}
img.tplge_right_border {float: right; max-width: 48%; border: 5px solid #998; margin: 0 0 10px 20px;}
img.tplge_right_noborder {float: right; max-width: 48%; border: 0; margin: 0 0 10px 20px;}
img.tplge_border {border: 5px solid #998;}
img.tplge_noborder {border: 0;}
img.tplge_centered {display: block; margin: 24px auto;}

.tplge_code {clear: both; background: #e9e9e0; color: #333; font-family: 'courier new', monospace; font-size: 15px; border: 1px solid #ccc; padding: 10px 16px; overflow: scroll;}
.tplge_box01 {clear: both; background: #f6f6f3; border: 4px double #aaa; padding: 12px 16px; margin: 16px 0;}
.tplge_legal {padding: 6px 0;}

.tplge_clearLeft {clear: left;}
.tplge_clearRight {clear: right;}
.tplge_clearBoth {clear: both;}





/* 
##############################
           B O D Y
##############################
*/

/* BODY UND SEITE / BODY AND PAGE */
body {background: #fff; font-size: 17px; color: #444; font-family: Montserrat, arial, sans-serif; line-height: 1.4em;}
#body {background: #464640; min-width: 720px; font-size: 17px; color: #444; text-align: left;}





/* M A I N  (CONTENTS) */

.tplge_main {background: #fff;}
.tplge_mainIn {width: 1200px; padding: 0 0 36px 0; margin: 0 auto;}



/* CONTENT */

.tplge_content {box-sizing: border-box; width: 900px; float: right;}

/* languagemenu */
.tplge_langmenu {min-height: 12px; float: right; padding: 16px 25px 0 25px;} 
.tplge_langmenu img {float: right; padding: 0 0 0 24px;} 

.tplge_content img.tplge_logo {display: none; box-sizing: border-box; border: 0px solid #969690; border-radius: 7px; margin: 0 0 16px 9px;}
header h1 {font-size: 48px; padding: 0 25px; margin: 0;}

/* locator */
.tplge_locator {font-size: 16px; text-align: left; padding: 6px 25px 0 25px;}
.tplge_locator span.locator_text {font-weight: 700; padding: 0 6px 0 0;}

.tplge_article {box-sizing: border-box; width: 600px; float: left; padding: 0 25px;}

/* sidebarInfo and newsboxes */
.tplge_sidebarInfo {box-sizing: border-box; width: 300px; float: left;}
.tplge_newsboxInfo {box-sizing: border-box; width: 300px; float: left; padding: 6px 25px 0 25px;}

/* mailform */
#tplge_content input.text {background: #f6f6f3; border: 1px solid #ccc;}
#tplge_content textarea {width: 98%; background: #f6f6f3; border: 1px solid #ccc;}
#tplge_content input.submit, #tplge_content input#submit {background: url(images/button.jpg) repeat-x; color: #333; font-size: 15px; line-height: 20px; border: 1px solid #666; border-radius: 3px; padding: 2px 6px; margin: 0 6px 0 0;}

/* prev-top-next */
.tplge_prevtopnext {clear: both; text-align: center; padding: 24px 0 16px 0; margin: 0;}
.tplge_prevtopnext span {padding: 0 24px;}
.tplge_prevtopnext img {background: #c0c6c9; padding: 9px; border: 0px solid #c0c6c9; border-radius: 16px;}
.tplge_prevtopnext img:hover {background: #a0a6a9;}

/* sitemap */
.sitemaplevel1 {font-size: 16px; font-weight: 700;}
.sitemaplevel2 {font-size: 15px; font-weight: 100;}



/* SIDEBAR NAV */

.tplge_sidebarNav {box-sizing: border-box; width: 300px; float: left; padding: 10px 25px 0 25px;} 
.tplge_sidebarNav img.tplge_logo {display: block; box-sizing: border-box; border: 0px solid #000000; border-radius: 7px; margin: 0 0 16px 9px;}

/* searchbox */
.tplge_searchboxContainer {width: 246px; background: #fff url('images/lupe1.jpg') right top no-repeat; border: 2px solid #969690; border-radius: 17px; color: #620; padding: 0; margin: 0; overflow: hidden;}
#searchbox {text-align: left; padding: 0; margin: 0;}
#searchbox input.submit {background: none; color: transparent; font-family: courier new; font-size: 24px; line-height: 24px; font-weight: 700; border: 0px solid #999; padding: 3px 0 0 0; margin: 0;}
#searchbox input.submit:hover {cursor: pointer;}
#searchbox input.text {width: 184px; background: #f6f9f9; float: left; font-size: 14px; border: 0; border-right: 1px solid #999; border-radius: 15px 0 0 15px; padding: 6px 12px; margin: 0;}

/* nav / toc */
nav {}

nav ul.menulevel1 {list-style: none; padding-top: 3px;}
nav ul.menulevel2 {list-style: none; padding-bottom: 4px;}
nav ul.menulevel3 {list-style: none;}
nav ul.menulevel4 {list-style: none;}
nav ul.menulevel5 {list-style: none;}
nav ul.menulevel6 {list-style: none;}

ul.menulevel1 li {font-family: Amatic, sans-serif; background: #FFFFFF;color: #000000; font-size: 20px; font-weight: 400; border-radius: 3px; padding: 4px 12px 6px 12px; margin: 6px 0;}
ul.menulevel2 li {font-family: RobotoCondensed, arial, sans-serif; font-size: 17px; font-weight: 600; padding: 8px 0 0 16px;} 
ul.menulevel3 li {font-family: RobotoCondensed, arial, sans-serif; font-size: 17px; font-weight: 400; padding: 8px 0 0 16px;} 

/* icons div */
.tplge_icons {text-align: left; padding: 25px 25px 0 25px;}
#tplge_icons img {border: 0; margin: 0 12px 0 4px;}

/* newsbox */
.tplge_newsbox {}
.tplge_newsbox h4,.tplge_newsboxInfo h4 {font-size: 28px;}
.tplge_newsbox h5,.tplge_newsboxInfo h5 {font-size: 26px;}
.tplge_newsbox h6,.tplge_newsboxInfo h6 {font-size: 24px;}





/* F O O T E R */

.tplge_footer {clear: both; color: #aaa; font-size: 15px; text-align: right; border-top: 0px solid #eee; padding: 16px 24px 120px 24px; margin: 0;}





/* L I N K S */

a:link {color: #258; text-decoration: none;}
a:visited {color: #258; text-decoration: none;}
a:hover {color: #c60; text-decoration: underline;}
a:active {color: #c60; text-decoration: underline;}
a:focus {color: #c60; text-decoration: underline;}

nav a:link {color: #eee; text-decoration: none;}
nav a:visited {color: #eee; text-decoration: none;}
nav a:hover {color: #fc0; text-decoration: none;}
nav a:active {color: #fc0; text-decoration: none;}
nav a:focus {color: #fc0; text-decoration: none;}

footer a:link {color: #eee; text-decoration: none;}
footer a:visited {color: #eee; text-decoration: none;}
footer a:hover {color: #fc0; text-decoration: none;}
footer a:active {color: #fc0; text-decoration: none;}
footer a:focus {color: #fc0; text-decoration: none;}





/* 
##############################
 S O N S T I G E S / R E S T
############################## 
*/

/* scroll buttons */

#tplge_up {background: #000; position: fixed; bottom: 48px; right: 3px; border: 3px solid #999; border-radius: 23px; padding: 5px 7px 4px 7px; opacity: 1; transition: 2s;}
#tplge_up:hover {background: #456; transition: none;}

img.tplge_scrolltoContentButton {display: none; background: #000; position: fixed; top: 2px; left: 5px; z-index: 999; border: 1px solid #999; border-radius: 3px; padding: 2px 3px; opacity: 1}
img.tplge_scrolltoNewsButton {display: none; background: #000; position: fixed; top: 2px; left: 56px; z-index: 999; border: 1px solid #999; border-radius: 3px; padding: 4px; opacity: 1}
img.tplge_scrolltoMenuButton {display: none; background: #000; position: fixed; top: 2px; left: 105px; z-index: 999; border: 1px solid #999; border-radius: 3px; padding: 4px 2px; opacity: 1}

img.tplge_scrolltoMenuButton:hover {background: #456;}
img.tplge_scrolltoNewsButton:hover {background: #456;}
img.tplge_scrolltoContentButton:hover {background: #456; transition: 0s;}


/* background for scroll buttons */

div.tplge_fixed {display: none; width: 100%; height: 30px; background: #000; position: fixed; top: 0; right: 0; z-index: 299;  padding: 4px; opacity: 0.7;}





/* 
############################## 
   R E S P O N S I V E  CSS
############################## 
*/

@media (max-width: 1240px) {
#body {min-width: 320px;}
.tplge_mainIn {width: 900px}
.tplge_content {width: 600px;}
.tplge_sidebarInfo {width: 600px;}
}



@media (max-width: 940px) {
.tplge_mainIn {width: 600px;}
.tplge_content {width: 600px; padding-top: 30px;}
.tplge_content img.tplge_logo {display:block; padding: 0;}
.tplge_locator {padding-top: 48px;}
.tplge_newsboxInfo {float: left; padding-top: 24px; padding-bottom: 0;}
.tplge_sidebarNav {clear: both; width: 300px; float: none; margin: 0 auto;}
.tplge_sidebarNav img.tplge_logo {display:none;}
.tplge_menuAnchor {height: 48px;}
.tplge_newsbox {padding-top: 0;}

img.tplge_scrolltoContentButton {display: block;}
img.tplge_scrolltoNewsButton {display: block;}
img.tplge_scrolltoMenuButton {display: block;}
div.tplge_fixed {display: block;}
}



@media (max-width: 639px) {
.tplge_mainIn {width: 480px;}
.tplge_content {width: 480px;}
.tplge_article {width: 480px;}
.tplge_sidebarInfo {width: 300px; float: none; margin: 0 auto;}
}



@media (max-width: 519px) {
.tplge_mainIn {width: 320px;}
.tplge_content {width: 320px;}
.tplge_article {width: 320px;}
.tplge_sidebarInfo {width: 300px; float: none; margin: 0 auto;}
}





/* Hamburger Menü */
/*
div.tplge_respToc {
position: absolute; top: 10px; left: 0; z-index: 999;
width: 48px; 
height: 36px;
font-family: arial, sans-serif;
font-size: 15px;
border: 0px solid #999;
padding: 0;
margin: 0 10px 24px 10px;
overflow: hidden;
}

.tplge_respToc:hover {width: 300px; height: auto;}
.tplge_respToc img {display: block; margin: 0;}

.tplge_respToc ul.menulevel1 {min-width: 260px; border: 2px solid #123; padding: 8px 0 16px 0;}

.tplge_respToc ul {background: #fff; border-radius: 5px; padding: 0 0 9px 0; margin: 14px 0 2px 0;}
.tplge_respToc ul ul {background: #345;}
.tplge_respToc ul ul ul {background: #456;}
.tplge_respToc ul ul ul ul {background: #567;}
.tplge_respToc ul ul ul ul ul {background: #678;}

.tplge_respToc li {color: #fc0!important; padding: 12px 6px 4px 16px; margin: 0;}

.tplge_respToc a:link {color: #fff; text-decoration: none;}
.tplge_respToc a:visited {color: #fff; text-decoration: none;}
.tplge_respToc a:hover {color: #fc0; text-decoration: none;}
.tplge_respToc a:active {color: #fc0; text-decoration: none;}
.tplge_respToc a:focus {color: #fc0; text-decoration: none;}
*/
/* End Hamburger Menü */
I don't know how to make the navigation menu visible in black......

http://www.stichtingvaart.nl
Rob | Valkenswaard NL
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: changes in CSS

Post by Gert »

Define background of:

Code: Select all

nav {} 
or

Code: Select all

nav ul.menulevel1 {}
Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services
roze
Posts: 16
Joined: Wed 18. Sep 2013, 11:03

Re: changes in CSS

Post by roze »

Thank you for responding.

I've tried to define the background 4 different ways, but it seems I miss the clue...

Code: Select all

/* SIDEBAR NAV */

.tplge_sidebarNav {box-sizing: border-box; width: 300px; float: left; padding: 10px 25px 0 25px;background-color: lightblue} 
.tplge_sidebarNav img.tplge_logo {display: block; box-sizing: border-box; border: 0px solid #000000; border-radius: 7px; margin: 0 0 16px 9px;}

Code: Select all

/* SIDEBAR NAV */

.tplge_sidebarNav {box-sizing: border-box; width: 300px; float: left; padding: 10px 25px 0 25px;} 
.tplge_sidebarNav img.tplge_logo {display: block; box-sizing: border-box; border: 0px solid #000000; border-radius: 7px; margin: 0 0 16px 9px;background-color: lightblue}

Code: Select all

nav ul.menulevel1 {list-style: none; padding-top: 3px;background-color: lightblue}

Code: Select all

/* nav / toc */
nav {background-color: lightblue}
I've chosen light blue to see what's the difference: nothing. :x

can you help me?
Rob | Valkenswaard NL
roze
Posts: 16
Joined: Wed 18. Sep 2013, 11:03

Re: changes in CSS

Post by roze »

Oh, there is a change: I see the light blue.

but I want the background white (the same as the content-part, but the menu items black, the color of the letters...

so I've to change something different, but I don't know what..
Rob | Valkenswaard NL
Gert
Posts: 2075
Joined: Sun 18. Nov 2012, 14:18

Re: changes in CSS

Post by Gert »

Change the link colors for nav, search for /* L I N K S */ in stylesheet.css.
Gert Ebersbach | CMSimple | Templates - Plugins - Services
roze
Posts: 16
Joined: Wed 18. Sep 2013, 11:03

Re: changes in CSS

Post by roze »

Gert,

Many thanks!

Grtz,

Rob
Rob | Valkenswaard NL
Post Reply