Changes in stylesheet makes me nuts I'M DESPERATE FOR HELP

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

Post Reply
mywebnet
Posts: 3
Joined: Mon Oct 07, 2013 8:53 am

Changes in stylesheet makes me nuts I'M DESPERATE FOR HELP

Post by mywebnet » Mon Oct 07, 2013 9:39 am

Hello

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;}

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Changes in stylesheet makes me nuts I'M DESPERATE FOR HE

Post by cmb » Mon Oct 07, 2013 6:19 pm

mywebnet wrote: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.
Are you looking for something like this? As far as I know (I'm no CSS expert) that cannot be accomplished with floating <div> elements usually (you could somewhat mimic it with CSS media queries, but that would add additional complexity, or you could style the <div>s as if they were <td>s, but that isn't recognized by older browsers). You can have a somewhat similar layout with floats if you use percentage widths, however, like here.
Christoph M. Becker – Plugins for CMSimple_XH

mywebnet
Posts: 3
Joined: Mon Oct 07, 2013 8:53 am

Re: Changes in stylesheet makes me nuts I'M DESPERATE FOR HE

Post by mywebnet » Mon Oct 14, 2013 4:29 pm

Hi

Thank You for reply to my question.
Yes, examples are similar to my thoughts about design.
But In your provided examples it's not all working as I imagine.

I asked my friend, who is working in this field for years, and he replied that, with this CSS design, it will not work, as I want and any modifications as I have done, will not work properly.
It is to complicated he say, and I really must reconsider div parameters, and something else. And bla, bla, bla....

He is very busy now, so I must somehow to resolve this problem by my self, (or make it simpler: hire web designer.)

My friend only asked, why I want to make it this more complicated, just only for final look, because it mus be coded properly to work in many web browser and etc., etc.
He does not understand, why I making such a fuss about it, for him it's looking fine.

And what I can say? It's not about me, it's about client.

I'll try to find a solution, to this problem. Maybe I must look for more simple template , with easier and more simpler CSS/html design to modify.
Anyway thanks for reply, I'll continue to search a solution for the idea.
We agreed with a client, that We will work on that We have, and I'll research in free time a solution to this problem.

O. S.
Last edited by mywebnet on Tue Oct 15, 2013 5:53 pm, edited 1 time in total.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Changes in stylesheet makes me nuts I'M DESPERATE FOR HE

Post by Tata » Mon Oct 14, 2013 7:21 pm

I had a look at your website. It is ablsolutely no problem to make it using onlu DIVs design. Anyway, I would suggest to use some of nowadays basic standards - e.g. basic width of 1000px and make it responsive, so it will fit all smaller devices (tablets, iPods, smartphones etc. It is really a work for only a couple of hours.
If you are interested, I can prepare commented template and stylesheet for you tomorrow.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

mywebnet
Posts: 3
Joined: Mon Oct 07, 2013 8:53 am

Re: Changes in stylesheet makes me nuts I'M DESPERATE FOR HE

Post by mywebnet » Tue Oct 15, 2013 5:45 pm

I'm open to any help.
If it possible to do with a little effort.
I understand, it's very uncomfortable question, but can I ask how much it will cost?

I have no clue about today standards, my knowledge is very limited and outdated so bear with me.
One more question, maybe you have some clues about banners for cmsimple? I mean mowing active banners.
Maybe some advice for this topic?

I have looked for many options and instructions, but there is no straight forward how to do answers for me, because I want in first place carousel, film strip banner.
I don't need any fancy design, but simple strip, with moving pictures will be fine.

I want on top of my web site, like carousel mowing pictures. I can make in old animated GIF method, but I think it's terrible idea in XXI century when javascripts rules.
I have looked for many, many pages with examples and templates, but most of them working based on jquerry java engine. And there is no simple instruction for dummies, how to install it, how to implement it to your template code and etc.

I have tried some way to apply scripts on my website, but almost nothing worked well. And I can't understand javascript well, so I begin to overheat and lose any enthusiasm.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Changes in stylesheet makes me nuts I'M DESPERATE FOR HE

Post by cmb » Tue Oct 15, 2013 6:08 pm

mywebnet wrote:One more question, maybe you have some clues about banners for cmsimple? I mean mowing active banners.
Maybe some advice for this topic?
There are some solutions done as CMSimple plugins, so using them requires no knowledge of JavaScript. A very simple one is Slideshow_XH; you can see it in action on http://www.malerjack.dk/ (instead of the fade effect, you can use a slide effect as well).

PS: Regarding the template: it might be reasonable to look for other templates which are closer to what you're looking for. You can find several templates using responsive design techniques in http://cmsimpleforum.com/viewtopic.php?f=13&t=5457. A template that might be particularly interesting is presented in http://cmsimpleforum.com/viewtopic.php? ... 542#p37310. A complete list of CMSimple_XH template providers is given in http://cmsimpleforum.com/viewtopic.php?f=13&t=5266. (Almost all CMSimple_XH templates are also working for CMSimple 4.x and vice versa.)
Last edited by cmb on Tue Oct 15, 2013 6:44 pm, edited 1 time in total.
Reason: added PS
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply