I'm novice, in this field.
I'm trying to customize template in cmsimple, but I'm trying to change fields, that is not working as I want.
Maybe I picked to complicated template? A whole design, is made in CSS and I need to change a little display properties.
But maybe I have no luck, and whatever I'm doing, something does not work as supposed.
Generally I'm using template theme reed online.
MY URL:
http://lobynas.eu
I must change width of content, and make menu and news box for about 200px. (I found right field to make it)
I want to make it auto width from 800px to 1368px resolution.
I want that right and left menu and news boxes, moves automatically up 1368px screen resolution to the left and right side. And content is at least 650px width.
I have tried many times, to change things in layout, and things not going well. It's not traditional html based template and i'm trying to make changes for many hours, almost always news box going down, and content does not center at all, and my brains starts to boiling, because I do not understand it. Why if I change one or to things in resolution, it's always braking apart.
I'm asking for help, to make changes in css code. How to make it work properly. Any advice?
Big thanks for any word.
Maybe there is similar and easier template to modify?
Code: Select all
/* RESET BROWSERSTYLE */
* {padding: 0; margin: 0;}
/* GLOBAL STYLES */
h1, h2, h3 {font-family: century gothic, verdana, sans-serif; color: #221; font-size: 24px; line-height: 1.6em; font-weight: 300; letter-spacing: 1px; border-bottom: 0px solid #999; padding: 0; margin: 0;}
h4 {font-family: century gothic, verdana, sans-serif; color: #221; font-size: 20px; line-height: 1.4em; font-weight: 300; letter-spacing: 1px; margin: 15px 0 10px 0;}
h5 {font-family: century gothic, verdana, sans-serif; color: #221; font-size: 18px; line-height: 1.4em; font-weight: 300; letter-spacing: 1px; margin: 15px 0 10px 0;}
h6 {font-family: century gothic, verdana, sans-serif; color: #221; font-size: 16px; line-height: 1.4em; font-weight: 300; letter-spacing: 1px; margin: 15px 0 10px 0;}
p {margin: 10px 0;}
ol {margin: 6px 0;}
ol li {line-height: 1.0em; border: 0; padding: 3px 0; margin: 0 0 0 22px;}
ul {list-style-image: url(images/inhlist.gif); margin: 6px 0;}
ul li {line-height: 1.0em; border: 0; padding: 3px 0; margin: 0 0 0 17px;}
hr {clear: both; height: 1px; color: #999; background-color: #999; border: 0; margin: 5px 0 3px 0;}
/*
##############################
C O N T E N T C L A S S E S
##############################
*/
.tplge_left_border {background: #fff; float: left; border: 1px solid #999; padding: 6px; margin: 0 20px 10px 0;}
.tplge_left_noborder {float: left; border: 0; margin: 0 20px 10px 0;}
.tplge_right_border {background: #fff; float: right; border: 1px solid #999; padding: 6px; margin: 0 0 10px 20px;}
.tplge_right_noborder {float: right; border: 0; margin: 0 0 10px 20px;}
.tplge_border {background: #fff; padding: 6px; border: 1px solid #999;}
.tplge_noborder {border: 0;}
.clear_both {clear: both;}
.clear_right {clear: right;}
.clear_left {clear: left;}
.tplge_code {background: #eed; font-family: 'courier new', monospace; border: 1px solid #997; padding: 20px;}
.tplge_box01 {clear: both; background: #e6e9e3; border: 4px double #998; padding: 16px; margin: 16px 0;}
.tplge_legal {padding: 6px 0;}
.XXXXXXXXXXXXXXXXXX {} /* Marker for styles menu tinymce */
/*
##############################
B O D Y
##############################
*/
body {background: #d6dcd0; font-family: arial, verdana, sans-serif; color: #555; font-size: 15px; line-height: 1.3em; padding: 0; margin: 0;}
body#tplge_body {min-width: 740px; background: #fff url(images/bgbody.jpg) center top no-repeat; color: #555; padding: 10px 9px 10px 0;}
#top {}
/*
##############################
L A Y O U T
##############################
*/
div#tplge_header {width: 100%; min-width: 740px; max-width: 996px; margin: 0 auto;}
div#tplge_locator {clear: both;}
div#tplge_main {width: 100%; min-width: 760px; max-width: 996px; margin: 0 auto;}
div#tplge_page {width: 745px; float: left;}
div#tplge_sidebarNav {width: 248px; float: left;}
div#tplge_content {width: 496px; float: left;}
div.tplge_news {width: 248px; float: left;}
div#tplge_notes {}
/* GLOBAL */
.tplge_inner {border: 0px solid #999; margin: 0 0 9px 9px;}
/*
##############################
D E S I G N
##############################
*/
/* GLOBAL */
a:link {color: #258; text-decoration: none;}
a:visited {color: #258; text-decoration: none;}
a:hover {color: #c60; text-decoration: none;}
a:active {color: #c60; text-decoration: none;}
a:focus {color: #c60; text-decoration: none;}
/* HEADER */
div#tplge_header {border-top: 1px solid transparent;}
div#tplge_header div.tplge_inner {border: 0px solid #0c0; padding: 12px 2px 0 0;}
#tplge_header h1 {width: 60%; float: left; font-family: century gothic, verdana, serif; color: #222; font-size: 24px; line-height: 1.2em; font-weight: 300; letter-spacing: 1px;}
/* searchbox */
div#searchbox {width: 35%; float: right; text-align: right;}
div#searchbox .text {width: 140px; background: #d6dcd0; color: #444; font-family: arial, sans-serif; font-size: 14px; border: 1px solid #fff; padding: 2px 3px;}
div#searchbox .submit {background: #222; color: #fff; border: 0px solid #fff; padding: 2px 6px;}
/* locator */
div#tplge_locator {font-family: arial, sans-serif; color: #444; padding: 42px 0 0 0;}
/* MAIN CONTAINER*/
div#tplge_main {padding-top: 6px; border-top: 0px solid #666; border-right: 0px solid #666; border-bottom: 0px solid #666;}
/* SIDEBAR NAVIGATION */
div#tplge_sidebarNav div.tplge_inner {border: 0px solid #ccc;}
/* toc */
#tplge_sidebarNav li {list-style-type: none; list-style-image: none;}
#tplge_sidebarNav ul.menulevel1 {font-family: century gothic, arial, sans-serif; color: #222; border: 0; padding: 0; margin: 0;}
#tplge_sidebarNav ul.menulevel1 li {background: #505f49; font-size: 15px; line-height: 1.2em; text-align: left; font-weight: 700; border: 0px solid #fff; padding: 10px 12px; margin: 0 0 9px 0;}
#tplge_sidebarNav ul ul.menulevel2 {border: 0; padding: 8px 0 4px 0; margin: 0;}
#tplge_sidebarNav ul ul.menulevel2 li {background: transparent; font-size: 15px; line-height: 1.2em; font-weight: 300; text-align: left; border: 0; padding: 0px 0 5px 1px; margin: 0;}
#tplge_sidebarNav ul ul ul.menulevel3 {margin: 3px 0;}
#tplge_sidebarNav ul ul ul.menulevel3 li {line-height: 1.2em; font-size: 14px; text-align: left; border: 0; padding: 4px 0 2px 16px; margin: 0;}
/* Links */
div#tplge_sidebarNav a:link {color: #ddd; text-decoration: none;}
div#tplge_sidebarNav a:visited {color: #ddd; text-decoration: none;}
div#tplge_sidebarNav a:hover {color: #fc0; text-decoration: none;}
div#tplge_sidebarNav a:active {color: #fc0; text-decoration: none;}
div#tplge_sidebarNav a:focus {color: #fc0; text-decoration: none;}
div#tplge_subnav {color: #fc3; background: #505f49; border: 0px solid #fff; padding: 1px 6px 5px 8px; margin: 0;}
div#tplge_subnav ul {padding: 0; margin: 10px 0;}
div#tplge_subnav ul li {padding: 4px 0; margin: 2px 4px;}
#tplge_sidebarNav p.tplge_lastupdate {font-size: 12px; color: #999; text-align: left; padding: 4px 0; margin: 2px 4px;}
/* active menu items */
#tplge_sidebarNav ul.menulevel1 li.sdocs {background: #768770;}
#tplge_sidebarNav ul.menulevel1 li.sdoc {background: #768770;}
#tplge_sidebarNav ul.menulevel2 li.docs {}
#tplge_sidebarNav ul.menulevel2 li.doc {}
/* INHALT / CONTENT */
#tplge_content div.tplge_inner {background: #c6ccc0; border: 6px solid #e6ece0; padding: 16px 20px;}
#tplge_content hr {clear: both; height: 1px; color: #999; background-color: #999; border: 0; margin: 5px 0 3px 0;}
/* vor-hoch-zurueck / prev-top-next */
#tplge_prevnext {clear: both; float: left; width: 100%; border: 0;}
#tplge_prevnext div.tplge_inner {text-align: center; border: 0; border-top: 1px solid #999; padding: 8px 0 0 0; margin: 12px 0 0 0;}
#tplge_prevnext div.tplge_inner span {padding: 0 6px 0 2px;}
/* NEWSBOXEN / NEWSBOXES */
div.tplge_news {line-height: 1.2em;}
div.tplge_news div.tplge_inner {background: #505f49; color: #ccd6c0; border: 0px solid #fff; padding: 12px 16px 16px 16px;}
div.tplge_news h4 {color: #fff; font-size: 18px; font-weight: 300; line-height: 1.4em; border: 0px solid #fff; padding: 4px 0 6px 0; margin: 0;}
div.tplge_news h5 {color: #fff; font-weight: 300; letter-spacing: 1px; margin: 10px 0 0 0;}
div.tplge_news h6 {color: #fff; font-weight: 300; letter-spacing: 1px; margin: 10px 0 0 0;}
/* Links */
div.tplge_news a:link {color: #eee; text-decoration: none;}
div.tplge_news a:visited {color: #eee; text-decoration: none;}
div.tplge_news a:hover {color: #f90; text-decoration: none;}
div.tplge_news a:active {color: #f90; text-decoration: none;}
div.tplge_news a:focus {color: #f90; text-decoration: none;}
/* FUSSLINKS / FOOTER LINKS */
#tplge_notes {color: #888; font-family: arial, sans-serif; font-size: 14px; text-align: right; padding: 24px 30px 24px 30px; margin: 0;}
#tplge_notes span {padding: 0 6px 0 2px;}
/*
##############################
S O N S T I G E S / R E S T
##############################
*/
#passwd {border: 1px solid #999;}
.text {background: #dcdcd9; color: #333; font-family: arial, sans-serif; border: 1px solid #999; padding: 2px 3px;}
.file {border: 1px solid #999;}
.scroll {background: #eec; border: 1px solid #997; padding: 10px; overflow: scroll;}
.retrieve {background: #ffffff; background-image:none; border: 0;}
table.edit {background: #222; font-size: 14px; line-height: 1.2em; border: 1px solid #999; margin: 1px 0;}
table.edit td {border: 0; padding: 3px;}
table.edit a:link {color: #ccc;}
table.edit a:visited {color: #ccc;}
#tplge_content textarea {width: 90%; background: #dcdcd9; color: #333; border: 1px solid #999; padding: 4px 8px!important; margin: 0 0 10px 0;}
#cmsimple_mailform textarea {width: 90%; background: #dcdcd9; color: #333; font-family: arial, sans-serif; border: 1px solid #999; padding: 10px; margin: 0 0 10px 0;}