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
framework 3 kolommen
Moderator: velden
Re: framework 3 kolommen
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?
Re: framework 3 kolommen
dit is mijn template en ik zou graag willen weten of ik die ook in 2.x.x. kan gebruiken:
Jan-Willem
En dit is het bijbehorende STYLESHEET:
Code: Select all
{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>
En dit is het bijbehorende STYLESHEET:
Code: Select all
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.
Reason: added code tags
Reason: added code tags
