• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 3 posts ] 
Author Message
 Post subject: framework 3 kolommen
PostPosted: Sat Mar 21, 2020 5:59 am 
Offline
Forum Members
Forum Members

Joined: Mon May 26, 2008 6:12 am
Posts: 110
Hi,

Ik zoek een framework dat het mogelijk maakt 3 kolommen te hebben zoals ik nu heb. Zie www.deypenburgschecourant.nl maar dan voor 2.x.x
of al voor 3.x.x.

Wie kan mij adviseren of helpen?

Groet,

JW


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: framework 3 kolommen
PostPosted: Sat Mar 21, 2020 4:21 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1872
Location: The Netherlands
Je zou aan Bootstrap kunnen denken. Maar je zal het framework moeten voorzien van de juiste cmsms informatie. Kijk anders eens http://www.cmstemplatebuddy.com/ Of bedoel je iets anders?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: framework 3 kolommen
PostPosted: Sun Mar 22, 2020 8:05 am 
Offline
Forum Members
Forum Members

Joined: Mon May 26, 2008 6:12 am
Posts: 110
dit is mijn template en ik zou graag willen weten of ik die ook in 2.x.x. kan gebruiken:

\$1:
{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   {* Change lang="en" to the language of your site *}

{* note: anything inside these are smarty comments, they will not show up in the page source *}

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>{sitename} - {title}</title>
   {* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

{metadata}
  {* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{cms_stylesheet}
   {* This is how all the stylesheets attached to this template are linked to it *}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
<__script__ src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></__script>
<__script__ src="/uploads/js/custom.js"></__script>
   {* Relational links for interconnections between pages, good for accessibility and SEO *}
</head>

</__body>

<div id="container">

{* START ACCESSIBILITY SKIP LINKS - anything with .accessibility class is hidden from visual browsers *}
<ul class="accessibility">
  <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
  <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
</ul>
<hr class="accessibility" />
{* END ACCESSIBILITY SKIP LINKS *}

<div id="header">   {* HEADER *}
  <h2 class="floatright"></h2>
         {* this holds the name of the site on the right side *}
  <h1>{cms_selflink dir="start" }</h1>
         {* a link back to home page and the header left image/logo, text is hidden using CSS *}
  <hr class="accessibility" />
{* end #header *}</div>




<div id="links">

{* Start Navigation, stylesheet  "Navigation: CSSMenu - Vertical" *}
            <h2 class="accessibility">Navigation</h2>
            {menu template="yc // cssmenu_ulshadow"}
            <hr class="accessibility" />
{* End Navigation *}
    {global_content name='links'}

</div>

<div id="midden">
 <h1 class="title">{title}</h1>
{content}
</div>

<div id="rechts">

    {global_content name='rechts'}

</div>



<div id="footer">


  {global_content name='footer'}
  <hr class="accessibility" />
<!-- end #footer --></div>

<!-- end #container --></div>

<__body>
</__html>

Jan-Willem

En dit is het bijbehorende STYLESHEET:


\$1:
body {
   font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        background: #ffffff  ;
   margin-top: 10px;
   padding: 0;
   color: #000;
       
   
}

/* GENERAL SETTINGS */
ul, ol, dl {
   padding: 0;
   margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
   margin-top: 0;
   padding: 0;
}
img {
   margin:10px 0 5px;
}
a img {
   border: none;
}
a:link {
   color:#414958;
   text-decoration: underline;
}
a:visited {
   color: #4E5869;
   text-decoration: underline;
}
a:hover, a:active, a:focus {
   text-decoration: none;
}

/* DIV STRUCTURE */
#container {
       
   max-width: 1250px;
   min-width: 900px;
   margin: 0 auto;
   background-color: #fff;
   padding: 0px;
   font-size: 90%;
}

#header {
   width:100%;
   
background: #cCC url(/uploads/yc/logoYC_nieuw.jpg) ;
   ##margin-bottom: 20px;
}

#links {
        width:16%;
       background-color: #f2f2f2;
       position: relative;
       float: left;
min-height: 500px;
        padding-left: 10px;
        padding-right: 10px;
      margin-top: 0px;
      margin-bottom: 10px;
}

#midden {
        width:60%;
      background-color: #blue;
        float: left;
        min-height: 500px;
 padding-left: 10px;
        padding-right: 10px;
        margin-left: 10px;
        margin-right: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
}

#rechts {
      width: 16%;
      background-color: #f2f2f2;
      float: right;
min-height: 500px;
        padding-left: 10px;
        padding-right: 10px;
      margin-top: 0px;
      margin-bottom: 10px;
}


#footer {
   width:100%;
   background-color: #fff;
   clear: both; /* tells container where floating elements end, so it can enclose them all */
}
#footer p {
   padding:10px;
   margin:0;
}

/* OTHER COMMON DEFINITIONS */
.floatright {  /* this class can be used to float an element right in your page. The floated
element must precede the element it should be next to on the page. */
   float: right;
   margin-left: 8px;
}
.floatleft { /* this class can be used to float an element left in your page. The floated
element must precede the element it should be next to on the page. */
   float: left;
   margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
   clear:both;
   height:0;
   font-size: 1px;
   line-height: 0px;
}

/* DEFINITIONS NEEDED ONLY WHEN ID OR CLASS IS USED IN YOUR SITE */
#header h1 a {
/* you can set your own image here */
   background: url(/uploads/images/logoYC_nieuw.jpg) no-repeat left top;
/* this will make the "a" link a solid shape */
   display: block;
/* adjust according your image size */
   height: 250px;
/* this hides the text */
   text-indent: -999em;
/* old firefox would have shown underline for the link, this explicitly hides it */
   text-decoration: none;
}
#header h1 {
   margin: 0;
   padding: 0;
   line-height: 0;
   font-size: 0;
   background: url(/uploads/images/test_2.gif) no-repeat left top;
}
#search {
   float: right;
   width: 27em;
   text-align: right;
   padding: 0.5em 0 0.2em 0;
   margin: 0 1em;
}
input.search-button {
   border: none;
   height: 22px;
   width: 53px;
   margin-left: 5px;
   padding: 0px 2px 2px 0px;
   cursor: pointer;
   background: url(/uploads/yc/search.gif) no-repeat center center;
}

#breadcrumbs {
   padding: 1em 0em 1em 1em;
   font-size: 90%;
   margin: 0px;
}
#breadcrumbs span.lastitem {
   font-weight: bold;
}

#relational-links {
}
.left49 {
/* combined percentages of left+right equaling 100%  might lead to rounding error on some browser */
   width: 70%;
}
.right49 {
   float: right;
   width: 29%;
   text-align: right;
}

.accessibility, hr {
    position: absolute;
    top: -999em;
    left: -999em;
}

.articleimg {float:right;width:200px;padding:10px;}


/************media***********/

@media only screen and (max-width: 1199px) {

#container {max-width: 970px; min-width: auto; width:100%; font-size:70%;}
body { font-size: 16px;}
#header {
    width: 100%;
    background-position: center !important;;
    background-repeat: no-repeat !important;;
    background-size: cover !important;;
}
#header h1 a { height: 192px;}
img{max-width:100%; height:auto;}

#links,#rechts {width: 20%;}
#midden {width: 60%; padding-left:10px !important; padding-right:10px !important; margin-left:0px; margin-right:0px;}

#footer { text-align: center;}
* {box-sizing: border-box;}
#links > div {width: 100% !important;height: auto !important;}
#header h1 a {
    min-height: 100% !important;
}

}

/*********************/

@media only screen and (max-width: 991px) {

#container { max-width: 750px; min-width: auto; width:750px;}
#header h1 a {height: 143px;}

#links > div {
   width: 100% !important;
   
}
* {
box-sizing: border-box;

}
.articleimg {float: none;}
.news-article header {
   display: flex;
   flex-wrap: wrap;
}

.news-article header .articleimg {
   order: 2;
   display: block;
   float: left;
        border: 1px solid #ddd;
            max-width: 200px;
}

.meta.cf {width: 100%;}
#menuwrapper #primary-nav .menuactive span{padding-left:1px}
#menuwrapper #primary-nav li a span{padding-left:1px}
#menuwrapper #primary-nav .menuparent span{padding-left:17px}
.news-article .date { width: 50px !important; height: 50px !important;}
.news-article h2 a {font-size: 18px !important;}


}

/****************/

@media only screen and (max-width: 767px) {

h1, h2, a, p{margin:0; padding:0;}

#container{max-width:100%; width:100%}

#links {width: 100%; text-align:center;}
#midden { width: 100%;}
#rechts {width: 100%; text-align: center;}
#menuwrapper {width: 100% !important ;text-align: left;}
.news-article header img{width:100%}
.news-article h2 a{width: 100%;display: block}
ul#primary-nav li a.menuactive span{font-size:14px}
#midden .title {font-size: 22px;}
.news-article h2 a {font-size: 18px !important; font-weight: normal !important;}
#header h1 a {
    height: 19vw;
}
div#links img {
    width: auto;
}
.news-article header .articleimg {

    max-width:200px!important;
}
#midden h2 {
    font-size: 15px;
    margin-top: 8px;
    margin-bottom: 8px;
}
#midden h1 {
    font-size: 15px;
}
div#midden p strong span {
    font-size: 14px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}
#midden {
    height: auto;
}
#rechts> a,#links > ins,
#links > a {
   display: inline-block;
   vertical-align: top;
   width: 50%;
   float: left;
   padding: 0 3px;
}

.unli{display: none!important;}
.unli.active{ display: block!important;}
ul#primary-nav li ul {

     position: unset !important;
    margin-bottom: 10px;
    margin-left: 20px;
    background: none !important;
 

}
#primary-nav ul li.separator, #primary-nav .separator:hover {
    width: 209px;
    padding: 0px;
    height: 9px;
    margin: 0px 0px 12px;
    background: none !important;
}
#links > div > div {
    width: 100% !important;
}
 #links iframe{
  margin:0 auto;
      display: block;
}

#menuwrapper{display: none!important;}
#menuwrapper.active{ display: block!important;}

#links h2.accessibility {
    position: relative;
    padding: 10px;
    background-color: #004C92;
    color: #fff;
    text-align: left;
    left: 0;
    right: 0;
    top: 0;
}
#links h2.accessibility::before {
    content: "";
    width: 24px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    right: 15px;
    z-index: 9999;
    top: 20px;
}
#links h2.accessibility::after {
    content: "";
    width: 24px;
    height: 18px;
    position: absolute;
    border-bottom: 2px solid #fff;
    border-top: 2px solid #fff;
    right: 15px;
}

#menuwrapper #primary-nav .menuparent span {
    padding-left: 0;
    padding-right: 15px;
    background-position: right center;
}
}


Last edited by velden on Sun Mar 22, 2020 9:12 am, edited 1 time in total.
added code tags


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC


Who is online

Users browsing this forum: bing


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting